Sass

世界上最成熟最稳定最强大的专业级CSS扩展语言
CSS的预处理工具
.sass .scss预处理后缀

一、帮助我们解决的问题

1.嵌套规则

通过花括号的方式解决复杂的css父子样式嵌套问题

2.变量规则

通过变量将公共样式抽离,减少冗余css代码

3.条件逻辑

像高级语言一样编写逻辑性的css代码

二、Sass安装

sass中文网 ruby3.x安装

按照安装步骤进行安装即可

在vscode中 F1输入live sass:watch sass

三、基础语法

3.1 sass变量和引用

3.1.1 定义变量要用$开头

   $width:300px;
   $height:300px;
   $color: blue;
   
   .div1{
       width:$width;
       height:$height;    
       background-color:$color;
   }
   $xxx:200px !default;//后续相同变量都会把他的值覆盖

3.1.2 差值变量的链接 #{ }

(1).对于img

 $str:'xxx.jpg';
 
 .div2{
     background-image:url('./img/#{$str}');//转  css中就是./img/xxx.jpg
 }

(2).对于类

 $class:'.div';
 $styleKey:'height';
 $width:300px;
 $height:300px;
 
 #{$class}{
     width:$width;
     $styleKey:$height;
 }

 //转到css中就是
 .div{
     width:300px;
     height:300px;
 }

3.2 Sass中的import

四、基本数据类型

4.1 number类型

  $width:300px;
  $zoomValue:2;
  
  .div{
  width:$width;
  height:$width;
  zoom:$zoomValue;
  }

4.2 color类型

 $color:red;
 $colorHex:blue;
 
 .div{
 color:$color;
 background-color:$colorHex;
}

4.3 string类型

  $str:'1.jpg';
  
  .div{
      background-image:url('img/'+$str);
  }

4.4 数组类型

   $list:(100px,200px,'string',300px,400px);//数组下标从1开始
   
   .div{
       width:nth($list,1);//100px
       zoom:index($list,'string');//'string'位置是3 所以转义为css为 zoom:3
   }

4.5 map类型

   $map:(top:1px,left:2px,bottom:3px,right:4px);
   
   .div1{
       top:map-get($map,top);
       left:map-get($map,left);
   }
   .div2{
         @each $key, $value in $map {//@each作用是把map循环遍历
             #{$key}:$value;
         }
   }

五、基本运算

5.1 普通运算

在进行乘除运算时,第一个有px单位,第二个可以没有

  $num1:100px;
  $num2:200px;
  $width: $num1 + $num2;
  
  .div{
  font:(10px/8);//font:1.25px 
  font:(10px*8);//font:80px
  width:$width/2;//(100+200)/2 =150px
  margin-left:(5px + 8px/2);//9px
  }

5.2 颜色运算

  $color1:#010203;
  $color2:#040506;
  $color3:#a69e61;
  
  .div{
  color:mix($color1, $color2);
  color:red($color3);
  color:green($color3);
  color:blue($color3);
  color:rgb(red($color3),green($color3),blue($color3));//color:#a69e61
  }

5.3 字符串运算

  $str:'1.jpg';
  .div{
  background-image:url('img/'+$str);
  }

5.4 mix运算

5.4.1 示例

  @mixin helloMixin{
  display:inline-block;
  font:{
      size:20px;
      weight:500px;
    }
    color:red;
  }

  @mixin helloMixin2{
    padding:20px;
    @mixin helloMixin;//嵌套helloMixin 注意重复的 不然重复的都会存在
    background-color:red;
  }

  .div{
  @include helloMixin2;
  }

5.4.2 参数mixin

  @mixin sexy-border($color,$width){
    border:{//就是border-xxxx
      color:$color;
      width:$width;
      style:dashed;
    }
  }

  .div3{
    @include sexy-border(blue, 100px);
  }

六、继承

@extend 继承的对象

6.1 简单继承

   .div{
       border:1px;
       background-color:red;
   }
   .divext{
       @extend .div; //继承
       border-width:3px;
   }

   //转为css的结果:
   .div, .divext {
     border: 1px;
     background-color: red;
   }
   .divext {
     border-width: 3px;
   }

6.2 关联属性继承

   .div1 {
       border:1px;
       background-color:red;
   }
   .div1.other{
       background-image:url('hello.jpg')
   }
   .divext {
       @extend .div1;//会把跟div1所有相关联的属性都继承
   }
   
   //转为css的结果:
   .div1, .divext {
     border: 1px;
     background-color: red;
   }
   
   .div1.other, .other.divext {
     background-image: url("hello.jpg");
   }

6.3 链式继承

   .div1{
       border:1px solid #000;
   }
   .div2{
       @extend .div1;
       color:red;
   }
   .div3{
       @extend .div2;
       color:blue;
   }

   //转为css的结果:
   .div1, .div2, .div3 {
     border: 1px solid #000;
   }
   
   .div2, .div3 {
     color: red;
   }
   
   .div3 {
     color: blue;
   }

6.4 伪类继承

   a:hover{
       text-decoration:underline;
   }
   .hoverlink{
       @extend :hover;
       color:red;
   }

   //转为css的结果:
   a:hover,a.hoverlink{
       text-decoration:underline;
   }
   .hoverlink{
       color:red;
   }

七、嵌套

   $width:300px;
   $color:#fff;
   
   .div1{
       width:$width;
       height:$width;
       background-color:$color;
       .div-inner{
           width:$width;
           height:$width;
           background-color:$color;
           .div-inner-inner{
               width:$width;
               height:$width;
               background-color:$color;
           }
       }
       a{
         color:red;
       }
   }
   
   //转为css的结果:
   .div1 {
     width: 300px;
     height: 300px;
     background-color: #fff;
   }
   
   .div1 .div-inner {
     width: 300px;
     height: 300px;
     background-color: #fff;
   }
   
   .div1 .div-inner .div-inner-inner {
     width: 300px;
     height: 300px;
     background-color: #fff;
   }
   
   .div1 a {
     color: red;
   }

八、条件控制语句

8.1 @if

   $type:'tony';
   p{
       @if $type == 'bufy'{
           color:red;
       } @else if $type == 'tim'{
           color:blue;
       } @else if $type == 'tony'{
           color:green;
       } @else{
           color:black;
       }
   }

   //或者在外面直接输入@if
   @if $type == 'bufy'{
       .div{
           color:red;
       }
   }@else{
       .div{
           color:blue;
       }
   }

   //转换为css的结果:
   p {
     color: green;
   }
   
   .div {
     color: blue;
   }

8.2 @for

8.2.1 for…through…(包含through后的数)

  @for $i from 1 through 3{//包含3
      .item#{$i}{
      width:1px * $i;
      }
  }

  //转为css的结果:
  .item1 {
    width: 1px;
  }
  .item2 {
    width: 2px;
  }
  .item3 {
    width: 3px;
  }

8.2.2 for…to…(不包含to后的数)

   @for $i from 1 to 3{//不包含3
         .item#{$i}{
         width:1px * $i;
         }
     }

   //转为css的结果:
     .item1 {
       width: 1px;
     }
     .item2 {
       width: 2px;
     }

8.2.3 for list

   $list:(1,2,3,4,5);
   @for $i from 1 through length($list){
       .item#{$i}{
            width:1px * $i;
     }
   }

   //转为css的结果:
   .item1 {
      width: 1px;
   }
   .item2 {
     width: 2px;
   }
   .item3 {
     width: 3px;
   }
   .item4 {
     width: 4px;
   }
   .item5 {
     width: 5px;
   }

8.3 @while

   $i:6;
   @while $i 0{
       .item#{$i}{
         width:1px * $i;
     }
     $i:$i - 2;
   }
   
   //转换为css的结果:
   .item6 {
     width: 6px;
   }
   .item4 {
     width: 4px;
   }
   .item2 {
     width: 2px;
   }

8.4 @each

   $map:(top:1px,left:2px,bottom:3px,right:4px);
   
   .div2{
     //@each作用是把map循环遍历
     @each $key, $value in $map {
         #{$key}:$value;
     }
   }

   //转换为css的结果:
   .div2 {
     top: 1px;
     left: 2px;
     bottom: 3px;
     right: 4px;
   }

九、Sass函数内置函数

9.1 number

   $number:49;
   $number2:80;
   
   $numberPercent:0.88;
   
   $numberRound:25.8;
   
   $abs:3;
   
   .div{
       zoom:percentage($numberPercent);//转换成百分比  zoom: 88%;
       zoom:round($numberRound);//四舍五入            zoom: 26;
       zoom:ceil($numberRound);//向上舍入             zoom: 26;
       zoom:floor($numberRound);//向下舍入            zoom: 25;
       zoom:abs($abs);//获取绝对值                    zoom: 3;
       zoom:min($number,$number2);//获取最小值        zoom: 49;
       zoom:max($number,$number2);//获取最大值        zoom: 80;
       zoom:random();//获取随机数                     zoom: 0.40021;
   }

9.2 数组

   $list:(1,2,'p',4,5);
   .div{
       zoom:length($list);          //获取数组长度
       zoom:nth($list,2);           //获取指定下标的元素,下标从1开始
       //@debug相当于js中的console 用来输出结果 看是否合适使用
       @debug set-nth($list,1,11);  //替换指定下标的元素
       @debug join($list,(6,7,8));  //拼接数组
       @debug append($list,'222');  //从数组尾部添加元素
       @debug index($list,'p');     //返回指定元素在数组中的位置
   }

9.3 字符串

   $string:'hello';
   $stringNo:hello;
   $stringUP:'HELLO';
   .div{
       background-image:unquote($string);     //去除引号  background-image: hello;
       background-image:quote($stringNo);     //添加引号  background-image: "hello";
       background-image:str-length($string);  //获取字符串长度
       @debug  str-insert($string,'p',2);   //在指定位置插入字符  hpello
       @debug  str-index($string,'l');      //返回指定字符在字符串的位置  3
       background-image:to-upper-case($string);//转换成大写 background-image: "HELLO";
       background-image:to-lower-case($stringUP);//转换成小写 background-image: "hello";
   }

9.4 map

   $map:(top:1px,left:2px,bottom:3px,right:4px);
   .div{
       width:map-get($map,top);              //1px
       @debug map-remove($map,bottom); //删除key bottom (top: 1px, left: 2px, right: 4px)
       @debug map-keys($map);                //返回所有key : top, left, bottom, right
       @debug map-values($map);              //返回所有key中的 : value 1px, 2px, 3px, 4px
       @debug map-has-ket($map,abc);         //false
   }
   @mixin foo($args...){
       @debug keywords($args);   //返回参数    (arg1: "abc", arg2: "efg")
   }
   @include foo($arg1:'abc',$arg2:'efg');

9.5 自定义函数

   $rem1:100px;
   @function  px2rem($px){
       $rem:37.5px;
       
       @debug $px;
       @return ($px/$rem)(100/37.5) + rem(我是单位);
   };
   .div{
       width:px2rem($rem1);//引用function //width: 2.66667rem(我是单位)
   }