Better CSS by SASS

Ever since the 90s, CSS has been helping us make the internet a prettier place. And although CSS has been optimized and updated time and time again, there are still some things that cause programmers trouble in their daily work. This is where the preprocessors come into play. They can speed up the work flow and make coding much easier.

This article first appeared in the AWMpro #17

In this article, I want to give you a quick introduction into the world of preprocessors, using SASS as an example since it’s the most commonly used preprocessor. But of course, there are many others out there apart from SASS: programs like LESS or Stylus, which all follow the same rules, more or less.

Sass_main
Preprocessors automate tedious tasks and greatly facilitate things like color selection or working with frequently recurring attributes. In additton to that, they also off er a larger range of functions, making your work that much more efficient.

Sine CSS is widely accepted as the standard stylesheet language in W3C, the current generation of browsers are unable to interpret SASS or other preprocessor languages. And from the looks of it, this situation is not going to change any time soon. Therefore, we need a so-called compiler (such as Compass). It transforms SASS code into common CSS and puts it in a regular CSS file. This way, you can place the entire CSS code in a single stylesheet file. Also, other people will be able to understand and edit the code, even if they aren’t familiar with SASS as a stylesheet language.

Brainhack_main2

Since the introduction of CSS3, the scope of internal CSS functions has increased quite a bit. Today, there are even animations, flex boxes, and shapes. Slowly but surely, we also see more functions that people already know from SASS or other preprocessors. And soon, we will also get CSS support for variables and nesting. Nonetheless, preprocessors still carry special relevance, and they will continue to be relevant even in the long run.

Syntax

In SASS, you can use nesting, i.e. you can incorporate child elements by simply typing them in the curly brackets of the parent element (see figure 1). This saves you a lot of typing and, consequently, time, and it also makes for a clearer structure.

header {
background:
color: red;
image: url(bg.jpg);
size: contain;
position: 50%;
}
nav {
background-color: #ff f;
p {
color: green;
}
}
p {
color: red;
}
}

Figure 1

In the example given above, we have two P elements that are to be displayed in different styles. Using CSS, you need to type in “header nav p” in full to trigger the element while in SASS, you imply add the P tag to the nav tag. Meaning, there is less typing. Thanks to the superior syntax in SASS, creating and maintaining codes is more concise and takes up less time.

Variablen

SASS enables you to use variables. For instance, you can determine colors through variables, and by changing the variable, you can change the color on the whole site. Currently, CSS does ot offer such an option, instead, you have to change every color attribute manually.

$farbe1: #000;
$farbe2: #ff f;
header {
background: {
color: $farbe1;
image: url(bg.jpg);
size: contain;
position: 50%;
}
nav {
background-color: $farbe2;
p {
color: $farbe1;
}
}
p {
color: $farbe2;

Figure 2

The compiler translates the variables to valid CSS code. Therefore, the SASS-defined variables don’t show up in the CSS code, but they can be used in SASS to work on your project. This is hat creates the aforementioned browser compatibility. CSS variables that can be used on your sites, without fallbacks, are still several years away, but with SASS, we already have that option oday, free of problems or uncertainties. This is one of the main reasons why preprocessors will be around for a long time.

Mixins

Mixins are a powerful SASS tool. They enable you to standardize or adjust functionalities as a whole. There are lots of possibilities, and I recommend using them to sum up functions in abbreviated form and making them adaptable on the entire site. For instance, you can shorten down two of the most commonly used selectors, :hover and :active and use this abbreviated orm y adding them to a mixin.

//VARIABLEN
$farbe1: #000;
$farbe2: #ff f;
// MIXINS
@mixin interact {
&:hover, &:active {
@content;
}
}
//ANWEISUNGEN
header {
background: {
color: $farbe1;
image: url(bg.jpg);
size: contain;
position: 50%;
}
nav {
background-color: $farbe2;
p {
color: $farbe1;
}
}
p {
color: $farbe2;
@include interact {
color: $farbe1;
}
}
}

Figure 3

Figure 3 demonstrates how we create and activate a mixin. We create the mixin using @mixin, then we choose a name (in this case “interact”) and place the corresponding attributes in curly brackets. In this particular case, we want to be able to add the attributes individually, every time we use them. This is reflected in the @content attribute. To activate the mixin, we use @include and the name of the mixin in the P selector. So, you only need to type in the function once, and the next time you can add it via shorthand. You can also use, or even create, variables in mixins which opens up even more opportunities. So many, in fact, that listing them would go beyond the scope of this article.

Summary

In order to learn a stylesheet language, you have to get an understanding of the relevant syntax. But if you know CSS, you won’t have a hard time with other stylesheet languages, be it SASS, LESS, or Stylus. Preprocessors are there to facilitate work processes, enabling you to work faster and with a more concise structure. Also, you get to use features that are still dreams of the future in CSS, and you don’t even have to worry about special fallback solutions.

 

Categories
Know-HowTutorialsWeb-Tech
No Comment

Leave a Reply

Der Countdown läuft! AC Kickoff 2018!

Ab morgen gibt es 1€ extra pro Lead*!
Jetzt schnell noch Kampagnen anpassen: https://t.co/gRyoFvvLUN

Mehr Infos gibt es hier: https://t.co/x1l5EpfZRG

*Lead = Double Opt In

AC Kickoff 2018: Amateurcommunity PPL + Revshare stornofrei!
Mehr erfahren -> https://t.co/MPlOex9UU5

Good things come to those who wait – And you have clearly waited enough for the shiny new Webmasterchannel! 🤩🤩🤩

Check out all about it on the blog.
https://t.co/sEK2JWViMM

And because we are working on our own page and the #SEO on it atm - have some cool #SeoTips ! 👌

Magazine

RELATED BY