Sass, or Syntactically Awesome StyleSheets, is an extension of CSS. It adds some new features that are not available in the base CSS. Sass simplifies CSS, which makes it easier to maintain stylesheets in projects.
Sass installation tutorial
npmThe installation
We can install Sass using NPM (introduction to NPM usage).
npm install -g sass
Copy the codeNote: Domestic NPM suggests using Taobao image to install, refer to: NPM domestic slow problem solving
Sass variables store data
Sass differs from CSS in that it allows the use of variables. You can declare variables in Sass and assign values to them, just as you would in JavaScript.
In JavaScript and TypeScript, variables are defined using the let and const keywords. In Sass, variables begin with $, followed by the name of the variable.
Here are a few examples:
$main-fonts: Arial, sans-serif;
$headings-color: green;
Copy the codeAnd use variables:
h1 {
font-family: $main-fonts;
color: $headings-color;
}
Copy the codeVariables are useful when you need to set multiple elements to the same color. Once you need to change the color, just change the value of this variable.
Sass nested CSS
Sass allows for the nesting of CSS rules, which can be useful when organizing style sheets.
In CSS, the style of each element needs to be written in a separate block of code, as shown below:
nav {
background-color: red;
}
nav ul {
list-style: none;
}
nav ul li {
display: inline-block;
}
Copy the codeFor a large project, CSS rules can be complex. In this case, the introduction of nesting (that is, the style of writing child elements in the corresponding parent element) can effectively simplify the code:
nav {
background-color: red;
ul {
list-style: none;
li {
display: inline-block; }}}Copy the codeMixins create reusable CSS
In Sass, a mixin is a set of CSS declarations that can be reused throughout a stylesheet.
The new CSS features need to be adapted for some time before they are fully available in all browsers. As browsers evolve, you may need to add browser prefixes when using these CSS rules. Considering the box – shadow:
div {
-webkit-box-shadow: 0px 0px 4px #fff;
-moz-box-shadow: 0px 0px 4px #fff;
-ms-box-shadow: 0px 0px 4px #fff;
box-shadow: 0px 0px 4px #fff;
}
Copy the codeIt would take a lot of effort to rewrite this rule for all elements with box-shadow attributes, or to change each value to test for different effects. Mixins are like CSS functions. Here’s an example:
@mixin box-shadow($x.$y.$blur.$c){
-webkit-box-shadow: $x $y $blur $c;
-moz-box-shadow: $x $y $blur $c;
-ms-box-shadow: $x $y $blur $c;
box-shadow: $x $y $blur $c;
}
Copy the codeDefinitions begin with @mixin, followed by custom names. The arguments ($x, $y, $blur, and $c in the above example) are optional. Now where box-shadow rules are required, one line of mixin calls is required without adding all the browser prefixes. Mixins can be invoked with the @include directive.
div {
@include box-shadow(0px.0px.4px.#fff);
}
Copy the code@if and @else add logic to the style
The @if directive in Sass is useful for testing specific situations — it works like if statements in JavaScript and TypeScript.
@mixin make-bold($bool) {
@if $bool == true {
font-weight: bold; }}Copy the codeLike JavaScript and TypeScript, Sass can also use @else if and @else to test more conditions:
@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@for creates a Sass loop
You can add styles in Sass using the @for loop, which is used similarly to the for loop in JavaScript.
@for is used in two ways: “start through end” or “start to end”. The main difference is that start-to-end does not include an end number, while start-through does include an end number.
Here is an example of starting through ending:
@for $i from 1 through 12 {
.col-# {$i} { width: 100%/12 * $i; }}Copy the codeThe #{$I} part is the syntax for combining the variable (I) with text into a string. When the Sass file 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@each iterates through the items in the list
The previous challenge showed how the @for instruction loops through the start and end values a certain number of times. Sass also provides the @each directive, which loops through each item in a list or map. At each iteration, variables are assigned to the current value from the list or map.
@each $color in blue, red, green {
.#{$color}-text {color: $color;}
}
Copy the codeMap syntax is slightly different. Here’s an example:
$colors: (color1: blue, color2: red, color3: green);
@each $key.$color in $colors# {{.$color}-text {color: $color;}
}
Copy the codeNote that the $key variable is needed 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 codeThe @while loop creates the style
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.
Example of a simple grid system created using @for.
@for $i from 1 through 12 {
.col-# {$i} { width: 100%/12 * $i; }}Copy the codeYou can also do this with @while.
$x: 1;
@while $x < 13 {
.col-# {$x} { width: 100%/12 * $x; }$x: $x + 1;
}
Copy the codeFirst, define the variable $x and set it to 1. Next, use the @while directive to create the grid system while $x is less than 13. After setting width’s CSS rules, $x is incremented by 1 to avoid an infinite loop.
Partials divide styles into small pieces
Partials in Sass are separate files containing CSS code segments. These fragments can be imported into other Sass files for use. You can put similar code into modules to keep your code structured and manageable.
The name of the partials begins with an underscore (_) character so that Sass knows that it is a small part of CSS and does not convert it to A CSS file. In addition, Sass files end with the.scss file extension. To put partial code into another Sass file, use the @import directive.
For example, if all mixins are saved in a partial named _mixins.scss and you need them in the main.scss file, here’s how to use them:
@import 'mixins'
Copy the codeNote that you don’t need an underscore in the import statement — Sass knows it’s partial. Once you import partial, you can use all variables, mixins, and other code.
Extend one 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.panel class style. It has background-color, height and border.
.panel{
background-color: red;
height: 70px;
border: 2px solid green;
}
Copy the codeNow you need another panel named.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 when you add more types of panels. The extend directive is an easy way to reuse rules written for one element and add more rules for another:
.big-panel{
@extend .panel;
width: 150px;
font-size: 2em;
}
Copy the codeIn addition to the new style,.big-panel will have the same properties as.panel.