Member preview

CSS evolves, you also should

If you keep writing pure CSS you’re wasting your time.

Like everything in life, web pages evolve as the components that form it obtain new functionalities. The CSS is the component responsible for making beautiful what our eyes see and yes, he has also evolved. Say goodbye to the .css file of a lifetime. The .scss and .less have come to stay.

But what are SASS and LESS?

I think that before starting to talk about these extensions it’s important to make a concept clear: CSS preprocessor.

CSS preprocessor

A CSS preprocessor is a tool that allows us to write pseudo-CSS code that will then be converted to real CSS.

That pseudocode is made up of variables, conditions, loops or functions. We could say that we have a programming language that generates CSS.

The goal of these pre-processors is to have a simpler code to maintain and edit. The pre-processors include features such as variables, functions, mixins, nesting or modularity.

After this clarification, now yes:

What are SASS and LESS?

To say that Sass and SCSS often get into the same bag, people often use SCSS saying it is SASS. Sass is the complete preprocessor and syntax. It has its own syntax (which is indented) and compiled in CSS.

SCSS falls within the Sass sack, it is the CSS syntax that you already know but has all the advantages of Sass. A valid CSS is a valid SCSS so it is much simpler and friendlier to write.

Personally I write with SCSS. It seems much more manageable to me. Here I give you an example so that you can see the difference:

// sass
.article
font-size: 20px;
color: #000;
    .header
font-weigh: bold;
text-transform: uppercase
// scss
.article {
font-size: 20px;
color: #000;
    .header {
font-weigh: bold;
text-transform: uppercase;
}
}

Can you tell the difference, right? Now that we have become familiar with the syntax, the best is left.

Variables

The use of variables is key if we are going to have the same value repeated many times. For example, personally, to me, it has saved me many times from having to abuse the “Search and replace”.

Once a variable has been declared, we can use it throughout the document and so if at some point we need to change something simply by doing it once it is enough.

They are usually used to define colors, sizes, etc. Example:

$primary-color: #293545;
$secondary-color: #619edd;
.footer,
.header {
background-color: $primary-color;
}
a {
color: $secondary-color;
}
.button {
background-color: $primary-color;
}

Once compiled it would look something like this:

.footer,
.header {
background-color: #293545;
}
a {
color: #619edd;
}
.button {
background-color: #293545;
}

How cool is it to see that changing the value of a simple variable is enough? Well, the matter doesn’t end here.

Nest

Nesting is another key. However, it’s as useful as it’s dangerous because once you understand its operation, nesting is very easy (so much that you do not realize it and end up nesting to infinity).

It may be that nothing happens, but after documenting in different forums full of experts in Scss, they recommend that there be three nesting levels at most. Let’s see this in a very simple example:

.menu {
ul {
list-style: none;
margin: 0;
padding: 0;
}
  li {
display: inline-block;
vertical-align: middle;
}
  a {
display: block;
padding: 5px 20px;
}
}

Once compiled it would look like this:

.menu ul {
list-style: none;
margin: 0;
padding: 0;
}
.menu li {
display: inline-block;
vertical-align: middle;
}
.menu a {
display: block;
padding: 5px 20px;
}

Thanks to Sass we avoid having to write the same class so many times and also if we wanted to change the name of the class to the menu it would be as easy as changing it once and voilà! after compiling finished task.

If at any time we want to apply some effect (let’s say hover for saying something) it’s as simple as using the ampersand.

a {
color: #000;
  &:hover {
color: #fff;
}
}

That is, using & we are, in this case, referring to the a tag. What in CSS comes to be:

a {
color: #000;
}
a:hover {
color: #fff;
}

Extend

Another of the wonders of this language is called @extend. This property allows us to take advantage of the characteristics of an existing class and add more properties without having to repeat them. Here is a nice, practical and simple example:

.button {
border-radius: 4px;
padding: 2px 5px;
font-size: 16px;
}
.big-button {
@extend .button;
font-size: 18px;
}

.big-button class gets all the properties of the .button class and we also apply a larger font size (and without the need to rewrite all the properties). Once compiled:

.button,
.big-button {
border-radius: 4px;
padding: 2px 5px;
font-size: 16px;
}
.big-button {
font-size: 18px;
}

Mixins

The mixins explained in a simple way are Sass functions that allow us to create our own functions.

@mixin square($size) {
width: $size;
height: $size;
}
@mixin circle($size) {
@include square($size);
border-radius: 50%;
}
.profile-img {
@include circle(40px);
}

In CSS:

.profile-img {
width: 40px;
height: 40px;
border-radius: 50%;
}

At first it may seem complicated but once you use it more and more it is very useful.

Import

I think this is the biggest advantage that Sass offers. Why? Because this feature allows us to have the CSS distributed in small files, which is appreciated when the customization of a website goes out of control and you end up with 3475345845837 lines where you do not know where everything is.

We can distribute the CSS by categories, example, a file for the menu, another file for the classes of the different buttons, another for the footer, etc.

We have to have a main file in which we will import all the files that we want to be compiled. When compiling Sass will be responsible for maintaining the order of files. And be careful because we all know how important order is in CSS.

@import 'menu';
@import 'buttons';
@import 'footer';

After compiling we will finish with a single file that will contain all the CSS. So it is easier to work in addition to improve the speed of our website because in the end the server will only have to make a request for all the CSS.

Welcome to the wonderful world of preprocessors

With these notions I think it says the basics of Sass. Now, my young Padawan, you are ready to enter the wonderful world of CSS on steroids.

Any doubt, comment or contribution is grateful. Tell me do you use Sass or some other CSS pre-processor?