Sass

Sass

Sass介绍

Sass 是一款强化 CSS 的辅助工具，它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能，这些拓展令 CSS 更加强大与优雅。使用 Sass 以及 Sass 的样式库有助于更好地组织管理样式文件，以及更高效地开发项目。

语法格式

Sass共有两种语法结构 Sass、Scss。两种语法基本相同，但是Sass用缩进代替花括号，用换行代替了分号。

• Sass

  .father
  	width: 100px
  	height: 100px
  	.son
  		width: 50px
  		height: 50px
  

• scss

  .father{
      width: 100px;
      height： 100px;
      .son{
          width: 50px;
          height: 50px;
      }
  }
  

变量

// scss中定义变量： $变量名: 变量值
$w: 100px;

sass中变量的特点:

• 后定义的变量会覆盖先定义的变量
• 可以通过值传递用变量给变量赋值
• sass中的变量存在作用域
• sass变量和less变量不同,sass中的变量不会进行预处理,不能先使用后定义

变量插值

// 在sass中,如果变量是属性值的话,可以直接 $变量名 调用
// 如果变量是属性名或者选择器名的话需要使用 #{$变量名} 调用
$d: div;
$w: width;
$h: height;
$size: 100px;

${d}{
    ${w}: $size;
    ${h}: $size;
}

运算

// sass中支持 + - * / 运算, 但是运算时都要用 () 将运算式包裹起来
div{
  width: (100px * 2);
  height: (400px / 2);
  background: red;
  margin-top: (10px + 10px);
  margin-bottom: (30px - 10px);
}

混合

// 创建混合: @mixin 混合名(){} 或 @mixin 混合名{}
// 调用混合: @include 混合名() 或 @include 混合名
@mixin center(){
    // ...
}
div{
    @include center();
    // ...
}

带参混合

@mixin whc($w: 200px, $h: 200px, $c: red){
  width: $w;
  height: $h;
  background: $c;
}

.box1{
  @include whc();
}

.box2{
  @include whc(300px, 300px, blue);
}

.box3{
  @include whc($c: yellow);
}

混合中的可变参数

// 变量名... 可以接受0个或多个参数
@mixin ani($name, $time, $args...){
    transition($name, $time, $args);
}

导入外部Sass文件

// 可以使用@import来导入外部Sass文件，文件的.scss后缀可以省略。
@import './css/center'

内置函数

// 和LESS一样, SASS中也提供了很多内置函数方便我们使用

// 字符串函数
/*
unquote（$string）：删除字符串中的引号；
quote（$string）：给字符串添加引号；
To-upper-case（$string）：将字符串小写字母转换为大写字母
To-lower-case（$string）：将字符串大写字母转换为小写字母
*/
// 数值函数
/*
percentage($value)：将不带单位的数转换成百分比值；
round($value)：将数值四舍五入，转换成一个最接近的整数；
ceil($value)：向上取整；
floor($value)：向下取整；
abs($value)：取数的绝对值；
min($numbers…)：找出几个数值之间的最小值；
max($numbers…)：找出几个数值之间的最大值；
random(): 获取随机数
*/
// 颜色函数
/*
rgb($red,$green,$blue)：根据红、绿、蓝三个值创建一个颜色；
rgba($red,$green,$blue,$alpha)：根据红、绿、蓝和透明度值创建一个颜色；
red($color)：从一个颜色中获取其中红色值；
green($color)：从一个颜色中获取其中绿色值；
blue($color)：从一个颜色中获取其中蓝色值；
mix($color-1,$color-2,[$weight])：把两种颜色混合在一起。
*/
// 列表函数
/*
length($list)：返回一个列表的长度值;
nth($list, $n)：返回一个列表中指定的某个标签值;
join($list1, $list2, [$separator])：将两个列给连接在一起，变成一个列表；
append($list1, $val, [$separator])：将某个值放在列表的最后；
zip($lists…)：将几个列表结合成一个多维的列表；
index($list, $value)：返回一个值在列表中的位置值。
-->

自定义函数

@fuunction (num){
    return num * num + px;
}

div{
    width: square(20);
    height: square(20);
}

层级结构

// 和less中一样sass中在一个选择器样式内部写另一个选择器,默认是层级结构即父子关系,
// 可以通过添加 & 符来取消层级关系
.father{
    // ...
    &:hover{
        // ...
    }
    .son{
        // ...
    }
}

继承

// 和Less一样，Sass可以通过继承来降低代码冗余度
// Sass通过@extend来进行继承
.center{
    // ...
}

div{
    @extend .center;
}

条件判断

// sass中不支持混合的匹配模式,但是sass和less一样支持条件判断,而且比less中的更加彻底
// 格式@if(){}@else if(){}...else{}

// 绘制三角形
@mixin triangle($dir, $width, $color){
  width: 0;
  height: 0;
  border-width: $width;
  border-style: solid;
  border-color: transparent;
  @if($dir == Up){
    border-bottom-color: $color;
  }@else if($dir == Down){
    border-top-color: $color;
  }@else if($dir == Left){
    border-right-color: $color;
  }@else if($dir == Right){
    border-left-color: $color;
  }
}

div{
  @include triangle(Up, 30px, red);
}

循环

/*
    sass中支持循环
    for循环:
    @for $变量名 form 变量起始值 through 变量结束值{}
    @for $变量名 form 变量起始值 to 变量结束值{}
    第一种for循环包前包后,第二种for循环包前不包后

    while循环:
    @while(循环条件){}
*/
ul{
    li{
        /*
        // 从5到8的li背景变黄色
        @for $i from 5 through 8 {
      	&:nth-child(#{$i}) {
        	background: yellow;
      	}
    	}
        */
        
        $i: 5;
    	@while($i <= 8){
      		&:nth-child(#{$i}){
       			 background: yellow;
      		}
      		$i: $i + 1;
    	}
    }
}
`