Common commands of sass

Follow-up will complement...

@mixin

// Declare a mixin module, passing no arguments
@mixin base-border-wrap {
    position: relative;

    &:after {
        display : block;
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 1px;
        background-color: red; }}// Pass with parameter, can set the default value
@mixin card($px: 1px.$color: orange) {
    position: relative;
    
    &:after {
        height: $px;
        color: $color; }}// Use this rule to set modules
.box {
    height: 100px;
    font-size: 18px;
    width: 21px;
    // Introduce mixins in other selectors
    // The sASS code specification must place @include after all attributes of the current selector and before nested selectors
    @include base-border-wrap();
    
    .other {
        @include card(, blue); @include card(, blue);
        @include card(2px, blue);
        // ...}}Copy the code

Circular instruction:

@for

• Writing a:@for $i from <start> through <end>

@for $i from 1 through 3 { 
    .width# {$i} { 
        width: $i * 10px; }}// Generate the following effect:
// .width1 { width: 10px; }
// .width2 { width: 20px; }
// .width3 { width: 30px; }
Copy the code

• Method 2:@for $i from <start> to <end>

@for $i from 1 to 3 { 
    .width# {$i} { 
        width: $i * 10px; }}// Generate the following effect:
// .width1 { width: 10px; }
// .width2 { width: 20px; }
Copy the code

• The difference between the two is thattoCommand does not containendThe end,throughcontains

@while

$num: 12;
@while $num < 18 {    
    .f-# {$num} { ont-size: #{$num}px; }    
    $num: $num + 2;
}
/ / effect:
// .f-12 {  font-size: 12px;}
// .f-14 {  font-size: 14px;}
// .f-16 {  font-size: 16px;}
Copy the code

@each

• Writing:@each $i in <list>

$list: 5 10 15 20 25;
@each $i in $list {    
    .p-# {$i} {padding: # {$i}px; }}/ / effect:
// .p-5 {  padding: 5px;}
// .p-10 {  padding: 10px;}
// .p-15 {  padding: 15px;}
// .p-20 {  padding: 20px;}
// .p-25 {  padding: 25px;}
Copy the code