Fast dive into Sass

Table of contents

1. Installation and usage
2. Variables
3. Nesting
4. Modules
5. Mixins
6. Placeholer class
7. Operators
8. Other Sass stuff

---

Sass in one of the most popular CSS preprocessors, which reduce code repetition and provide nesting, mixins, variables.

Two syntaxes of Sass preprocessor:

1. Scss (file extension is '.scss') - a superset of CSS - all valid CSS is also valid SCSS. Scss will be used in examples.
2. Sass (file extension is '.sass') has features:
   • Indentation rather than curly braces to nest statements;
   • Newlines instead of semicolons to separate nest statements.

These files are compiled into regular css.

Installation and usage

So, to use sass in just html, we need to compile sass file into css file. Thus, we install sass globally to use it from command line:

npm install -g sass

After installation we can set constant compiler sass->css:

sass --watch input.scss output.css

So we can use output.css in html file.

If you don't need .map files, specify it with flag --no-source-map:

sass --no-source-map --watch input.scss output.css

If there are multiple scss files in sass folder, we can watch all of them and convert to css with the corresponding names:

sass --watch sass:public/style

Our css files now will be in public/style directory.

---

If you are using vite builder, you don't need to install vite-plugins, but the exact sass:

npm install -D sass

Variables

If you are familiar with CSS variables, you know how useful they are. Sass has a different syntax for them - it uses $ to make a variable:

$primary-color: #000;

body {
  background-color: $primary-color;
}

Remember, that the background of the root element becomes the background of the canvas. Since body element is the root-element, its background style is applied to webpage area.

Differences from CSS variables

• Sass variables are compiled, while CSS ones are included in the output file.
• Sass variables treat hyphens and underscores as identical: $pr-color and $pr_color refer to the same variable.
• If we change value of CSS variable it will affect earlier uses and later uses.
• CSS variables are inherited, while in Sass, they are scoped to the block they appear:

//input.scss
$primary-color: #000;

.test {
  $primary-color: #fff;
}

.test a {
  background-color: $primary-color;
}

//output.css
.test a {
  background-color: #000;
}

Nesting

Nesting in Sass resembles html hierarchy:

header {
  nav {

  }

  a {

  }
}

Here we are accessing elements nav and a inside header element.

Modules

Partials

We can create partial Sass file, that will be included in other Sass files.

if a name of Sass file starts with _ it tells Sass to not generate this file into a CSS file.

// _partial.scss
$secondary-color: #fff;

body {
  padding: 20px;
}

@use rule

This rule loads another Sass file as a module:

//input.scss
@use 'partial';

body {
  color: partial.$secondary-color;
}

Here, final body's style will include padding and color.

Mixins

Mixin is a group of CSS declarations, that can be reused in further CSS statements. It corresponds to DRY rule.

@mixin theme {
  background-color: aqua;
  box-shadow: inset 0 0 20px 10px red;
}

div {
  @include theme;
}

mixin arguments

We can also pass arguments to mixin:

@mixin theme($color: aqua, $shadow-color: red) {
  background-color: $color;
  box-shadow: inset 0 0 20px 10px $shadow-color;
}

div {
  @include theme($color: green, $shadow-color: yellow);
}

Placeholer class

Placeholer class - a type of class that can be extended. The difference from mixins is that it doesn't take arguments and has different syntax.It starts with % and needs @extend:

%btn {
  background-color: bisque;
  cursor: pointer;
}

button[type=submit] {
  @extend %btn;
  border: 1px solid green;
}

button[type=reset] {
  @extend %btn;
  border: 1px solid blue;
}

If you don't need arguments, it's better to use placeholder class over mixin since in the resulting css file, placeholders merge shared code: instead of .classA{} .classB{} we get .classA, .classB {}

Operators

Remember CSS calc()? We can also use mathematical operators in scss: +,-,*.

header {
  height: 1rem * 2;
}

However, unlike in CSS calc() we can't use pure /, we need to use sass built-in module sass:math:

@use 'sass:math';

.logo {
  width: math.div(200px, 600px) * 100%;
}

nav {
  width: math.div(400px, 600px) * 100%;
}

Other Sass stuff

• Here is a list of Sass rules. We already know @use, @mixin, @include, @extend, there are also rules for debugging, creating functions etc.
• Here is a list of Sass built-in modules that can be @used. We've already encountered with sass:math among sass modules. If you want to change color based on other or to compound selectors, look at sass modules.

Comments

[Samuel Rouse]

Thanks for the refresher on Sass! One very powerful feature that goes along with nesting is the ampersand & operator. Here's a good CSS Tricks article about the Sass Ampersand!