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

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

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.

2 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

Yeah, Sass kinda quietly faded from view, it doesn’t really get used very much at all afaik even though it’s available, but Sass kinda gets used to mean SCSS a lot of the time (like the main website is sass-lang.com, the compiler is libsass or dartsass, etc etc). It gets a bit confusing tbh

1 Like

Most of SASS began to fade away, but most people still uses SCSS. Because it still has that CSS feel and with some added logic features that SASS have. That’s what I mainly use.

2 Likes

Yeah, sorry I should have been clearer – it’s just the original indented syntax that’s faded away, Sass and SCSS are used almost interchangeably now to refer to the SCSS syntax

1 Like

I really like SASS, but I don’t bother with it for small projects because… meh.

2 Likes

At my job we use CSS exclusively.

There are some drawbacks to not using CSS.
First of all, you have to recompile every time you make a change & when your project gets bigger it’s annoying to wait to finish.

The CSS file it generates is usually significantly bigger.

As a new developer you can’t go wrong knowing pure CSS, but if you land a job where they don’t use SASS it’s going to be a PITA.

As long as you write good CSS there’s really no reason to use SASS. Most browsers cache css rules anyways after 1st visit. And if you use http2 you can use server pushes to fix first time loaders too.

2 Likes

How about exporting in min css?

I’m not sure which backend language you’re using,… but we use PHP, node and python on different servers and on different parts of site.

So here’s an example, for each page of the website we name the css file that name.
So if I’m on the blacklist page, the css filename would be blacklist.css - Also, all the rules in that file would begin with .blacklist

All of our css files would be in one folder. When we start the server, we get all the css files in one folder and combine it into one large css file, then regex out all the %tokens% with whatever the user had saved in the database for themes, we also remove all the spacing giving you a finished product of a compress single css file.

This allows finding css rules super easy and it’s compressed & easy to update for any programmer as long as they know the page.