Modern CSS with Sass

Language: German

Modern CSS with Sass - practical tutorial

Have you always been annoyed that there are no variables and loops in CSS? No more of that! CSS preprocessors like Sass provide exactly these things. This means that CSS code can finally be generated efficiently. In addition to Sass, this tutorial also takes a look at the popular Compass framework, which takes the use of Sass to another level. Get to know the possibilities that Sass and Compass have to offer in three hours.

Become a Sass master with this three-hour video training and web developer Daniel Koch
Define variables, create your own mixins, experiment with colors and numbers and, to top it all off, use Compass
Learn to create CSS efficiently and apply your new knowledge to future projects

Step by step to professional CSS development. If CSS, then modern and with Sass - Daniel Koch shows you how!

Zugriff auf alle Inhalte

In der Mitgliedschaft ab * € monatlich

oder

Inhalt in den Warenkorb

Sofort-Download nach Kauf: einmalig * €

Details

Usable with:
content: 3 h Video training
Licence: private and commercial Rights of use

Modern CSS with Sass

free of charge

Modern CSS with Sass - 01 An introduction

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.

Modern CSS with Sass - 02 The installation

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.

Modern CSS with Sass - 03 Skillful compilation

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.

Modern CSS with Sass - 04 Combine files

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.

Modern CSS with Sass - 05 Declaring and using variables

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.

Modern CSS with Sass - 06 The nesting principle

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.

Modern CSS with Sass - 07 Skillful inheritance with Extend

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

Modern CSS with Sass - 08 modules with placeholder selectors

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.

Modern CSS with Sass - 09 Define mixins

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.

Modern CSS with Sass - 10 The parent element selector

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.

Modern CSS with Sass - 11 Automation with for-loops

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.

Modern CSS with Sass - 12 Each and While loops

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.

Modern CSS with Sass - 13 case decisions with if and else

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.

Modern CSS with Sass - 14 Mathematical Operators

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.

Modern CSS with Sass - 15 color games

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.

Modern CSS with Sass - 16 Compass

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

Modern CSS with Sass - 17 Compass and CSS3

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.

Modern CSS with Sass - 18 Compass in bullet action and a look at Susy

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.

Details of the content

CSS in efficient - with Sass: get started with the practical tutorial
Sass has revolutionized CSS development because CSS code can finally be written effectively . In a whopping three hours with 18 lessons, you will learn everything you need to know about Sass and the Sass framework Compass .

Installing the Sass development environment

Before you embark on your Sass journey in the CSS tutorial , it's time to install it. But don't worry - it's very simple. All you need is Ruby and a few commands on the command line and you'll be the proud owner of a Sass development environment. If you have been reluctant to install Sass so far, you will be guided through the installation step by step here. A first test will then show which Sass version is installed.

First steps with a typical project structure

This is followed by the first steps: Let's get started with Sass! A first look at the syntax is followed by basic language features. You will get to know variables, see a typical project structure and quickly find your way around Sass.

Development: loops & if-statements

Now that you are prepared, it's time for professional development : What makes Sass so special are the things that are almost reminiscent of real scripting languages like JavaScript. This is because loops can also be defined and if statements used in Sass. These things are also the basic prerequisite for the supreme discipline in Sass - the definition of mixins. These are powerful functions that make your work with Sass, and ultimately with CSS, much easier.

Compass: Simplifies working with CSS

The crowning glory of this training is Compass . This takes Sass development to a whole new level, as this Sass framework offers countless tools and functions that make working with CSS even easier.

What you'll learn in the CSS and Sass tutorial

You will learn the functions of Sass step by step, from getting started to the professional tools and working with Compass. This will show you what is currently possible and you can put your knowledge into practice straight away. CSS writing has never been so efficient!