持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第19天，点击查看活动详情

sass是一种“css预处理器”，可以书写嵌套缩进的css代码，还可以进行简单的计算，还提供了循环的方式，还可以使用mixin，简化代码。样式文件的导入导出也很方便。

变量

sass允许使用变量，以$开头。变量的命名要清晰。

$main-color: '#FB8337',
p {
    color: $main-color;
}

这样的命名就是不好的,含糊不清，好的命名应该让人一眼看到，就知道它的作用。

$color: '#FB8337',

变量需要嵌套在字符串中，需要写在#{}中，这样就很方便了

$row: top;
.rounded {
    border-#{$row}: 1px solid #000;
}

计算

sass提供了简单的计算功能，可以在样式中直接进行计算。

p {
    margin: (16px/2);
    top: 50px + 50px;
}

不能使用过度的嵌套，这样会让代码变得复杂，后面需要用！important来覆盖。

嵌套规则

div {
    span {
      color: blue;
    }
}

class2想要使用class1的样式，又有自己独特的样式

.tag {
    width: 40px;
    height: 40px;
}
.main-tag {
    @extend .tag;
    color: '#FB8337';
}

@if用来做条件判断

p{
    @if 5<3{
        border: 1px solid #ccc;
    }
    @else {
        border: 1px solid #ddd;
    }
}

循环语句

@for $i from 1 to 100 {
　.border-#{$i} {
　　　border: #{$i}px solid blue;
　}
}

可以重用的代码块 @mixin

@mixin d-fx {
   display: flex;
   justify-content: space-between;
}

使用mixin，用@include命令

div {
    @include d-fx;
}

但是mixin的使用应该减少，因为通过@include引入和复制粘贴没有什么区别，使用mixin会让代码变得冗余，重复。只适用于需要通过传递参数快速创建的情景。

举个栗子

@mixin d-fx($value: space-between) {
   display: flex;
   justify-content: $value;
}

使用的时候，可以传值，也可以不传

div {
    @include d-fx(space-around)
}

这样使用，就超级方便了，代码简洁高效。推荐使用。

使用@import命令，来插入外部文件

@import "common/style/common.scss";