SASS初体验

Posted 2020-10-27 古宝只

SASS初体验

标签（空格分隔）： sass scss css

---

1. 编译环境
需要安装Ruby,之后需要打开Start Command Prompt with Ruby运行

gem install sass

2. 命令行编译

sass <要编译的sass文件路径>/style.scss:<要输出css文件路径>/style.css

多文件编译 (必须用--watch?反正我不加watch就会报错)

sass --watch sass/:css/ 

开启watch

sass --watch <要编译的Sass文件路径>/style.scss:<要输出CSS文件路径>/style.css

输出方式 --style [nested(末尾花括号不换行)|expanded(完全展开)|compact(单行)|compressed(压缩)]

sass --watch sass/:css/ --style compressed

3. 基本语法

(1). 变量

$[变量名]: [值]
默认变量；普通变量会覆盖默认变量

$size: 16px;
$size: 14px !default;
p.p-1 {
    font-size: $size;
}

编译后 p.p-1{font-size:16px}

(2). 嵌套

和less差不多。

nav {
    color: blue;

    li {
        color: yellow;

        a {
            color: red;

            header & {
                color: green;
            }
        }
    }
}

编译后

nav {
  color: blue;
}
nav li {
  color: yellow;
}
nav li a {
  color: red;
}
header nav li a {
  color: green;
}

属性嵌套(相同属性前缀)

.box {
    .box-a: {
        color: purple;
    }
}

编译后

.box {
  font-size: 12px;
  font-weight: bold;
}

伪类嵌套，和less一毛一样

.clearfix {
    &:before,
    &:after {
        content: "";
        display: table;
    }
    &:after {
        clear: both;
        overflow: hidden;
    }
}

编译后

.clearfix:before, .clearfix:after {
  content: "";
  display: table;
}
.clearfix:after {
  clear: both;
  overflow: hidden;
}

(3). 运算

不同单位不能作运算
可以进行字符串拼接；且有无引号根据左边的决定
除法需要在数学表达式中，两个普通属性需要用括号括起来，比如

.box {
    width: (100px / 2);
}

编译后

.box {
  width: 50px;
}

(4). 混合

@mixin [mixin-name]([$param1, $param2: default-value]) { ... }
使用: @include [mixin-name](value1, value2);

(5). 继承

@extend .[class]

.btn {
    border: 1px solid #999;
    padding: 4px 12px;
    font-size: 14px;
    background: #ddd;
    color: #333;
}

.btn-primary {
    background: #ff5f00;
    color: #fff;

    @extend .btn;
}

编译后

.btn, .btn-primary {
  border: 1px solid #999;
  padding: 4px 12px;
  font-size: 14px;
  background: #ddd;
  color: #333;
}

.btn-primary {
  background: #ff5f00;
  color: #fff;
}

占位符%
用占位符声明的代码，不被@extend调用就不会被编译
相同样式的会通过,合在一起，减少代码量

%box-padding {
    padding: 4px 12px;
}

.box {
    font-size: 14px;

    @extend %box-padding;
}

.box-2 {
    font-size: 18px;

    @extend %box-padding;
}

编译后

.box, .box-2 {
  padding: 4px 12px;
}

.box {
  font-size: 14px;
}

.box-2 {
  font-size: 18px;
}

(6). 插值

#{$[param]}用法，可以用在@each，@extend

$border-properties: (border);
@mixin set-border($direction, $val) {
    @each $prop in $border-properties {
        #{$prop}-#{$direction}: $val;
    }
}

.box {
    @include set-border(left, 1px solid #ddd);
}

编译后

.box {
  border-left: 1px solid #ddd;
}

%border-right {
    border-right: 2px solid #ddd;
}

$d: "right";
.box {
    @extend %border-#{$d};
}

编译后

.box {
  border-right: 2px solid #ddd;
}

(7). 注释

/**/会出现在编译后文件中 amazing!
//不会

// 方向
/*方向*/
$d: "right";
.box {
    @extend %border-#{$d};
}

/*位置*/

编译后

.box {
  border-right: 2px solid #ddd;
}

/*方向*/
/*位置*/