scss — очень полезный язык препроцессора css. Вот несколько полезных советов по написанию для вас

Как использовать SCSS более элегантно и эффективно

спецификация вложенности

вложенность селектора

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

/* SCSS */
.sipsd {
    body & {}
}

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

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

вложение свойств

/* 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;
    }

Переменная

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

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

миксин

Модуль функционального определения и где требуется вызов @include, избегая повторного ввода кодирования сегмента кода

// 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 {
    @include radius; //参数使用默认值
}
.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);
}

Место выбора %

Если он не вызывается, лишних css-файлов не будет, селекторы-заполнители определяются с отметками % и вызываются через @extend

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

продлить наследство

// 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;
}

для петли

// 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;
    }
}

Примечание: #{} — это коннектор, и вам нужно полагаться на переменное соединение, чтобы использовать

каждая петля

// 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;
    }
}

функция функция

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

Спецификация операции

оставить пробел между операторами

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

Обратите внимание на единицу операции, единица одновременно участвует в операции, поэтому 10px не равно 10. Особое внимание следует уделить при умножении и делении.

// 正确的运算格式
.sipsd {
    width: 100px - 50px;
    width: 100px + 50px;
    width: 100px * 2;
    width: 100px / 2;
}