When do you use SCSS and CSS

Using Variables in CSS - Instructions for SASS / SCSS

Have you ever asked yourself whether it is possible to use variables in CSS? I was faced with this question when I came across the possibilities offered by CSS preprocessors such as SASS or LESS on the Internet. After a short research, I decided to learn the basics of SASS because at the time I was implementing many projects with the Framework Foundation, which is also based on SASS.

SASS (abbreviation for Syntactically Awesome Stylesheets) is another spelling for stylesheets. Think of it like CSS with variables and functions.

The language offers two spellings. The original, which is called SASS, and an alternative, which is called SCSS. SCSS is almost identical to CSS in its spelling. All examples in this manual are written in SCSS only. Apart from that, it can happen that I use the terms SASS and SCSS synonymously - since ultimately all code runs through a SASS compiler. The compiler is a program that creates a CSS file that the browser can understand from a SASS file. The SASS website describes how to install SASS via the command line. Alternatively, there are programs with a graphical user interface. I recommend Scout (for Mac) or Scout-App (for Windows).

In SASS, variables are called variables, functions become mixins, and there is also nested notation. Read what this all means now.


Use variables in CSS. No problem with SCSS.

With SCSS you can use variables in CSS. Variables store values. You only have to create a variable once to use it anywhere in the SCSS file. This has great advantages in large projects with many thousands of lines of code.

Imagine the following scenario. You have created a beautiful company website in a modern responsive design for your customer. Your customer is pretty happy but the font color is not quite right yet. Fortunately, you're already using SCSS and have saved the font color in a variable. You just change the value of the variable, sit back and relax and let the compiler write your new CSS.

Variables start with a dollar sign and are defined like CSS values. Take a look at the following example:

$ textColor: green; $ textSize: 14px; p {color: $ textColor; font-size: $ textSize; } h1 {color: $ textColor; }

CSS with functions. Mixins make it possible

Functions provide the application logic in programming and are used when complex instructions need to be carried out several times or in different locations. They also help to structure code and reduce writing effort. SASS is a stylesheet language. No programs can be written with it. Nevertheless, with Mixins, SASS offers the possibility of grouping text blocks and inserting them in different places in the stylesheet using an abbreviation. Also Arguments can be used in mixins. Take a look at the next example:

@mixin vendor ($ name, $ argument) {-webkit - # {$ name}: # {$ argument}; -ms - # {$ name}: # {$ argument}; -moz - # {$ name}: # {$ argument}; -o - # {$ name}: # {$ argument}; # {$ name}: # {$ argument}; }

You know the problem when you use vendor prefixes. You just have to enter everything twice and three times. With the above "mixin function" you can significantly reduce the amount of time you need to write in the stylesheet.

div.round-box {@include vendor (border-radius, 5px); }

Easily combine CSS selectors with the nested notation

In order to reduce the writing effort when connecting CSS selectors, SCSS brings the nested notation with it. I always like to use the nested notation for self-contained modules such as a JavaScript (jQuery) slideshow. Values ‚Äč‚Äčthat are set within the module have no effect on elements that are outside the module. In the usual CSS notation it works like this:

.slideshow p {background: white; color: black; } .slideshow h1 {font-size: 64px; font-weight: bold; } .slideshow .item {width: 100%; }

The nested notation in SCSS enables implementation with less text:

.slideshow {p {background: white; color: black; } h1 {font-size: 64px; font-weight: bold; } .item {width: 100%; }}

Of course, the possibilities with SASS are much more extensive. I use the functions mentioned above (including the use of variables in CSS) on a regular basis. If you think I've forgotten something important, feel free to leave a comment.

Finally, I would like to refer to the SASS documentation (English) where you can learn more about the possibilities of SASS.