sass学习笔记

Sass 是一个具有语法改进的 CSS 预处理器。
Sass文件就是普通的文本文件，里面可以直接使用CSS语法。文件后缀名是.scss，意思为Sassy CSS。
Sass 有四种语法解析器：scss、sass、CSS 和 less。

父选择器 &

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

编译后的 CSS 文件中 & 将被替换成嵌套外层的父选择器，如果含有多层嵌套，最外层的父选择器会一层一层向下传递。

& 必须作为选择器的第一个字符，其后可以跟随后缀生成复合的选择器。

// sass语法
.main {
  color: black;
  &-sidebar {
    border: 1px solid;
  }
  &:hover {
    color: red;
  }
}

// 转成css后为
.main {
  color: black;
}
.main-sidebar {
  border: 1px solid;
}
.main:hover {
  color: red;
}

嵌套属性

很多 CSS 属性都有同样的前缀，例如：font-family, font-size 和 font-weight ， text-align, text-transform 和 text-overflow。

在 Sass 中，我们可以使用嵌套属性来编写它们

// sass语法
.box {
  border: {
    radius: 5px;
    color:red;
  }
  font: {
   family:'YaHei';
   size:18px;
   weight:600;
  }
  margin: auto {
    bottom: 10px;
    top: 10px;
  };
}

// 转成css后为
.box {
  border-radius: 5px;
  border-color: red;
  font-family: "YaHei";
  font-size: 18px;
  font-weight: 600;
  margin: auto;
  margin-bottom: 10px;
  margin-top: 10px;
}

变量 $

变量以美元符号开头，赋值方法与 CSS 属性的写法一样。

$color: red;
$font-size: 16px;

.foo {
  color: $color;
}

变量支持块级作用域，嵌套规则内定义的变量只能在嵌套规则内使用（局部变量），不在嵌套规则内定义的变量则可在任何地方使用（全局变量）。将局部变量转换为全局变量可以添加 !global 声明。

// sass
.main {
  $width: 5em !global;
  width: $width;
}

.sidebar {
  width: $width;
}

// css
.main {
  width: 5em;
}

.sidebar {
  width: 5em;
}

#{} 插值语句

标签名或者属性也可以定义为变量，用 #{} 包裹

// scss
$ipt: input;
$btm: bottom;

.#{$ipt} {
  padding-#{$btm}: 5rem;
}

// css
.input {
  padding-bottom: 5rem;
}

// scss
$name: foo;
$attr: border;

p.#{$name} {
  #{$attr}-color: blue;
}

// css
p.foo {
  border-color: blue;
}

@extend 继承

在设计网页的时候常常遇到这种情况：一个元素使用的样式与另一个元素完全相同，但又添加了额外的样式。通常会在 HTML 中给元素定义两个 class，一个通用样式，一个特殊样式。假设现在要设计一个普通错误样式与一个严重错误样式，一般会这样写

// scss
.error {
  border: 1px #f00;
  background-color: #fdd;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}

// css
.error, .seriousError {
  border: 1px #f00;
  background-color: #fdd;
}

.seriousError {
  border-width: 3px;
}

混合指令 @mixin

混合指令（Mixin）用于定义可重复使用的样式，避免了使用无语意的 class。

// 定义混合指令 @mixin
@mixin large-text {
  font: {
    family: Arial;
    size: 20px;
    weight: bold;
  }
  color: #ff0000;
}

// 使用
.heading {
  @include large-text;
  padding: 4px;
  margin-top: 10px;
}

参数用于给混合指令中的样式设定变量，并且赋值使用。

@mixin sexy-border($color, $width) {
  border: {
    color: $color;
    width: $width;
    style: dashed;
  }
}

p {
  @include sexy-border(blue, 1in);
}

函数指令

// scss
$grid-width: 40px;
$gutter-width: 10px;

@function grid-width($n) {
  @return $n * $grid-width + ($n - 1) * $gutter-width;
}

#sidebar {
   width: grid-width(5);
}

// css
#sidebar {
  width: 240px;
}

@for 循环

@for 指令可以在限制的范围内重复输出格式。
有两种写法@for $var from <start> through <end>和@for $var from <start> to <end>。

当使用 through 时，条件范围包含 <start> 与 <end> 的值，而使用 to 时条件范围只包含 <start> 的值不包含 <end> 的值*。

// through
@for $i from 1 through 3 {
  .item-#{$i} { width: 2em * $i; }
}

// css
.item-1 {
  width: 2em;
}

.item-2 {
  width: 4em;
}

.item-3 {
  width: 6em;
}

// to
@for $i from 1 to 3 {
  .item-#{$i} { width: 2em * $i; }
}

// css
.item-1 {
  width: 2em;
}

.item-2 {
  width: 4em;
}

一些代码片段

自动添加前缀

// 定义命名空间为 el
$namespace: 'el';

@mixin b($block) {
// 新定义一个变量，由命名空间 el 加上 横线 加上传入的字符串
// !global将定义的局部变量转为全局变量
  $B: $namespace + '-' + $block !global;
  .#{$B} {
  // @content类似于vue中的slot可以充当卡槽
    @content;
  }
}

// 使用
@include b(container) {
  display: flex;
  flex-direction: row;
}

// 转义后的代码
.el-container {
  display: flex;
  flex-direction: row;
}

参考资料：

scss转css
scss官方文档