SASS: CSS AS A PROGRAMMING LANGUAGE

For those who have never used it, CSS is great, it is a style language (not programming) that allows us to make web pages more beautiful. It allows us to indicate colours, width, height, images, positions, font sizes, everything that has to do with design!

CSS has evolved a lot, especially for being only 20 years old (which is relatively little), but the truth is that being a styling language and not a programming language when we do more or less large projects, we can become too small.

Therefore, in this article, we are going to see CSS as a programming language.

Problems with CSS

As I mentioned in the introduction, CSS is great as a styling language, we can do cool things, we even have the media queries so that, depending on whether it is displayed on a mobile or a computer, different styles are applied.

What happens is that this is perfect when we have a CSS with 200 lines of code, but if we have more than 1000, it starts to get complicated, right? How can we order the code?

Well, now imagine big platforms like Amazon, eBay, Facebook, we are talking about hundreds of thousands of lines of CSS code. We have to order it somehow!

And not only CSS does not allow us to sort in a "powerful" way the code, but also we don't have variables! And this is very important.

Imagine for a second that Facebook, which has a blue colour, for studies it conducts, realizes that if you put a little darker blue, people feel more comfortable and stay longer on the web (pure marketing). What would you have to do? Review 250,000 lines of code and change them all? It would be better to have a variable with the hexadecimal colour and simply change that value and change it everywhere!

Just, for all this, we have SASS Let's see what it is!

SASS: CSS as a programming language

For those of you who don't know what SASS is, I'll start by saying that it's a kind of doped CSS. It's as if we put together all CSS and a few programming languages.

We must understand something, browsers cannot run SASS, they can only run CSS.

So, we will have to design our web with SASS and then, with one of the many programs that exist, it will "translate" SASS to CSS, and then, that file is the one we can use in the browser.

So let's see what we can do with SASS!

The advantages of using SASS

Undoubtedly, using SASS has many advantages, but in order not to make a long article, let's see the main ones and the ones I use most often:

Variables in CSS

Undoubtedly, one of the advantages for which more and more companies use SASS instead of CSS, is the possibility of using variables, imagine the power!

You can declare all the variables you want (colours, font, etc.) and then use them in the code, whenever you want, so, if someday you want to change the font or colour, you will not have to review thousands of lines, but, simply change that value.

Let's see an example:

$font-stack: Helvetica, sans-serif
$primary-color: #333
font: 100% $font-stack
color: $primary-color

We have to think that we can use these variables whenever we want, not just once. Do you realize the potential?

Nested structure

One of the things that makes me most angry about CSS is that it doesn't follow the pattern of inheritance as in HTML, that is, in HTML, if I want an <h1> inside a <div> I would simply have to put it inside, for example:

<div class="home">

  <h1>I am a title</h1>.

</div>

However, in CSS, as we already know, we can not put selectors inside selectors, but we would have to do the following.home{

.inicio{
  background: red;
}
.inicio h1{
  color: blue;
}

Well, with SASS that's over! We can do it like this

.inicio
  background: red
  h1
    color: blue

Although it is a bit awkward that does not have the brackets as delimiters { }, it is certainly much more powerful, as it allows us to group content in a very simple way.

Remember that when we make an important web page with many pages/sections, if we do not add everything correctly, CSS code will be executed where we do not want to. Thanks to SASS we save this problem!

Importing files

Another great advantage of SASS is that it allows us to join several files into one.

That is, it is possible that to order all the code, we have created different files (for different pages of our website), well, thanks to SASS, we can do that once all the code is ready, a single CSS file is generated with all the code of all files.

Thanks to this you will save that when visiting your website people make different requests to different CSS files, that is to say, you will get your website to go a little faster.

Functions or mixins

If we combine the advantage of being able to use variables and the one of being able to import files ... and we allow the creation of small functions ... we obtain the mixins.

The mixins are normally in my case I put in the same file, which I then import in the main SASS file to be able to use the mixins anywhere.

With the mixins well used we can have functions that apply styles in an automated way for example:

• Make breakpoints for different screen resolutions in a very easy way (responsive designs).
• Make css thinking in a pattern design (for example that all the buttons on the web look the same because they use the same mixin).
• Make functions that allow code reuse, which otherwise would force us to have repetitive and unmaintainable code.
• Use functions to which you can pass parameters/variables to make them even more flexible.

The advantage is that the code is very scalable and flexible. For example, we have a mixin that styles all the buttons so that they look the same (same background colour, same font, same size, same border, ...). If in the future we want to make all the buttons have the same hover effect ... we only have to modify it in the mixin and it is applied to all the HTML elements that we have with the button style.

SCSS: Another format to use SASS

SASS is great, really, it's very good, but many people (including me) there is something that irritated us and we did not like and that is that it did not respect the CSS syntax, ie, did not support the braces { }, or the semicolon so characteristic;

So what they did was to create within SASS a new code structure called SCSS (Super CSS), which although it seems difficult to understand, we can summarize in that we can use the CSS syntax for SASS.

For example, this SASS code:

.inicio
  background: red
  h1
    color: blue

It would become the following in SCSS:

.inicio{
  background: red;
  h1{
    color: blue;
  }
}

And when compiled in CSS it would look like this:

.inicio{ background: red; }
.inicio h1{ color: blue; }

Amazing, isn't it?

Summary

As we can see, SASS/SCSS is very powerful and creates a before and after when designing web pages with CSS.

And as you can imagine, all websites are based on HTML and css. Wordpress, Joomla, Drupal or any other CMS also use css and HTML.

So, in my case with Drupal, it's been years that all the projects I work on are done with SASS/SCSS. It allows me to be much more productive writing less code for the frontend, which means using less time and being more competitive in the final price that can have the cost of making a website for my clients.