What do you prefer? Pure CSS or the Super Amazing, Awesome SASS?

What do you prefer? Pure CSS or the Super Amazing Awesome SASS?

I prefer …

  • CSS
  • SASS

0 voters

If your answer was CSS, have you tried SASS?

  • Yes
  • No
  • Never heard of it

0 voters

Follow this video by @beaucarnes in which he teaches SASS in 2 hours.

2 Likes

SASS is definitely my favorite. It’s literally CSS on Steroids. You don’t need to retype the same class again and again. Nesting is just the best part about SASS. Variables are also another great feature on SASS. As I already told you, it’s literally CSS on Steroids :laughing:

3 Likes

Totally agree with you. Thanks for the comment.

1 Like

Which is better or more useful to know? SASS or CSS?

1 Like

SASS… it’s the same as CSS, but with math.

3 Likes

Okay, I will definitely look into that.

Oh, it’s WAY more than just CSS with math.

  • In CSS, you have to use { }, in .SASS, all you need is proper indentation, like Python (NOTE: This does not apply to .SCSS!!):
.paragraph1
  color: red;
  text-align: center;
  font-size: 15px;

.div2 
  width: 50%;
  background-color: red;
//this is a valid SASS.  
  • SASS has logic, like If, Else, and Loops:
$if $fontSize > 5 {
  color: red;
}
  • The BEST part about SASS is Nesting, in CSS you have to do this:
/* CSS */
.div2 {
  width: 50%;
  background-color: blue;
}

.div2 p {
  font-size: 25px;
  color: red;
}

.div2 p:hover {
  color: black;
}

But in SASS, you can NEST:

//SASS
.div2 {
  width: 50%;
  background-color: red;

  p {
    font-size: 25px;
    color: red;

    &:hover {
       color: black;
    }
  }
  
}
2 Likes

Apart from nesting, I think importing modules in SASS is more friendly towards big projects and teams.

Having one code base for minor changes, but having different modules for, say, the navbar, but inside the navbar we could have more modules for social icons, and one more menus, and one for the logo. And all that can be be imported on a bigger module called _navbar…

That ability is what makes most css frameworks’ magic work.

And of course, the computational factor of it. I called it math, but you were more specific. :stuck_out_tongue:

1 Like

Imagine if CSS implemented SASS? We don’t need compilers anymore… :laughing:

2 Likes

Oh that’s coming.

When I saw variables in css and the calc() function, I said “wait a minute”!

These people are jealous… in the good way. SASS hurt its feelings.

2 Likes

Ermmm…SASS looks too much like JS for me. I still haven’t managed to wrap my head around nesting and loops yet. For me I think CSS will be much easier. Besides, math and I are life-long enemies.

1 Like

You’re probably right. I already knew CSS when I saw sass. Have you used bootstrap? It’s written in SASS. If you download bootstrap and start looking at the files, you can start studying how they implement the CSS using sass.

You can start using a couple of things from it that are fairly easy. For instace:

You have used variables in CSS. You can use variables in SASS. The only difference is that when you invoque the CSS variables, you have to use: var(--variable-name)

In SASS, for instance, you just name it and use it like $main-color: blue; And when you calle it:

 p {
 color: $main-color;
}

That’s the simplest thing you can find in SASS; and nesting, like @Catalactics said.

Don’t be afraid of it. Most companies in the 2020 use SASS.

3 Likes

Okay, thank you for the advice. I will surely look into all of this and consider everything. :+1:

SASS isn’t really JavaScript, it has the similar logic that JavaScript has.

  • But Sass is a preprocessor, so that means you can’t immediately use it in your html, you have to compile it to CSS first.
  • SASS is like a framework for CSS. It’s like React for JavaScript, but it’s SASS for CSS. SASS really helps when you are creating big projects, and you are trying to style multiple elements and divs. Modules and Nesting are the best things about SASS.
  • Math doesn’t really means MATH GEOMETRY hard. It’s just some simple calculations. What he meant by math is how it is able to manipulate data using Math.
  • As I already say, if you’re a beginner to SASS, Nesting is probably the easiest to learn here’s an example of nesting:
.div2 {
  width: 50%;
  background-color: red;

  p {
    font-size: 25px;
    color: red;

    &:hover {
       color: black;
    }
  }
  
}
  • You can actually LEARN SASS in FreeCodeCamp in this link below:
1 Like

Thank you very much! You guys are all so awesome!

Sass is fantastic, I use the { } declarations instead of the indentation. Which is the SCSS variation versus the true SASS indentation method however.

The only part that I find tricky with Sass is when you get to Media Queries it gets kinda tricky seeing what is nested within what. Gets easier everytime though!

2 Likes

@codeofdreams, CSS is always good to know. If you understand basics, then you’ll grasp things like SASS, Bootstrap easier.
SASS and Bootstrap are taught as part of the Front End Libraries Certification.

2 Likes

Scss is pretty good, I used to use it a lot until most of my work started being either backend or React/similar, just sort of drifted off it. It seems much better at first but I don’t think the trade-off is worth it in the long run (this after years of writing it and CSS). Variables are the most useful thing but they were added to CSS, and I’ve generally always been able to assume support and use them in my production code. Nesting (apart from pseudo selectors/classes) is the absolute devil, it causes no end of problems (even the guy who created Sass has said he regrets adding the feature), I do not in any way miss having to fix code that uses it. I do miss the colour functions a lot tho

2 Likes

I prefer SCSS to pure Sass. I’m just so used to ; and {} that it’s hard not to use it :smiley: It’s also visually easier to follow.

2 Likes

Strange question… SASS without thinking… (SCSS syntax similar to CSS)
I suggest to check Jonas Schmedtmann tutorials

1 Like