What is the

Sass is an extension language of CSS. For CSS.

Addressing CSS disadvantages:

The selector is very long and can be missed – the selection is not accurate and the order can be confused – the weight can not be distinguished by the selection

Sass is designed to solve this problem. You can even write CSS like a programming language. You can write judgments, you can write loops, you can write functions, import syntax, inherit syntax……

You can do this with any CSS extension language: sass less stylus……

How to use

Sass provides two suffixes for files:

  • .sass suffix: Files with this suffix, written without braces, that describe nested relationships by indentation. Too dangerous, accidentally indent error.
  • SCSS suffix: Files with this suffix are written much like CSS.

Sass files are not directly recognized by browsers, so we need to convert them to CSS to use them. Nodejs has a tool that can directly compile SASS files into CSS files. The tool name is sass

Download and install:

npm i sass -g
Copy the code

Installed tests:

sass --version
Copy the code

Specific use:

Sass File to be compiled CSS file path after being compiled sass test.scss./test.cssCopy the code

To facilitate development, sass provides a command to monitor:

Sass --watch test.scss:./test.css sass --watch test.scss:Copy the code

For further convenience, sass provides a command to monitor folder changes:

Sass --watch Folder where compiled files are stored: folder where compiled files are stored sass --watch SCSS :./ CSSCopy the code

How to write

annotation

// Single-line comments - will not compile
​
/* Multi-line comments Multi-line comments are not preserved when a file is compressed */
​
​
/ *! This is a mandatory */ for comments
Copy the code

variable

$Variable name: value;

// Define a variable:
/* $variable name: value; * /
​
$color:grey; // Values do not need to be quoted
Copy the code

Commonly used colors: primary/other colors 2. Common size: 1px, 3px

nested

Nesting of selectors

/* 1. Selector nesting */
div{
​
    p{
        color:red;
    }
​
    >p{
        width: 100px;
    }
​
    +div{
        height: 200px;
    }
​
    a:hover{
        color:blue;
    }
    // & indicates the selector to which the brace belongs
    &:hover{
        color:green; }}Copy the code

Nesting of CSS properties:

div{
    // border:3px solid #000;
    // border-left:3px solid #000;
    // border-left-width:3px;
    // border-left-style:solid;
    // border-left-color:#000;
​
    // border-right:3px solid #000;
    // border-top:3px solid #000;
    // border-bottom:3px solid #000;
​
​
    border: {
        left: {
            width:3px; style:dotted; }}/* Nested CSS attributes: hyphenated attributes can be nested border background margin padding FONT text line list */
}
Copy the code

Function (mixer)

Functions are called mixers in SASS and are represented by mixins

// In SASS, functions are called mixers
/ / define
/* @mixin function name {function code} */
​
@mixin bor {
    border:1px solid # 000;
    background-color: #f00;
}
​
/* Define a function with arguments @mixin function name (parameter){function code} */
​
@mixin bac ($color.$path) {
    background: $color url($path);
}
​
​
@mixin border($width.$color.$style:solid){
    border:$color $style $width;
}   
​
/ / call
/* @include function name; * /
​
div{
    @include bor;
}
​
p{
    @include bac(red,"1.jpg");
    @include border(3px,green,dashed);
}
Copy the code

inheritance

If one selector wants to use CSS from another selector, it is called inheritance inheritance syntax: @extend inherited selector;

// div{
// width: 100px;
// height: 100px;
// background-color: #f00;
// }
​
// p{
// // want to use the style of div *- inherit div
// // Inheritance syntax
/ / / *
// @extend inherited selector;
/ / * /
​
// @extend div;
// color:Red;
// }
​
// Extract common styles_ {width: 100px;
    height: 100px;
}
​
.a{
    @extend _;
    background-color: #f00;
}
​
.b{
    @extend _;
    color:Red;
}
Copy the code

The import

Import syntax @import “file path “;

​
@import "./variable.scss";
@import "./mixin.scss";
​
div{
    // $color is defined in a different file, so you need to use it here. You need to import another file
    background-color: $color;
    @include border(3px,red);
    @include bor;
}
Copy the code

judge

$red:red;
$blue:blue;
$width:1px;
div{
    // if 1==1, use $red. So if I =1, I'm going to use $blue

    @if $width= =1px{
        background-color: $red;
    }@else{
        background-color: $blue; }}Copy the code

cycle

$width:10px;

@for $i from 1 through 5{
    // Identify the variable #{variable}
    li:nth-child(#{$i}){
        width:$width*$i; }}// Using to does not contain the maximum value
@for $i from 1 to 5{
    // Identify the variable #{variable}
    div:nth-child(#{$i}){
        width:$width*$i; }}Copy the code

Compiled CSS

li:nth-child(1) {
  width: 10px;
}

li:nth-child(2) {
  width: 20px;
}

li:nth-child(3) {
  width: 30px;
}

li:nth-child(4) {
  width: 40px;
}

li:nth-child(5) {
  width: 50px;
}

div:nth-child(1) {
  width: 10px;
}

div:nth-child(2) {
  width: 20px;
}

div:nth-child(3) {
  width: 30px;
}

div:nth-child(4) {
  width: 40px;
}
Copy the code

So much for the basics!