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

混合(mixin)

根据功能定义模块，然后在需要使用的地方通过 @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;
}

extend 继承

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

for 循环

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

注意：#{} 是连接符，变量连接使用时需要依赖

each 循环

// 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 函数

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

高级前端工程师如何避免写出屎一样的代码（二）？