SASS/scss (css预处理器）

sass scss是不一样的写法，sass按照严格缩进 scss允许你使用变量、嵌套规则、 mixins、导入等众多功能， 并且完全兼容 CSS 语法。

1.安装sass

1.安装Ruby      https://rubyinstaller.org/downloads/
                安装步骤 https://www.sass.hk/install/
                更改添加国内淘宝源：gem sources -a https://gems.ruby-china.com
    将scss转换为css
    sass -w sass text.scss:text.css
    
2.装插件easy sass自动将sass变为css  即自己写一个sass保存后就会自动生成一个一样的css
    就不用装Ruby
参考网站： https://blog.csdn.net/qq_40259641/article/details/84979821

sass参考手册：sass.bootcss.com/docs/sass-r…

2.scss变量定义 用$

1.普通变量 $color:red;
2.!default 定义默认变量，如果不用默认，得在默认前定义才行
eg: $color:red;
    $color:blue !default;
3.特俗变量  #{$变量名}  应用于复杂属性

3.嵌套

直接用括号
 1.选择器嵌套
 eg:   
 ul>li{
     
 }
 相当于
 ul{
     width:100%；
        li{
          height：200px;  
        }
    }
    
    
    a:hover{}相当于
    a{
        &:hover{}//&写在谁里面，代表谁
    }


2.属性嵌套
div{
    padding-topo:10px;
    padding-left:20px;
}
相当于
div{
padding：{
    top:10px;
    left:20px;
}
}

4.@mixin 混合宏

可以设置默认值，形参，到时候调用时，传自己需要的值
@mixin 对象名  //生成
@ include 对象名  // 调用

eg:@mixin sexy-border($color, $width: 1in) {
  border: {
    color: $color;
    width: $width;
    style: dashed;
  }
}
p {
    @include sexy-border(blue); 
    height:100px;
}
h1 { @include sexy-border(blue, 2in); }

被编译为：

p {
  border-color: blue;
  border-width: 1in;
  border-style: dashed;
  height:100px;}

h1 {
  border-color: blue;
  border-width: 2in;
  border-style: dashed; }

5.继承和占位符

1.占位符%   只能写简单样式，不能传参数
    %对象  //生成
    @extend %对象   // 调用
2.继承
    @extend .p //继承p的所有属性

6.import和自定义函数

   1. @import 文件路径;     //引入文件
    eg： @import ./common.scss
   2.自定义函数
   
   @function name(参数1,参数2...){
       @return 返回值
   }   //定义
   
    name(参数1,参数2...)   //调用  方法名()
    
    eg: @function add($w1,$w2){
       @return $w1+$w2
   } 
    add(1,2);

7.sass数据类型

    终端 sass -i
    type-of(10px);//number类型
    Ctrl+c停止终端活动

8.sass自带函数

    自己查表
    1.数字函数：
     绝对值 abs()  四舍五入round() 
    2.字符串函数:
    3.颜色:
    4.值列表:

9.控制命令

1. @if 判断条件 {设置的属性}

     eg：p{
        @ if 1+1=2{color:'red';} //如果1+1==2 颜色为red
    }
   

2.@for 变量 from 开始 through 结束 { }

 @for $i from 1 through 3 {
      .item-#{$i} { width: 2em * $i; }
    }

被编译为：

    .item-1 {
      width: 2em; }
    .item-2 {
      width: 4em; }
    .item-3 {
      width: 6em; }

  @for 变量 from 开始 to 结束 { }  //到xx之前

3.@each in {}

  @each  $var in $list{}
  @each $animal in puma, sea-slug, egret, salamander {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
  }
}

被编译为：

.puma-icon {
  background-image: url('/images/puma.png'); }
.sea-slug-icon {
  background-image: url('/images/sea-slug.png'); }
.egret-icon {
  background-image: url('/images/egret.png'); }
.salamander-icon {
  background-image: url('/images/salamander.png'); }

4.@while

 4.@while $i{}
    eg：$i: 6;
    @while $i > 0 {
      .item-#{$i} { width: 2em * $i; }
      $i: $i - 2;
    }
    
    被编译为：
    
    .item-6 {
      width: 12em; }
    
    .item-4 {
      width: 8em; }
    
    .item-2 {
      width: 4em; }