Project development — use node.js SASS syntax

August 22, 2021By Simo NodeJs

Foreword: All sass files in this article refer to files with the suffix scss. It is also recommended to use files with the suffix name scss to avoid the strict format requirements of the sass suffix name.

1. Installation of sass plug-in:

gulp-sass-china

// 1. Install the plug-in
        npm install gulp-sass-china

// 2. Introduce the plug-in module
        let sass = require("gulp-sass-china");

// 3.Define instructions
        gulp.task("sass",()=>{
            return gulp.src("sass/*.scss")
                       .pipe(sass().on("error",sass.logError))
                       .pipe(gulp.dest("css"))
                       .pipe(connect.reload());
        })
    
// 4. Monitor file changes
        gulp.task("watch",()=>{
            gulp.watch("sass/*.scss",["sass"])
        })

    // gulp-sass-china document reference:
    // https://www.npmjs.com/package/gulp-sass-china

II. Introduction to sass

(1) sass is an efficient CSS compilation mode. At present, there are two efficient CSS compilation methods: sass/less.

(2) Sass is based on the ruby language, and is characterized by no braces, and line breaks need to be indented, which is very uncomfortable.

(3) Later sass developed two suffix files: one suffix named sass, without braces and semicolons.

(4) The other is the scss file we use here, which is similar to the CSS file format we usually write, using braces and semicolons.

(5) All sass files refer to files with the suffix name scss. It is also recommended to use files with the suffix name scss to avoid the strict format requirements of the sass suffix name.

(6) sass needs to be compiled, and sass cannot be used directly on the page. It can greatly improve programming efficiency (for those who are skilled in it).

(7) If sass wants to be used in the project, it needs to be compiled into a css file. Here, use the gulp plugin to compile (gulp-sass-china).

Three, sass syntax

(1) Variables:

// Must start with $ and add! Default means that this is the default value of the current variable.
    $font-size:16px;
    div{
        font-size: $font-size;
    }

　
(2) Use of complex variables:

　　nth() method, the first parameter is complex variable, and the second parameter is complex variable The first value, counting from 1, generally we use variables as attribute values, but there are also very special cases where we will use variables as classes in the class. At this time, we must use the variable in the way of #($name);

 $linkColor:#b6b6b6 # ddd!default;
    div{
        color: nth($linkColor,1);
        &:hover{
            color:nth($linkColor,2);
        }
    }
    $name:top !default;
    .class-#{$name}{
        border-#{name}:1px solid #b6b6b6;
    }

(3) Multi-value variables: map and list (complex variables):

// Multi-valued variables represent the storage of multi-dimensional data, in other words, list is equivalent to the array map in js is equivalent to the object in js.
// List data is generally separated by spaces, but you can also use commas or parentheses to separate multiple values.

    list:
        $list:(20px 40px)(30px 20px)(40px 30px);//equivalent to a multi-dimensional array, other formats are the same;
        $list:20px 30px 40px 50px 60px;
        $list:20px,30px,40px,50px,60px;

        // Use: For the use of list, you can use nth($list,num) to call;
        // Of course we can also use other methods;
            length($list) //Returns the length of the list
            nth($list, $n) //Returns the indexed item
            set-nth($list, $n, $value) //Set the value of the nth in the list
            join($list1, $list2, [$separator]) //Link two lists together
            append($list1, $val, [$separator]) //Append a value to the end of the list
            zip($lists...) //Combine several lists into a multi-dimensional list
            index($list, $value) //returns the position of the value in a list

        $list:(top 20px 30px) (left 40px 50px) (right 60px 70px);
        @each $name,$width,$height in $list{
            .box-#{$name}{
                width:$width;
                height:$height;
            }
        }

    map:
        // The data of the map appears in the form of key-value pairs, and the mid-term value can be a list. The format is
            $map:(key1:value1, key2:value2, key3:value3).
        // The most commonly used method of obtaining values is to use map-get($map,$key) to obtain values

        // There are many more functions about map:
            map-get($map, $key) //Return the key value;
            map-merge($map1, $map2) //Merge two $maps;
            map-remove($map, $keys…) //Delete a value and return the value;
            map-keys($map) //Return all keys of $map in list form;
            map-values($map) //Return all the values in $map as a list;
            map-has-key($map, $key) //Check whether the current $map has this key
            keywords($args) //Return a keyword

        $headers:(h1:20px,h2:30px,h3:40px);
        @each $key, $value in $headers{
            #{$key}{
                font-size: $value;
            }
        }
        // The usage of each here is basically the same as the usage of for-in in our js, but the writing is different.
        // $key is equivalent to the variable in for-in, and $value is equivalent to obj[i] in for-in;

(4) Nesting

 // sass can be a selector Nested, indicating the level of off
    // Selector nesting:
    ul{
        li{
            list-style: none;
            color:nth($linkColor,1);
        }
    }
    // Attribute nesting:
    .class{
        border:{
            style:solid;
            left:none;
            right:1px;
            color:#b6b6b6;
        }
    }

(5) @at-root (not recommended):

//Exit the current selector nesting.
.class{
        color:f10;
        .child{
            width:100px;
        }
    }
    .class2{
        @at-root .child{
            color:#b6b6b6;
        }
    }
@at-root (without: ...) and @at-root (with: ...)
    // By default @at-root will only jump out of selector nesting, but not out of @media or @support
    // If you want to jump out of these two, you need to use @at-root (without: media), @at-root (without: support).
    // There are four keywords in this grammar:
    // all (means all)
    // rule (represents regular css)
    // media (for media)
    // support (represents support, because @support is not yet widely used, so ignore it).
    // Our default @at-root is actually @at-root (without:rule).
    @media screen and (max-width:641px){
        .parent{
            color:#b6b6b6;
            @at-root .child{
                width:100px;
            }
        }
    }
// Here .child will only jump out of the .parent and .parent classes as the same level,
// instead of jumping out of @media So how do we make him jump out of @media?
    @media screen and (max-width:641px){
        .parent{
            color:#b6b6b6;
            @at-root (without:media) {
                .child{
                    width:100px;
                }
            }
        }
    }
    // This compilation mode will compile our css into
    @media screen and (max-width: 641px) {
        .parent {
            color: #b6b6b6;
        }
    }
    .parent .child {
        width: 100px;
    }
    // That is to say, at this time our .child jumps out of the media nest with his parent.
    @media screen and (max-width:641px){
        .parent{
            color:#b6b6b6;
            @at-root (without:all) {
                .child{
                    width:100px;
                }
            }
        }
    }
    // There is a slight difference from the execution result just now, and it becomes like this;
    @media screen and (max-width: 641px) {
        .parent {
            color: #b6b6b6;
        }
    }
    .child {
        width: 100px;
    }
    // Note: This time the jump out is without parent.
    // Tips: @at-root actually has a lot of combinations, and with & can change the subordination of css;
    .parent{
        @at-root .child &{
            color:#b6b6b6;
        }
    }

(6)@mixin:

// mixin
// Use @mixin to declare mixing in sass, you can pass parameters, the parameter name starts with the $ sign, and multiple parameters are separated by commas.
// You can also set default values for parameters. The declared @mixin is called through @include. In sass, mixin can be used to define some code snippets,
// And parameters can be passed to facilitate future calls according to needs. From then on, it is easy and convenient to deal with the prefix compatibility of css3.
// no parameter mixin
    @mixin marginCenter{
        margin-left:auto;
        margin-right:auto;
    }
    .cont{
        @include marginCenter;
    }
// parameter mixin
// 1) Applications that must pass parameters
    @mixin transform($type){
        -webkit-transform: $type;
        -moz-transform: $type;
        -ms-transform: $type;
        -o-transform: $type;
        transform: $type;
    }
    .box{
        @include transform(scale(1.2))
    }
    // 2) Set the default mixin (when you use it directly without passing in parameters, the default value will be called)
    @mixin opacity($opacity:50){
        opacity: $opacity/100;
        filter:alpha(opacity=$opacity)
    }
    .box{
        @include opacity()
    }
// multiple parameters mixin
// The value can be directly passed in when calling, such as the number of parameters passed by @include is less than the number of parameters defined by @mixin,
//, It is expressed in order, and the default value is used for the insufficiency later, and an error is reported if there is no default value for the insufficiency.
// In addition, you can also optionally pass in parameters, using the parameter name and value to pass in at the same time.
    @mixin line($border:1px border #ccc, $padding:10px){
        border-bottom:$border;
        padding-top:$padding;
        padding-bottom:$padding;
    }
    .list ul{
        @include line(1px solid #ccc);
    }
    .list p{
        @include line($padding:15px);
    }
// Multi-value parameter mixin
// A parameter can have multiple sets of values, such as box-shadow, transition, etc.,
// Then you need to add three dots after the parameter, such as $shadow...
    @mixin box-shadow($shadow...) {
        -webkit-box-shadow:$shadow;
        box-shadow:$shadow;
    }
    .box{
        border:1px solid #ccc;
        @include box-shadow(0 2px 2px rgba(0,0,0,.3),0 3px 3px rgba(0,0,0,.3),
0 4px 4px rgba(0,0,0,.3));
    }
// 　Extension/Inheritance　
// sass can use @extend to realize the code combination declaration, which makes the code more superior and concise.
    .active{
        border:1px solid #b6b6b6;
        padding:10px;
        color: #333;
    }
    .success{
        @extend .active;
        width:100px;
    }

(7) Calculation:

// sass can perform simple Addition, subtraction, multiplication, division, etc. When we get a design draft that needs to be converted into a percentage or rem layout, then we are blessed
    .container{
        width: 100%;
    }
    //percentage
    .aside{
        width:(600px/960px)*100%;
    }
    //rem
    .article{
        width:(300px/960px)*1rem;
    }

(8) Functions:

// sass defines many functions Available for use, of course you can also define your own functions, starting with @fuction.
// In actual projects, we should use the most color function, and in the color function, lighten lighten and darken darken are the most.
// The calling methods are lighten($color,$amount) and darken($color,$amount),
// Their first parameter is the color value, and the second parameter is the percentage.
    $baseFontSize:10px;
    $gray:#ccc;
    @function pxToRem($px){
        @return ($px/$baseFontSize)*1rem;
    }
    body{
        font-size:$baseFontSize;
        color:lighten($gray,10%);
    }
    .test{
        font-size:pxToRem(16px);
        color:darken($gray,10%);
    }
    // This is very similar to the function in our JS, and can be used the same as the function in our JS.
    // At the same time, note that the return value here is almost necessary, so please use @return to return the required return value at the end of each function.

// 1. Install the plug-in
        npm install gulp-sass-china

// 2. Introduce the plug-in module
        let sass = require("gulp-sass-china");

// 3.Define instructions
        gulp.task("sass",()=>{
            return gulp.src("sass/*.scss")
                       .pipe(sass().on("error",sass.logError))
                       .pipe(gulp.dest("css"))
                       .pipe(connect.reload());
        })
    
// 4. Monitor file changes
        gulp.task("watch",()=>{
            gulp.watch("sass/*.scss",["sass"])
        })

    // gulp-sass-china document reference:
    // https://www.npmjs.com/package/gulp-sass-china

(1) Sass is an efficient CSS compilation mode. At present, there are two efficient CSS compilation methods: sass/less.

(2) sass is based on the ruby language, and is characterized by no braces, and line breaks need to be indented, which is very uncomfortable.