CSS预处理器

概念

CSS预处理器时CSS扩展语言，他让CSS可以像编程方式来进行编写，无需考虑浏览器兼容性问题

SASS预处理框架

CSS预处理器主要有三款

• less
• stylus
• sass(两个版本scss和sass)

安装sass环境

• 推荐使用node中的npm工具直接安装
• npm i sass -g(因为属于工具推荐全局安装)

编译SASS

1. sass有两个版本文件也就有了两种后缀

• 文件名.sass
• 文件名.scss他在文件中有了{}与：更符合CSS编写习惯推荐使用

2. 转义成.css文件

• 浏览器只能识别三种文件HTML，CSS，JS
• sass 文件名.scss 文件名.css
• 执行指令时如果没有对应css文件会自动创建一个

实时编译

1. 实时编译就是随着你文件修改，自动从新编译成CSS文件
2. 实时监控index.scss文件自动编译成index.css文件
3. 指令：sass --watch index.scss:index.css
4. 实时监控目录指令：sass --watch sass:css

sass语法

1. 变量用$定义

$c:red;
/*全局变量*/
h1{
    color:$c;
}
h1{
    $w:100px;
    /*私有变量*/
    font-size: $w;
}
效果大小为100px的红色字

2. 嵌套

$c:red;
$bc:pink;
$w:500px;
$fs:100px;
$white:white;
#wrap{
    width: $w;
    height: $w;
    background-color: $bc;
    div{
        h1{
            font-size: $fs;
            color: $white;
        }
    }
}

3. 嵌套中的&,表示当前元素

$c:red;
$bc:pink;
$w:500px;
$fs:100px;
$white:white;

#wrap{
    width: $w;
    height: $w;
    background-color: $bc;
    div{
        h1{
            font-size: $fs;
            color: $white;
            /*h1摸上去变为红色*/
            &:hover{
                color: $c;
            }
        }
    }
}

4. 群组嵌套

$c:red;
$bc:pink;
$w:500px;
$fs:100px;
$white:white;

#wrap{
    width: $w;
    height: $w;
    background-color: $bc;
    div{
        .font1,.font2,.font3{
            font-size: $fs;
            color: $white;
            &:hover{
                color: $c;
            }
        }
    }
}

5. 混入，也就是定义一个’函数‘使用

• 使用@mixin定义
• 使用@include使用
• 示例：

$c:red;
$bc:pink;
$w:500px;
$fs:100px;
$white:white;

@mixin border{
    border: 1px solid #000;
    border-radius: 10px;
}
#wrap{
    width: $w;
    height: $w;
    background-color: $bc;
    @include border;
    div{
        .font1,.font2,.font3{
            font-size: $fs;
            color: $white;
            &:hover{
                color: $c;
            }
        }
    }
}

6. 参数默认值，在不传参情况下，使用默认值

$c:red;
$bc:pink;
$w:500px;
$fs:100px;
$white:white;

@mixin border{
    border: 1px solid #000;
    border-radius: 10px;
}
/*如果不传值会启用括号里的默认值*/
@mixin my_box($w:100px,$h:100px,$bc:red) {
    width: $w;
    height: $h;
    background-color: $bc;
}
#wrap{
    width: $w;
    height: $w;
    background-color: $bc;
    @include border;
    .box1{
    	/*宽高都是100，颜色红色*/
        @include my_box()
    }
    .box2{
    	/*宽高都是200，颜色蓝色*/
        @include my_box(200px,200px ,blue )
    }

7. 继承@extend

$c:red;
$bc:pink;
$w:500px;
$fs:100px;
$white:white;

@mixin border{
    border: 1px solid #000;
    border-radius: 10px;
}
@mixin my_box($w:100px,$h:100px,$bc:red) {
    width: $w;
    height: $h;
    background-color: $bc;
}
#wrap{
    width: $w;
    height: $w;
    background-color: $bc;
    @include border;
    .box1{
        @include my_box()
    }
    /*宽高都为100的红色盒子*/
   
    .box2{
        @extend .box1;
        border-radius: 50%;
    }
    /*他会继承.box1属性，并且他还有自己属性，会变成一个圆*/
}

8. 注释（有三种）

• //普通注释，在编译时会被过滤
• /在编译时，会一起编译过去/
• /？强力注释，不仅在会被编译过去，压缩文件时候也在/

9. 导入文件：可以创建个文件夹写入样式，别的文件需要时引入就行
   mixin.scss文件中写入

$w=100px;
@mixin mybox{
	heigth:100px;
	background-color:pink;

index.scss文件导入

@import 'mixin.scss'
.box{
	width:$w;
	@extend mybox;
}	

10. 条件@if如果不是false和null才会执行

$c:red;
$bc:pink;
$w:500px;
$fs:100px;
$white:white;

@mixin border{
    border: 1px solid #000;
    border-radius: 10px;
}
@mixin my_box($w:100px,$h:100px,$bc:red) {
    width: $w;
    height: $h;
    background-color: $bc;
}
#wrap{
    width: $w;
    height: $w;
    background-color: $bc;
    @include border;
    .box1{
        @include my_box()
    }
    .box2{
        @extend .box1;
        /*只有在$W大于400px才会执行*/
        @if($w>400px){border-radius: 50%;}
    }
}

11. 循环

• @for $i from 1 through 3从1到3包含这两个数字

@for $i from 1 through 3{
    .box#{$i}{
        width: 100px*$i;
        height: 100px*$i;
        background-color: skyblue;
    }
}

• @for $var from 1 to 3从1到3，不包含3

##示例：按钮制作

1. 效果
   

2. 代码：scss部分

@mixin my_button($w:100px,$h:50px,$br:10px,$bc:white,$c:white,$hbc:red,$hc:red) {
    width: $w;
    height: $h;
    border-radius: $br;
    color:$c;
    background-color: $bc;
    &:hover{
        color:$hc ;
        background-color: $hbc;
    }
    margin-top: 100px;
    margin-left: 100px;
}
.btn1{
    @include my_button($c:black,$bc:white,$hbc:white, $hc:rgb(27, 210, 173))
}
.btn2{
    @include my_button($bc:blue,$hbc:rgb(148, 148, 213), $hc:white)
}
.btn3{
    @include my_button($bc:green,$hbc:rgb(159, 229, 159), $hc:white)
}
.btn4{
    @include my_button($bc:red,$hbc:rgb(230, 100, 100), $hc:blue)
}