Sass基本使用

Sass功能与优势

1、变量和常量—sass使用$定义

(1)＄primary-color:#ccc;    //定义变量
(2)$primary-color:#fff !default;  //定义常量---常量一般被赋予,就无法被修改

2、嵌套规则

3、在Sass文件中使用@import导入其他Sass文件

    从Sass4开始官方推荐使用@use规则替代@import导入
    (1)使用 @use 规则可以使用别名、命名空间等方式更加灵活地导入模块
    (2)@forward导入

4、继承:使用@extend实现继承CSS类—减少了复用代码的编写

  .base-style {
         font-size:12px;
         color:#ccc;
     }
     .child-style {
         @extend .base-style;
         text-align:center;
    }

### 注意:(1)使用@extend继承的样式会插入到已有样式的前面
        (2)使用@extend继承选择器时要考虑好选择器的权重问题

5、@mixin混入:使用@mixin和@include,可以定义和使用重复的样式块,减少重复编写;

(1)基本使用
首先定义混合器:

 @mixin button-style {
            background-color:#ccc;
            color:#fff;
            padding:12px;
            border-radius:4px;
       }

第二步:使用@include引入混合器

.button {
       @include button-style;
   }

(2)可以在混合器中传入参数

@mixin button-style(＄bgc,＄text-size){
     background-color:$bgc;
     font-size:$text-size;
   }
   .button {
     @include button-style(#ccc,24px)
   }

(3) 混合器默认参数

 @mixin button($bgc:#fff,＄font-size)

6、运算符:

(1)算数运算符+ - * / % 加减乘除取余

＄width:100px;
.container {
    width:$width + 20px;   (加减乘除取余)    同左
}

(2)颜色运算符: 加减乘除

.btn-primary {
  background-color: $primary-color + #efefef;  //加
  background-color: $primary-color * 1.5;  //乘
}

(3) 与运算符and和或运算符和非运算符
(4)&嵌套中代表父类

7、提供单行和多行注释的方式,便于样式文档化维护

8、函数

  (1)、内置函数
       background-color: lighten($base-color, 20%);  //亮度
       background-color: darken($base-color, 20%);  //暗度
       background-color: rgba($base-color, 0.5);  //透明度
       background-color: mix($color1, $color2);  //混合两种颜色
       font-size: round($number);   //四舍五入
  (2)、自定义函数 @function

  @function double($number) {      //自定义double函数
       @return $number * 2;
  }
  .result {  width: double(10px);   }   //使用double函数

9、条件判断:@if @else if @else

$language: "Sass";
body {
    @if $language == "Sass" {
          font-family: "Arial"; 
        } @else if $language == "SCSS" {
          font-family: "Helvetica";
        } @else  { 
         font-family: "Verdana";
         }
     }



$size: 10px;
.element {
  font-size: $size;
  @if $size < 12px {
    color: red;
    &:hover {
      background-color: yellow;
    }
  } @else {
    color: blue;
  }
}

10、循环

sass支持使用@each、@for和@while等循环结构,可以在样式中便捷地生成和操作重复的样式规则;