SCSS基础

SASS 是一款 CSS 预编译器,它定义了一种新的编程语言,为CSS 增加了一些编程的特性,开发者使用这种语言进行编码后,代码需要被编译成 CSS 才能被浏览器理解。

而Scss 其实是 Sass 3 为了兼容 CSS 引入的新语法。

SCSS变量

SassScript 最普遍的用法就是变量,变量以美元符号”$”开头,赋值方法与 CSS 属性的写法一样:

$width:10px;
使用变量:
#main{
  width:$width/2; //通过变量进行运算
}

除了简单的赋值,Sass中变量还可以定义类似数组的变量:

$animals: puppy kitty chick;

插值法

在SCSS中通过#{ }语法可以将变量插入任意位置:

$name: "mail";
$top-or-bottom: "top";
$left-or-right: "left";

.icon-#{$name} {
  background-image: url("/icons/#{$name}.svg");
  position: absolute;
  #{$top-or-bottom}: 0;
  #{$left-or-right}: 0;
}

嵌套规则:

与CSS不同,SCSS的语法呈现的是嵌套规则,即将外层的样式作为父选择器,子标签写在父标签里面来更直观地表现出样式结构。

父选择器 &

在嵌套 CSS 规则时,有时也需要直接使用嵌套外层的父选择器,例如,当给某个元素设定 hover 样式时,可以用 & 代表嵌套规则外层的父选择器,比如:

或者特殊一点的用法:

复用:mixin/include

在使用中,我们可能存在需要复用的样式,如flex:left等等

@mixin square {
  width: 100px;
  height: 100px;
}

// 应用:
.user-avatar {
  @include square;
}
.admin-avatar {
  @include square;
}

@mixin定义复用样式

@include应用复用样式

这样在scss中就可以复用样式了。

复用的样式也可以传入参数,效果如下:

@mixin square($size) {
  width: $size;
  height: $size;
}

// 应用
.avatar {
  @include square(100px);
}