sass的使用(css框架)(语法@与其他语言不一样,更简洁,不带括号(),for口头化)

1.查看是否安装成功 命令行 ruby -v
2.安装sass 命令行 gem install sass
3.vscode
4.注释 /* */会写到压缩的文件中 但是 //不会

   /*！描述信息 */

5.变量

$width :100px;
body{
    width: $width;
    height: $width;
}

6.作用域(可以在{}定义)

body{
    $color:red !global;//全局
    width: $width;
    height: $width;
}

7.数据类型(后面是例子)
数字: 1, 2.5, 13 ,10px,5a
字符串: "ss" 'ss' baz // $str : “aa”; !引号会被编译到css => color: “aa”;
颜色: blue #ffffff rgba(0,0,0,0,0) 写16进制自动转换为rgba
布尔类型: true false
空: null
数组: 用空格做分隔符 1.5em 1em 0.2em,Helvetica,Arial,sans-serif

const arr1=[1,2,3,4] ->css 1,2,3,4
const arr2=[[1,2],[5,6]] ->css (1,2),(5,6)
map:

const map=(
    key1:"value1",
     key2:"value2"

 )

8.运算(尽量隔开)
$add: 1+2; //3
$add: 1+2px; //3px
$add: “2”+“1”; //21
$add: 1px+2px; //编译失败
9. 比较
$a: 1<=2 //true
10.相等
$a: 1== 1px //true
$a: a== “a” px //true
11.布尔 and or not
$a: 1>0 and 0>=5//false
12.颜色相加(分开两两相加)
#aaaa + #aaaa
12.嵌套语法(!重要)

body{
    #app{
        width: 200px;
        height: 200px;
        background-color: aqua;
        p{



            width: 50px;
            height: 50px;
            background-color: blue;
            margin-left: 200px;
        }
    }


}

13.插值 #{$a}(重要) 像mybatis的 传值语法 #{变量名}
,但是变量和php一样是永远有 $ 的

 $a: font;
body #{$a}{
        width: 20px;
   }

编译后

body font {
  width: 20px;
}

14.父选择器&

  button{
   background-color:red;
   &:hover{
    background-color:green;  
  }

}

15.默认值(定义变量为null无作用)!default

$my:"xxx" !default;

16.全局变量

$my:"xxx" !global

17. 错误时会有提示 !optional

18.重要@import(不能引用css文件网址url),可以引用其他的scss文件

 1.@import "foo.scss";
 2.@import "bar";

19.重要@media
20.@extend重要(复用) 可以直接继承样式

.a{
    background-color: aqua;
}
.b{
    
    width: 100px;
    @extend .a;
}
.c{
    @extend .b;
    width: 222px;
}

21.选择器占位符复用 不编译成css(其他地方出现时可以替换),作用和变量差不多

  %content{
         width:88px;

   }

可以替换//必须定义!	

%extreme{
    width: 0%；

 }

 .notice{
      @extend %extreme;
  }
 .b .a%extreme{
    width: 0%;
  }

22.其他不重要的
@debug 调试
@warn 警告
@error 报错
23.判断三元运算符 切换颜色的例子

.a{
    color: if(1!=1,red,green);
}

24.多层判断 @if 条件{}else if 条件{} else{} 要与其他语言语法区分(判断不带括号)

  $my : 2;
 p {
     @if $my==1{
       color: aqua;
     }@else if $my==2{
       color: aquamarine;
     }@else{
       color: bisque;
     }

 }

25.@for循环
1 2 3输出三次

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

  } 

1 2 3输出俩次
@for KaTeX parse error: Expected '}', got '#' at position 26: …o 3{ .item-#̲{i} { width: 2em * $i; }

}

26.@while循环(再加上怎么设置变量的值,其实都一样的 $i: xx)

$i: 6;
@while $i>0 {
     .item-#{$i} {  width: 2em *$i; } 
   $i : $i - 2;
}

27.混合器和引入: 引用一大段代码 (可以给子类里面加代码)

  @mixin my-corners{
          border-radius: 1px;
          -moz-border-radius: 1px;
          li{
                margin-left:0px;
       }
   }
   //给子类加一段复杂的代码(很多层的)
   .a{
      width:80px;
       @include  my-corners;

   }

‘28. 给混合器穿参数//可以直接传,也可以用键值对(表示比较清晰,可以不按对应来传)

   @mixin link-a($color1,$color2){
  		&:hover{
      		color:$color1;
  		}
 		 &:visited{
     		color:$color2;
		 }


   }
a{
   @include link-a($color1:red,$color2:green);

}

29.混合器可以有默认值(可以只传一个参数)$nonal是传入的一个参数

@mixin link-a1 ($normal,$color1:$normal,$color2:$normal) {
  &:hover{
    width: 11px;
    color: $color1;
  }
  
}

a{
  @include link-a1(red);
}