CSS

What is Sass and how to use

What is Sass and how to use

At the very beginning, I warn everyone: SASS is addictive. If you try it, there will be no turning back, so think about whether you really want to reorganize your own way of writing CSS sheets?

 

What does SASS mean?

SASS (Syntactically Awesome Stylesheets) is an extension of the CSS language that brings it to a whole new level. SASS itself is available in two syntax versions: older (similar to Haml) and newer SCSS (i.e. Sassy CSS) which we will deal with. The newer syntax is very similar to standard CSS, but it also allows you to enjoy the benefits of SASS. Each CSS sheet will be a valid SCSS sheet, but vice versa no longer. In order to be able to use all the possibilities that will be described below, we need a SASS compiler that will process our .scss file into a .css file. You can do it a few ways that I will describe at the end. In the meantime, I will present the six main advantages / possibilities of this scripting language, which will certainly be used right away.

Variables

Yes :), finally you can use variables in CSS. The field of possibilities is enormous. From saving colors, through font sizes, selected fixed widths, breakpoints in RWD or anything else. The variable can be any attribute value that is available in the standard CSS syntax. From that moment, changing the basic color (which you use in a dozen or so places) for the whole page will be a stone. The variable should be preceded by the $ sign in order to become a variable. The following example will lighten everything:

[css]
$color-orange: #F66013;
$default-font: 14px;
 
.content {
  color: $color-orange;
  font-size: $default-font;
}
[/css]

After processing, we will receive:

[css]
.content {
  color: #f66013;
  font-size: 14px;
}
[/css]

nesting

My favorite, something that has always been missing from CSS. Thanks to this function, we can create the structure of our CSS compatible with the structure of HTML. SASS allows you to nest next tags / selectors in yourself, and without limit :). It is also possible to nest a media query, thanks to which we decide in one place how the element should behave. You will never have to re-write the same selector again. Below is an example:

[css]
.article {
    width: 90%;
    margin: 0 auto;
    h2 {
        margin: 0;
        color:#002C71;
    }
    .thumb {
        img {
            width: 100%;
        }
    }
}
[/css]

At the exit we will get:

[css]
.article {
  width: 90%;
  margin: 0 auto;
}
.article h2 {
    margin: 0;
    color: #002C71;
}
.article .thumb img {
    width: 100%;
}
[/css]

As you can see, we can perfectly mimic the structure of the HTML tree. In this approach, we can focus on a given element, not on the path leading to it.

Importation

Someone may say that we also have imports in regular CSS, but this one works differently. The content of the imported file is processed (“compiled”) and then uploaded directly to the file that imports it. This means that as a result of an import, it will always return one file. Thanks to this, we can divide our styles into smaller parts and better focus on them or divide the work into a few people. It also allows you to save subsequent HTTP requests that would have been made in the case of “standard” imports. Example:

[css]
/* plik normalize.scss */
html {
  font-family: sans-serif; /* 1 */
  -ms-text-size-adjust: 100%; /* 2 */
  -webkit-text-size-adjust: 100%; /* 2 */
}
[/css]
[css]
/* plik colors.scss */
$color-orange: #F66013;
$color-blue: #002C71;
$color-grey: #C4C4C4;
[/css]
[css]
/* plik style.scss */
@import 'normalize';
@import 'colors';
 
body {
    color:$color-orange;
}
[/css]

After processing, we will receive one file with the content:

[css]
html {
  font-family: sans-serif;
  /* 1 */
  -ms-text-size-adjust: 100%;
  /* 2 */
  -webkit-text-size-adjust: 100%;
  /* 2 */ }
 
body {
  color: #f66013; }
[/css]

Inserts (mixins)

Maybe the translation is not entirely accurate but somehow you need to communicate in Polish :). Mixin is a group of CSS declarations, which we can freely put in a chosen place. Thanks to this, we can create our CSS file which will be consistent with the DRY (Do not Repeat Yourself) rule. Not only that, we can provide such a patch with a parameter, thanks to which we will gain some flexibility. The definition of the insert begins with the expression @mixin followed by the name and / or list of parameters. As always, an appropriate example will explain everything (very classic example):

[css]
@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  -ms-border-radius: $radius;
  border-radius: $radius;
}
 
.box { @include border-radius(10px); }
[/css]

The result will be:

[css]
.box {
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    border-radius: 10px;
}
[/css]

As you can see in the example, the obvious application is to make mixins for styles generated from the so-called vendor prefix. Some decided to go even further and created all the ready mixin library. I will present selected ones in this article. It is also automatically thought that all mixins are worth keeping in a separate file and only import them using @import.

Heirdom

Another very strong feature. Thanks to inheritance, we can transfer part of the applied declarations from one object to another. This in turn again allows us to follow the DRY rule. In order for the element to inherit the characteristics of its ancestor, the expression @extend should be inserted and then the selector from which we are to inherit. In the example, we will use the class alert (which can format a message) and add further variations:

[css]
.alert {
    border: 1px solid #ccc;
    padding: 10px;
    color: #FFF;
}
 
.success {
    @extend .alert;
    background: green;
}
 
.error {
    @extend .alert;
    background: red;
}
 
.warning {
    @extend .alert;
    background: yellow;
}
[/css]

The result of processing such a .scss file will be:

[css]
.alert, .success, .error, .warning {
border: 1px solid #ccc;
padding: 10px;
color: #FFF; }
 
.success {
background: green; }
 
.error {
background: red; }
 
.warning {
background: yellow; }
[/css]

Maths

I know from experience that the ability to calculate something in flight is very useful. What’s more, the ability to calculate something on the fly with variables is even more useful. At our disposal, SASS provides operators of the following types: +, -, *, /, and%. It is also possible to convert values (eg from pixels to percentages).

[css]
.container { width: 100%; }
 
.content {
    float: left;
    width: 600px / 960px * 100%;
}
 
.sidebar {
    float: right;
    width: 300px / 960px * 100%;
}
[/css]

After compilation, we’ll get:

[css]
.container {
    width: 100%; }
 
.content {
    float: left;
    width: 62.5%; }
 
.sidebar {
    float: right;
    width: 31.25%; }
[/css]

Installation

I hope that the above features have already encouraged you to install SASS. If so, we have several options available here:

Installation of special software that tracks and processes files on a regular basis. This is the simplest solution. Unfortunately, the target server will not always be able to install a separate application. In this case, it is always possible to compile locally and upload the processed file to a remote server / machine. On this page there is a list of applications (free or paid) for various systems. After installation and startup, the case usually looks very similar: we indicate the directory to be “watched”, if it changes .scss files (but not only), then the application will automatically generate the appropriate .css files.

koala sass

A more difficult option is to install SASS manually. At the moment, the installation is possible under the following systems: Linux, Windows and Mac. It looks very similar on every system. First, we install Ruby, and then with Gem we install SASS, command (assuming we have ruby in the console):

[css]
gem install sass
[/css]

The Ruby installer for Windows can be found here. During installation, check the “Add Ruby executables to your PATH” option. After installation, we run the command line (cmd.exe) and enter the above line.

For Linux systems, I recommend using the appropriate manager for distribution (eg apt-get for Ubuntu).

In Macs, Ruby is pre-installed.

The third option is to use the solution written for the selected programming language. Github is full of SASS implementation for virtually all popular languages. Personally for PHP I used https://github.com/leafo/scssphp/. I suggest looking for, and you will definitely find something suitable.

We use the command line

For those who decided to install “bare” SASS, I present a few useful commands that can be called directly in the console (all systems):

sass style.scss style.css

It will process the style.scss file once, and the result will write to the style.css file. Sometimes it is useful for a one-time replacement or an error correction on a remote machine (if SASS is installed there).

sass -watch style.scss: style.css

A more practical option: SASS will now follow the style.scss file and if any change occurs, the whole will be processed and saved to the style.css file. It should be remembered that after the editing process has to be completed (eg CTRL + C). Below is an example of how the command works under Windows:

sass installation

sass -watch app / sass: public / stylesheets

A similar case as above, but now, SASS will be watching not a single file, but the whole directory.

sass -help

A list of all available commands and their parameters can be found in the official documentation. I recommend it to more inquisitive users.
Compilation styles

Very useful information. The SASS compiler has an option named

[css]
"--style"
[/css]

after which we give the name of the style of the returned format. Below I put all four options together with the effect. At the very beginning we have the original .scss file:

[css]
.alert, .success, .error, .warning {
    border: 1px solid #ccc;
    padding: 10px;
    color: #FFF;
}
 
.success {
    background: green;
}
 
.error {
    background: red;
}
 
.warning {
    background: yellow;
}
[/css]

Nested sass style.scss style.css –style nested:

[css]
.alert, .success, .error, .warning {
  border: 1px solid #ccc;
  padding: 10px;
  color: #FFF; }
 
.success {
  background: green; }
 
.error {
  background: red; }
 
.warning {
  background: yellow; }
[/css]

Expanded sass style.scss style.css –style expanded

[css]
.alert, .success, .error, .warning {
  border: 1px solid #ccc;
  padding: 10px;
  color: #FFF;
}
 
.success {
  background: green;
}
 
.error {
  background: red;
}
 
.warning {
  background: yellow;
}
[/css]

Compact sass style.scss style.css –style compact

[css]
.alert, .success, .error, .warning { border: 1px solid #ccc; padding: 10px; color: #FFF; }
 
.success { background: green; }
 
.error { background: red; }
 
.warning { background: yellow; }
[/css]

Compressed sass style.scss style.css –style compressed

[css]
.alert,.success,.error,.warning{border:1px solid #ccc;padding:10px;color:#FFF}.success{background:green}.error{background:red}.warning{background:yellow}
[/css]

As you can see, the more “spread”, you can use in the coding process, while the production servers are already recommended to use compressed, which will save on transfer and will affect the faster loading of the site.

 

Leave a Reply

Your email address will not be published. Required fields are marked *