Modern CSS with Sass - practical tutorial

CSS can be written much more effectively thanks to CSS preprocessors. This video shows what these preprocessors are, which ones are available and why Sass was chosen for this series.

Before you can use Sass, you have to install it. And Ruby is a prerequisite for this. Both - the installation of Ruby and Sass - are shown in this video. You can then test whether the Sass installation actually worked.

Sass files have to be converted into CSS files so that they can actually be used. Thanks to the Watch command, you can easily detect changes to individual files or within entire directories.

SCSS files can be imported and merged using @import. What all this has to do with an underscore in front of the file name is one aspect of this video.

Sass offers the option of declaring variables. This concept is not available in conventional CSS, but in Sass it is an ingenious tool for the effective development of stylesheets.

Thanks to nesting, the Sass syntax can be kept much leaner than is usual in CSS. Nesting also helps you to write code much more clearly.

Using @extend allows you to pass a set of CSS properties from one selector to another. This also helps to keep Sass files lean.

The placeholder selector enables the definition of modules. This modularization allows Sass syntax to be divided into logical blocks that can be integrated at different points.

Mixins are functions that can be used to significantly simplify workflows, for example. This video shows you how to define and use your own mixins.

With the selector, which is the subject of this video, you can access the parent element of an element. This selector is not known to exist in CSS and therefore offers huge added value.

Sass enables the use of for loops. This works very simply in Sass and can be used, for example, to define your own grid system.

In addition to For loops, Each and While loops can also be used in Sass. This video shows how this can be used for automation.

In languages such as php and JavaScript, it is possible to react to different events using if and else. Something like this actually exists in Sass too. This video shows how this can be used.

You can calculate in Sass. This is useful for defining font sizes, for example. Thanks to the corresponding operators, you can also build your own individual grid system.

Of course, colors can be defined in Sass. However, Sass also goes much further than conventional CSS in this area. Thanks to the corresponding functions, colors can be easily manipulated, for example.

The Compass framework extends the possibilities of Sass many times over. This first video shows you how to install and use Compass.

The Compass project website is the central source of information when it comes to working with this framework. I'll show you how to work with the documentation using the CSS3 features of Compass.

An example shows how easy it is to implement things with Compass. At the end of this series, we also take a look at an alternative Sass framework. Susy offers a lean grid system.