SASS

VonRickroll
177 views

Open Source Your Knowledge, Become a Contributor

Technology knowledge has to be shared and made accessible for free. Join the movement.

Create Content

SASS is life

Welcome to this introduction to SASS, where you will learn to love CSS again. SASS (for Synthetically Awesome Stylesheets) is a CSS preprocessor that allows you to do really cool stuff, but for this lesson, we are going to limit ourselves with three main concepts, variables, nestings, and mixins.

Variables

CSS does implement variables now, although they aren't supported by all modern browsers. Which means when you want to reuse the same value several times, it's kind of a hassle when your designers comes in and says "hey, here's the new code for that colour, I felt like changing it out of the blue" (blue, hehe).

Now you can define a variable in SASS with $name: value;. value can be basically any CSS value, such as pixels, numbers, percentage, colours...

Go ahead and try it!

Assignment: can you make the height of the two first paragraphs equal to 50px, using a variable?

Variables
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// Define variables
$myColor: #081b68;
$space: 10px;
.wrap p {
padding: $space;
margin: $space * 2;
}
.p-border {
border: dotted 3px $myColor;
}
.p-background {
background: rgba($myColor, 0.3);
}
.p-color {
color: $myColor;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Nesting

When you work on several components, you sometimes have style clashes if you don't encapsulate your styles. Setting CSS properties for h1 on one component might interfere with other h1 tags on other components.

SASS allows you to fix that simply by writing classes inside of other classes, making it easier to read.

Nesting
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
p {
padding: 10px;
margin: 10px;
}
.wrap-first {
p { // This target paragraphs that are inside .wrap-first
background: #F66;
}
}
.wrap-second {
p { // This target paragraphs that are inside .wrap-second
background: #66F;
}
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Mixins

See mixins as functions. They can take one or several variables as parameter, and apply style that depends on those variables on the components that require the mixin. Which means you could create compatibility mixins like this:

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}

Or use a mixin to set several properties at once when you intend to reuse code several times with different parameters. To include a mixin, use @include mixin-name(parameter);

Try it out!

Mixins
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
// First define the mixin
@mixin colorize-paragraph($color) {
border: dotted 3px $color;
background: rgba($color, 0.3);
}
p {
padding: 10px;
margin: 10px;
}
// Use the mixin with multiple parameters
.p-1 {
@include colorize-paragraph(red);
}
.p-2 {
@include colorize-paragraph(#1faf35);
}
.p-3 {
@include colorize-paragraph(blue);
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

That's it! you can learn more about SASS on the official SASS website

Sources for this CodinGame project (including SASS sources) are here on GitHub

Open Source Your Knowledge: become a Contributor and help others learn. Create New Content