SCSS常用语法总结

Scss 是一款强化 CSS 的辅助工具，它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能，这些拓展令 CSS 更加强大与优雅。

1. 使用变量

因为css里不能使用变量，造成很大不便。所以scss里引入的变量。

任何可以用作css属性值的赋值都可以用作scss的变量值，甚至是以空格分割的多个属性值。

$width: 100px; // 定义$width变量
nav {
  width: $width; // 引用$width变量
  color: $nav-color;
}

2. 嵌套CSS 规则

css中重复写选择器是非常麻烦的。比如下面这样：

#content article h1 { color: #333 }
#content article p { margin-bottom: 1.4em }
#content aside { background-color: #EEE }

像这种情况，scss可以只写一遍，且使样式可读性更高。

#content {
  article {
    h1 { color: #333 }
    p { margin-bottom: 1.4em }
  }
  aside { background-color: #EEE }
}

2-1. 父选择器的标识符&

当你想为article元素内a标签写 :hover 这种伪类时，css的写法是：

article a {
  color: blue;
}
article a:hover {
  color: red;
}

而scss可以通过&符号实现上面功能，更方便也更容易理解

article a {
  color: blue;
  &:hover { color: red }
}

常用父选择器用法：

&:hover

&:active

&:disabled 

&:focus

&::pla