Sass预处理器使用

sass预处理器

因为浏览器中的css中不能编程 不存在变量 改变样式多的话需要手动更改会很繁琐 —所以需要css预处理器

三种 预处理器 less sass 百分九十九的语法都差不多一样的

sass预处理器

文件后缀名 --- .scss  只是版本不一致而已

执行过程

1  编写符合sass语法的scss文件

	1.1 建立一个后缀名 scss文件 ----sass完全兼容css语法的

2 使用工具将scss文件编译成css文件

	2.1 vsc 里面的插件 工具1   live sass   Compiler  工具2 

3 页面中引用编译好的scss文件

sass的语法

1 声明变量 关键字 $ 只能声明一个值 调用时也需要带 关键字

$color : red ;

$color:red;

.box{
    background-color: $color;
}
.box1{
    background-color:$color;
}

2 声明函数 --也叫混合 声明关键字 @mixin 函数名 ( ) { } 调用时使用 @include

//声明函数  sass的关键字是  @mixin 调用关键字是@include
@mixin fn(){
    background-color: blue;
    border: 1px solid #ccc;
    margin: 100px auto;
}
.box2{
    @include fn();
}

.box3{
    @include fn();
}

3 声明函数可以传参

//声明函数传参   $a 是形参
@mixin fn1($a){

    color:$a;

}

.box4{
    @include fn1(black);
}
.box4{
    @include fn1(red);
}

4 声明函数可以传默认参数

//带默认值的函数
@mixin fn2($b:red){
    color:$b;
}
//--------------没带参数
.box5{
    @include fn2();
}

.box6{
    @include fn2(purple);
} 

css预处理器 ---------嵌套

坑:   伪元素: 前面加空格语法是错误的 编译之后 的css会带有空格

sass小技巧 ----sass 导入

@import "路径"  ;    导入

sass的注释

// 这种注释是不会编译的    ctrl + /

/*  这种注释是可以看到的  */  ctrl + shift + /