SCSS is a very easy to use CSS preprocessor language today to share some efficient practical writing skills

How to use SCSS more elegantly and efficiently

Nested specification

Selector nesting

/* CSS */
.sipsd {}
body .sipsd {}

/* SCSS */
.sipsd {
    body& {}}Copy the code

/* CSS */
.sipsd {}
.sipsd-cover {}
.sipsd-info {}
.sipsd-info-name {}

/* SCSS */
.sipsd {
    &-cover {}
    &-info {
        &-name {}
    }
}
Copy the code

Attributes are nested

/* CSS */
.sipsd {
    background-color: red;
    background-repeat: no-repeat;
    background-image: url(/img/icon.png);
    background-position: 0 0;
}

/* SCSS */
.sipsd {
    background: {
        color: red;
        repeat: no-repeat;
        image: url(/img/icon.png);
        position: 0 0;
    }
Copy the code

variable

// CSS
.sipsd {
    color: red;
    border-color: red;
}

// SCSS
$color: red;
.sipsd {
    color: $color;
    border-color: $color;
}

Copy the code

Mix (a mixin)

Define modules according to their functions, and then call @include where they are needed to avoid retyping code segments when coding

// CSS
.sipsd-1 {
    -webkit-border-radius: 5px;
    border-radius: 5px;
}
.sipsd-2 {
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

// SCSS
@mixin radius($radius:5px) {
    -webkit-border-radius: $radius;
    border-radius: $radius;
}
.sipsd-1 {
    @includeradius; // Use default values}.sipsd-2 {
    @include radius(10px);
}



// CSS
.sipsd-1 {
    background: url(/img/icon.png) no-repeat -10px 0;
}
.sipsd-2 {
    background: url(/img/icon.png) no-repeat -20px 0;
}

// SCSS
@mixin icon($x:0, $y:0) {
    background: url(/img/icon.png) no-repeat $x, $y;
}
.sipsd-1 {
    @include icon(-10px.0);
}
.sipsd-2 {
    @include icon(-20px.0);
}


Copy the code

Placeholder selector %

There are no redundant CSS files if not called. The placeholder selector is defined with the % identifier and is called via @extend

//scss
%borderbox {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.sipsd {
    @extend %borderbox;
}
Copy the code

The extend inheritance

// CSS
.sipsd-1 {
    font-size: 12px;
    color: red;
}
.sipsd-2 {
    font-size: 12px;
    color: red;
    font-weight: bold;
}

// SCSS
.sipsd-1 {
    font-size: 12px;
    color: red;
}
.sipsd-2 {
    @extend .sipsd-1;
    font-weight: bold;
}

// 或者
%font-red {
    font-size: 12px;
    color: red;
}
.sipsd-1 {
    @extend %font_red;
}
.sipsd-2 {
    @extend %font_red;
    font-weight: bold;
}
Copy the code

The for loop

// CSS
.sipsd-1 {background-position: 0 -20px; }.sipsd-2 {background-position: 0 -40px; }.sipsd-3 {background-position: 0 -60px; } // SCSS@for $i from 1 through 3 {
    .sipsd-# {$i} {
        background-position: 0 (-20px) * $i; }}Copy the code

Note: #{} is a concatenation, and variable concatenation is used with dependencies

Each loop

// CSS
.sipsd--list {
    background-image: url(/img/sipsd-list.png);
}
.sipsd-detail {
    background-image: url(/img/sipsd-detail.png);
}

// SCSS
@each $name in list, detail {
    .sipsd-#{$name} {
        background-image: url(/img/sipsd-#{$name}.png);
    }
}


// CSS
.sipsd-list {
    background-image: url(/img/sipsd-list.png);
    background-color: red;
}
.sipsd-detail {
    background-image: url(/img/sipsd-detail.png);
    background-color: blue;
}

// SCSS
@each $name, $color in (list, red), (detail, blue) {
    .sipsd-#{$name} {
        background-image: url(/img/sipsd-#{$name}.png);
        background-color: $color; }}Copy the code

The function function

@function pxToRem($px) {
    @return $px / 10px * 1rem;
}
.sipsd {
    font-size: pxToRem(12px);
}

Copy the code

Operation specification

A space is left between the operators

.sipsd {
    width: 100px - 50px;
    height: 30px / 5;
}

Copy the code

Notice that units are involved, so 10px is not equal to 10, so you have to be careful when you multiply and divide

// Correct operation format.sipsd {
    width: 100px - 50px;
    width: 100px + 50px;
    width: 100px * 2;
    width: 100px / 2;
}
Copy the code