Sass

Sass

Sass介绍

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

语法格式

Sass共有两种语法结构 SassScss。两种语法基本相同,但是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);
}

循环

```scss
/*
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;
    }
}

} `

相关文章
相关标签/搜索