SCSS 语法

前言：Sass是CSS预处理器，引入了变量、嵌套、mixin（混合）、运算以及函数等功能，且完全兼容 CSS 语法，而SCSS是Sass3版本当中引入的新语法特性。

优点：

• 完全兼容 CSS3
• 在 CSS 语言基础上添加了扩展功能，比如变量、嵌套 (nesting)、混合 (mixin)
• 通过函数进行颜色值与属性值的运算
• 函数库控制指令之类的高级功能
• 自定义输出格式
• 有无数的框架使用Sass构建
• 助于更好地组织管理样式文件，以及更高效地开发项目

语法

一、自定义变量

• 属性值

$color:pink;
.test1{
    background-color:$color;
}

• 属性

$right:right;
.test2{
    border-#{$right}:1px solid #000;
}

二、嵌套

• 嵌套元素

#sidebar {
  a { text-decoration: none; }
}

• 嵌套属性

#footer {
  border: {
    width: 1px;
    color: #ccc;
    style: solid;
  }
}

三、引用父选择符 &

• 例如，在该选择器悬停时或者当body元素具有某个类时具有特殊样式。
• 无论css如何嵌套多少层次，& 在编译时都会替换为父选择符，以下代码&始终解析为a标签

.box{
	a {
	  text-decoration: none;
	  &:hover { text-decoration: underline; }
	}
}

编译后：

.box a {
  text-decoration: none; 
}
a:hover {
  text-decoration: underline; 
}

四、混入mixin

• 用于定义可重复使用的样式，使用@mixin指令声明mixin ：

@mixin rounded($amount) {
  -moz-border-radius: $amount;
  -webkit-border-radius: $amount;
  border-radius: $amount;
}

• mixin与@include指令一起使用：

.box {
  border: 3px solid #777;
  @include rounded(0.5em);
}

五、导入import

@import则会直接将这些引入的片段合并至当前CSS文件，并且不会产生新的请求

@import "themes/dark";
@import "font.sass";

六、继承extend

复用css属性，简化代码
单个选择器可以多个选择器t继承了所有扩展选择器的样式

.test{
  border: 1px #f00;
  background-color: #fdd;
}
.box{
  @extend .test;
  border-width: 3px;
}

七、运算

• css中也可以使用算术运算符 ‘+’、‘-’、‘*’、‘/’、‘%’等
• 所有算数运算都支持颜色值， 并且是分段运算的。 也就是说，红、绿、蓝各颜色分量会单独进行运算

.box{
  width: 600px / 960px * 100%;
  color: #010203 + #040506;
}

注意：除法 ‘/’，出现在属性值里，作为分隔数字的一种方法，在以下几种情况下才会被编译为除法。

.box{
  font: 10px/8px;             // 纯 CSS，不是除法运算
  $width: 1000px;
  width: $width/2;            // 使用了变量，是除法运算
  width: round(1.5)/2;        // 使用了函数，是除法运算
  height: (500px/2);          // 使用了圆括号，是除法运算
  margin-left: 5px + 8px/2px; // 使用了加（+）号，是除法运算
}

八、控制指令

跟js语法相近

• @if

$num:5;
.box {
  @if num == 2 { border: 1px solid; }
  @if num < 3 { border: 2px dotted; }
  @if null  { border: 3px double; }
}

• @for

语法：@for $var from < start> through < end> 或 @for $var from < start> to < end>
through 包含开头到结尾的值，to 不包括结尾的值

@for $i from 1 through 3 {
  .txt-#{$i} { font-size: 12px * $i; }
}

编译为

.txt-1 {
  width: 12px; }
.txt-2 {
  width: 24px; }
.txt-3 {
  width: 36px; }

• @each

@each $iconName in car, phone, date {
  .#{$iconName}-icon {
    background-image: url('/images/#{$iconName }.png');
  }
}

编译为

.car-icon {
  background-image: url('/images/car.png'); }
.phone-icon {
  background-image: url('/images/phone.png'); }
.date-icon {
  background-image: url('/images/date.png'); }