Is SASS important?

HTML & CSS
1

Hi there,
I am learning Web Development, I have learned HTML, CSS, and JS basics. Now I am curious about SASS. Whether it is valuable to learn or not?
Also, If I should learn SASS where can I find the best learning resources?

2 Likes
2

You will never know. You will now learn SASS and the next customer is using SCSS.

2 Likes
3

Thereā€™s a reason that computer science classes start with Theory, and why you started with CSS.

Learn how to program well, and you can program pretty much anything. Language is a skin on top of the foundation of general theory.

I will say this; Iā€™ve never had a need for anything above HTML/CSS/JS to handle all of the front end of a website, and there are very few limitations on what can be done with those base level tools.

10 Likes
4

I have got by for so many years using only regular CSS. So I would not say learning a pre processor is important.
Or maybe I donā€™t know what Iā€™m missing.

2 Likes
5

Iā€™ve mentioned this before on these forums, but I used to be in this camp.

I will never willingly go back to regular CSS. The nesting alone makes it worth it IMO.

Is it absolutely necessary? No.

5 Likes
7

Funnily enough I find that the worst thing about it :slight_smile: My thoughts are much the same as Jasonā€™s :laughing: Make sure you wear your ā€˜hard hatā€™ if you visit that link :wink:

Joking aside I think people should make their own minds up and do what suits them the best. Not everyone works in the same way or uses the same tools and systems. The bottom line is that you need to be good at your job whatever you do.

2 Likes
8

Well, I just started learning SCSS and I was completely blown away. SCSS provides tones of features. I use

display: flex;
align-items: center;
justify-content: center;

now I just create a @mixin and use that anywhere in the code :sweat_smile:.

Not sure how much practical is it gonna be in the future but right now I am greatly enjoying it :slightly_smiling_face:.

1 Like
9

Probably only twice as much work as doing it properly in the first place:).

Now you not only have to remember the mixin you have to remember what it does and also assumes you understand how the css interacts with whatever else is in place.

Not a fan as you can guess :).

5 Likes
10

I dontā€¦ quite understand that logic, but perhaps this is a post for another discussionā€¦

Whatā€™s the difference/improvement/ease between

@mixin mymixin {
     display: flex;
     align-items: center;
     justify-content: center;
}

body, div1,div3 {
    @include mymixin
}

and just regular CSSā€¦

body, div1, div3 {
   display: flex;
   align-items: center;
    justify-content: center;
}

?

Aside from making messier end-user-code by pasting the items in all over the place, I guess?

5 Likes
11

Well you are quite right here. :sweat_smile:
I think i gave wrong example :joy:.

1 Like
12

Well this was the point of my previous post about the foundations of theory.

If someone is going into S(A/C)SS and saying ā€œthis is great, I can @include things all over the place!ā€ and then spits out code like

@mixin mymixin {
     display: flex;
     align-items: center;
     justify-content: center;
}

body {
    @include mymixin
}

div1 {
   @include mymixin
   color: red;
}

div3 {
   @include mymixin
   color: blue;
}

Then I would say they havenā€™t gotten the fundamentals of CSS down, and are building a castle on a swamp.

2 Likes
13

Makes sense :100:

14

I would say:

A software developer is happy about SASS as it is more his kind of structured thinking, while CSS is a big box of chaos for him.

A web designer is more happy with CSS as he does not need to think very structural. He can just put all the stuff inside and it works anyway.

5 Likes
15

I think you hit the nail on the head there as Iā€™ve always been annoyed at programmers trying to turn CSS into JS or some other system. I always joked that they were doing it just to annoy me.:slight_smile: I believe itā€™s because of the different approaches in thinking required for these systems and some programmers like tight systems with no ambiguity whereas CSS is designed to be more open minded and freeform.

You have to think in CSS when you design with CSS and Iā€™ve never had a problem with it from day one. Once learned properly it does exactly what I want and as I expect (most of the time) in a way that suits me down to the ground. I donā€™t see it as chaos but a flow of styles (you could say a Cascade). I feel more like a conductor than a programmer :slight_smile:

I fear that pre-processors are initially latched on to by people who do not understand CSS just like they grasp at bootstrap in an attempt not to learn CSS properly to start with (just like people grasp at jquery instead of first learning JS). I believe once youā€™ve got a good grasp at CSS then you can look at those systems objectively and make them work for you (as @RyanReese has pointed out he uses it all the time but at the same time he is expert at vanilla css also so knows what and when to use something). As we see from the mixin that @sarmadfarooqhamdani posted itā€™s not just a matter of doing things its doing the right things that count.

We are all most comfortable in our own boxes so if using a pre-processor works for you then thatā€™s fine as long as the underlying principles of CSS are not obfuscated by the tools you use.

Anecdotally I worked for about 5 years on a large application (about 10 programmers) on a system where Sass was enforced and all the errors I had to fix were by the incorrect use of the SASS and team members not understanding how it affected the underlying css. In all that time the only useful thing I used was variables but we have that in CSS now anyway. All the other stuff was a barrier between me and the CSS.

Bottom line is I think you should know how to use these pre-processors because some jobs you get you will be forced to use them but donā€™t use them as a crutch for not knowing css properly to start with.

4 Likes
16

And thatā€™s the rub, I think. Knowing how to use SCSS is great - until you get into an environment where you CANT use it. If you dont have the base level CSS knowledge to build from, youā€™re screwed. If youā€™re in a SCSS ā€œenforcedā€ environmentā€¦ you can still just use CSS, because SCSS is built on top of/above CSS (and in the end, all that SCSS does isā€¦ generate CSS).

2 Likes
17

In what scenarios or types of projects would you recommend prioritizing the learning of Sass to web developers who have already mastered HTML, CSS, and JavaScript basics?

2 Likes
18

To be honest, never (with one caveat).

IF you have a ā€œmasteryā€ of CSS, then thereā€™s no need to prioritize learning it UNLESS you have a job (or potential job) which uses it.

2 Likes
19

Thatā€™s not the best use of a mixin though. Hereā€™s a good example of a mixin. This will hide text visually but not for screen readers. So imagine a hamburger menu button with a nested span that holds the text. Youā€™d do

.menu-toggle button {
  /* button styling */
  span {
    @include hide-content;
  }
}

@mixin hide-content {
  display: block;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

You can definitely abuse mixins, but generalized use cases like this are GOLDEN for me. I like using mixins for scenarios that happen many times per website and donā€™t really need anything else. For example, I work in a proprietary CMS that has small column layout elements (likea 4 column layout element within an 1180px grid). I have a mixin (that we used to use before container queries) that would target all the narrow column situations that the CMS creates. That allows me to create a smaller style of an element easily by referencing the mixin like so:

.element {
  /* normal stuff */
  @include column-narrow() {
    /*what happens in narrow situations
  }
}

Also, another plug for using sass is the ability to create sass partials of separate components of what youā€™re working on (great for a CMS worker like me where we have different modules) and have it all compile into 1 neat succinct main.css

Ultimately for the work I do, I couldnā€™t imagine life without it.

(as @RyanReese has pointed out he uses it all the time but at the same time he is expert at vanilla css also so knows what and when to use something).

:heart:

2 Likes
20

The skeptic in me somehow doubts that the idea of ā€œinsert this block of CSS repeatedly into the fileā€ can be deemed ā€œsuccinctā€ā€¦

2 Likes
21

If I need to hide text visually like that, why would I not want to use a mixin? Or use an extend (if youā€™re worried about bloat). Genuinely curious as to the counter argument.

Edit- Apologies, I just got out of a meeting and my brain did not properly read what you wrote.

Perhaps succinct was not the right word. Although I do like that compilation behavior :slight_smile: .

1 Like