This is the 15th day of my participation in the August More Text Challenge

The mixer transmits parameters

  • Since we said that the mixer acts like a function, it must be possible to pass parameters like a function

  • In the same way that “functions” are used, they are “parameters” when timed and “arguments” when called

    @mixin my_transition($pro, $dur, $delay, $Tim) {-webkit-transition: $pro $dur $delay $Tim; -moz-transition: $pro $dur $delay $tim; -ms-transition: $pro $dur $delay $tim; -o-transition: $pro $dur $delay $tim; transition: $pro $dur $delay $tim; }Copy the code

  • Pass “arguments” when using this mixer

    div {
    width: 100px;
    height: 100px;

    @include my_transition(all, 1s, 0s, linear);
}
Copy the code

  • Compile the results

    div {
    width: 100px;
    height: 100px;
    -webkit-transition: all 1s 0s linear;
    -moz-transition: all 1s 0s linear;
    -ms-transition: all 1s 0s linear;
    -o-transition: all 1s 0s linear;
    transition: all 1s 0s linear;
}
Copy the code

  • How many parameters are written? How many arguments are passed when called?

  • Otherwise you’ll get an error

Parameter Default Value

  • When we define the mixer, we can also write some default values for some parameters

  • In this way, you can pass no arguments

    // Set some parameters with default values @mixin my_transition($dur: 1s, $pro: all, $delay: 0s, $Tim: linear) {-webkit-transition: $dur $pro $delay $tim; -moz-transition: $dur $pro $delay $tim; -ms-transition: $dur $pro $delay $tim; -o-transition: $dur $pro $delay $tim; transition: $dur $pro $delay $tim; }Copy the code

  • Use the default value if you do not pass it

    div { width: 100px; height: 100px; // Use the default @include my_transition(2s); }Copy the code

  • Compile the results

    div {
    width: 100px;
    height: 100px;
    -webkit-transition: 2s all 0s linear;
    -moz-transition: 2s all 0s linear;
    -ms-transition: 2s all 0s linear;
    -o-transition: 2s all 0s linear;
    transition: 2s all 0s linear;
}
Copy the code

inheritance

  • Using inheritance in SASS can greatly improve development efficiency

  • In fact, inheritance is very simple, is written before the contents of the selector directly take over a copy

    div {
    width: 100px;
    height: 100px;
    background-color: pink;
}
Copy the code

  • This is a regular style sheet that I wrote earlier

  • Now I’m going to write another style, and I find that I’m going to write some of the same stuff as the previous div, and some of my own stuff

  • Then I can inherit the stylesheet and write my own content

    p {
      @extend div;

      font-size: 20px;
      color: red;
}
Copy the code

  • Compile the results

    div, p {
    width: 100px;
    height: 100px;
    background-color: pink;
}

p {
    font-size: 20px;
    color: red;
}
Copy the code

annotation

  • There are several types of comments in SCSS files

    1. Comments that are not compiled at compile time

      // I am a normal comment, I am filtered at compile timeCopy the code

    2. Comments that are compiled at compile time

      /* When I compile, it will be compiled together */Copy the code

    3. Powerful annotation

      / *! I am a powerful comment that will not only be compiled in the past, but will also be present in the future when the file is compressedCopy the code

The import file

  • We just learned about defining variables, defining mixers

  • These two contents will not be compiled if they are not used after being defined

  • So we can write variables in a separate file, blender in a separate file, and then directly import after use

    // I am variable. SCSS $w: 100px; $h: 200px; $c: pink; // I am mixin.scs@mixin my_transition($dur: 1s, $pro: all, $delay: 0s, $Tim: linear) {-webkit-transition: $dur $pro $delay $tim; -moz-transition: $dur $pro $delay $tim; -ms-transition: $dur $pro $delay $tim; -o-transition: $dur $pro $delay $tim; transition: $dur $pro $delay $tim; } @mixin radius { -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; border-radius: 10px; }Copy the code

  • Then import these two files into our main file

    // I am index. SCSS @import './variable. SCSS '; @import './mixin.scss'; div { width: $w; height: $h; background-color: $c; @include radius; } h1 { @include my_transition; }Copy the code

  • Compile the results

    div {
    width: 100px;
    height: 200px;
    background-color: pink;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;
}

h1 {
    -webkit-transition: 1s all 0s linear;
    -moz-transition: 1s all 0s linear;
    -ms-transition: 1s all 0s linear;
    -o-transition: 1s all 0s linear;
    transition: 1s all 0s linear;
}
Copy the code