SCSS 语法

ゝ一世哀愁。 2022-02-14 02:44 305阅读 0赞

**前言：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'); }