Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Lære Understanding Sass Syntax for Better CSS | CSS Preprocessors and Sass
Advanced CSS Techniques

bookUnderstanding Sass Syntax for Better CSS

To start writing sass code, we need to create a file with the extension .scss. (e.g., feature.scss).

Let's consider the sass syntax on the following css code. We will manipulate the button that will have some hover effect. We write css code for it:

.button {
  font-size: 24px;
  color: green;
  background-color: rebeccapurple;
}

.button:hover {
  background-color: darkmagenta;
}

Let's rewrite the same code into sass syntax:

.button {
  font-size: 24px;
  color: green;
  background-color: rebeccapurple;
  
  &:hover {
    background-color: darkmagenta;
  }
}

The difference is that we use styles for one element inside the first pair of the {} brackets. Also, we don't use the element class name twice. We use the ampersand (&) instead.

Note

In case of any questions or misunderstanding of some sass features, it is highly recommended to use sass documentation.

Compilation

Browsers don't understand the preprocessor syntax. It understands only html, css, and javascript syntax. So, how does it work? We need to compile the sass file into the css file. After compilation, we will see the result.

We have three options to compile sass into css:

Var alt klart?

Hvordan kan vi forbedre det?

Tak for dine kommentarer!

Sektion 7. Kapitel 2

Spørg AI

expand

Spørg AI

ChatGPT

Spørg om hvad som helst eller prøv et af de foreslåede spørgsmål for at starte vores chat

Awesome!

Completion rate improved to 2.04

bookUnderstanding Sass Syntax for Better CSS

Stryg for at vise menuen

To start writing sass code, we need to create a file with the extension .scss. (e.g., feature.scss).

Let's consider the sass syntax on the following css code. We will manipulate the button that will have some hover effect. We write css code for it:

.button {
  font-size: 24px;
  color: green;
  background-color: rebeccapurple;
}

.button:hover {
  background-color: darkmagenta;
}

Let's rewrite the same code into sass syntax:

.button {
  font-size: 24px;
  color: green;
  background-color: rebeccapurple;
  
  &:hover {
    background-color: darkmagenta;
  }
}

The difference is that we use styles for one element inside the first pair of the {} brackets. Also, we don't use the element class name twice. We use the ampersand (&) instead.

Note

In case of any questions or misunderstanding of some sass features, it is highly recommended to use sass documentation.

Compilation

Browsers don't understand the preprocessor syntax. It understands only html, css, and javascript syntax. So, how does it work? We need to compile the sass file into the css file. After compilation, we will see the result.

We have three options to compile sass into css:

Var alt klart?

Hvordan kan vi forbedre det?

Tak for dine kommentarer!

Sektion 7. Kapitel 2
some-alt