What is Sass?

Head over to Sass Chinese to learn more.

Sass, which stands for Syntactically Awesome StyleSheets, is an extension of CSS. It adds some new features that CSS syntax does not. Sass makes it easier for developers to maintain style sheets.

Sass is fully CSS compatible because it is a preprocessor. It writes code in Sass syntax and converts it to standard CSS. It allows you to use variables, nested rules, imports, and much more. Helps keep large stylesheets well deconstructed and makes the CSS language more powerful and elegant.

Sass has two syntax types. The first is called SCSS (Sassy CSS) and is an expanded version of the CSS syntax. That is, CSS stylesheets are also legal SCSS files. The stylesheet file for this syntax has a.scss extension.

The second, older syntax, known as the indentation syntax (or just “Sass”), does not use curly braces, but instead uses indentation to express the nested hierarchy of selectors, and does not use semicolons, but instead uses line breaks to separate properties. The stylesheet file for this syntax needs a.sass extension.

Variables in Sass

You can declare variables, which can be handy when you need to set multiple elements to the same color.

Variables start with $followed by the variable name:

$heading-color: # 333;
$main-fonts: Arial, sans-serif;
Copy the code

Use variables:

h1 {
  font-family: $main-fonts;
  color: $headings-color;
}
Copy the code

Nested authoring makes deconstruction clearer

Sass allows the nesting of CSS rules, such as:

.container {
  background-color: #81d5e3;
  border: 1px solid #0c5460;
  
  h1 {
    font: 14px Arial;
    color: #1d2124;
    
    span {
      color: #0f6674; }}}Copy the code

Mixins create reusable CSS

Mixins are a set of CSS declarations that can be reused throughout the stylesheet.

For example, when defining certain styles, we need to use a vendor prefix, but it becomes cumbersome to write a vendor prefix every time, and it is not easy to change.

Mixins are like CSS functions:

/ * * / defined
@mixin box-shadow($x, $y, $blur, $c){
  -webkit-box-shadow: $x, $y, $blur, $c;
  -moz-box-shadow: $x, $y, $blur, $c;
  -o-box-shadow: $x, $y, $blur, $c;
  box-shadow: $x, $y, $blur, $c;
}
/ * * / use
div {
  @include box-shadow(0.0.4px, #ffffff);
}
Copy the code

Definitions start with @mixin, followed by custom names, and () is the parameter. Call the mixin defined above with @include.

@ the if and the @ the else

@if and @else are similar to if and else in JavaScript, we can add more conditions to Sass:

@mixin text-effect($val) {
  @if $val == danger {
    color: red;
  }
  @else if $val == alert {
    color: yellow;
  }
  @else if $val == success {
    color: green;
  }
  @else {
    color: black; }}Copy the code

Loops in Sass? – @for

Similar to the for loop in JavaScript, the @for directive in Sass can repeat the output format within a limited range, changing the output each time as required (the value of the variable).

This directive has two formats:

  1. @for $var from <start> through <end>When usingthrough, the condition range contains<start> 与 <end>The value of the.
  2. @for $var from <start> to <end>, while the use oftoThe condition range contains only<start>Does not contain the value of<end>The value of the.

In addition, $var can be any variable, such as $I;

and

must be integer values.

@for $i from 1 through 12 {
  .col-# {$i} { width: 100%/12* $i; }}Copy the code

When the above example is converted to CSS, it looks like this:

.col-1 {
  width: 8.33333%;
}

.col-2 {
  width: 16.66667%; }....col-12 {
  width: 100%;
}
Copy the code

This is an effective way to create a grid layout.

@each iterates through the items in the list

The format of the @each directive is $var in . $var can be any variable name, such as $length or $name, and is a list of values.

@each applies the variable $var to each item in the list of values, or to each item in the map, and prints the result, for example:

@each $color in blue, red, green {
  .#{$color}-text {color: $color;}
}
Copy the code

Map syntax is slightly different, here is an example:

$colors: (color1: blue, color2: red, color3: green);

@each $key, $color in $colors {
  .#{$color}-text {color: $color;}
}
Copy the code

Note that the $key variable is required to reference the key in the map. Otherwise, the compiled CSS will contain color1, color2……

Both code examples above convert to the following CSS:

.blue-text {
  color: blue;
}

.red-text {
  color: red;
}

.green-text {
  color: green;
}
Copy the code

Use @while when the condition is met

The @while directive in Sass is similar to the while directive in JavaScript. It keeps creating CSS code as long as the conditions are met.

The @for challenge provides an example of creating a simple grid system. This also applies to @while.

$x: 1;
@while $x< 13 {
  .col-#{$x} { width: 100%/12* $x; } $x: $x +1;
}
Copy the code

The @while directive repeats the output format until the expression returns false. This allows for a more complex loop than @for, but is rarely used. Such as:

$i: 6;
@while $i > 0 {
  .item-# {$i} { width: 2em * $i; }
  $i: $i - 2;
}
Copy the code

Convert to CSS:

.item-6 {
  width: 12em;
}

.item-4 {
  width: 8em;
}

.item-2 {
  width: 4em;
}
Copy the code

Partials divide patterns into small pieces

If you need to import SCSS or Sass files but do not want to compile them as CSS, you simply add an underscore to the file name. This will tell Sass not to compile these files, but you do not need to add an underscore to the import statement.

For example, naming the file _colors.scss will not compile the _colours.css file.

Use the @import directive to import:

@import "colors";
Copy the code

In the above example, the file imported is actually _colors.scss.

Note that underlined and ununderlined files of the same name cannot exist at the same time. Underlined files will be ignored.

Extend extends a set of CSS styles to another element

Sass has a feature called extend that makes it easy to borrow CSS rules from one element and reuse them on another.

For example, the following CSS rule block sets the.panelClass style. It has background-color, height and border.

.panel{
  background-color: red;
  height: 70px;
  border: 2px solid green;
}
Copy the code

Now you need another panel called.big-panel. It has the same basic properties as.panel, but also requires width and font size.

You can copy and paste the original CSS rules from.panel, but the code becomes repetitive as you add more types of panels.

The extend directive is an easy way to reuse rules written for one element and then add more to another:

.big-panel{
  @extend .panel;
  width: 150px;
  font-size: 2em;
}
Copy the code

In addition to the new style,.big-panel will have the same properties as.panel.