CSS预处理器
概念
CSS预处理器时CSS扩展语言，他让CSS可以像编程方式来进行编写，无需考虑浏览器兼容性问题
SASS预处理框架
CSS预处理器主要有三款
- less
- stylus
- sass(两个版本scss和sass)
安装sass环境
- 推荐使用node中的npm工具直接安装
- npm i sass -g(因为属于工具推荐全局安装)
编译SASS
- sass有两个版本文件也就有了两种后缀
- 文件名.sass
- 文件名.scss他在文件中有了{}与：更符合CSS编写习惯推荐使用
- 转义成.css文件
- 浏览器只能识别三种文件HTML，CSS，JS
- sass 文件名.scss 文件名.css
- 执行指令时如果没有对应css文件会自动创建一个
实时编译
- 实时编译就是随着你文件修改，自动从新编译成CSS文件
- 实时监控index.scss文件自动编译成index.css文件
- 指令：sass --watch index.scss:index.css
- 实时监控目录指令：sass --watch sass:css
sass语法
- 变量用$定义
$c:red;
/*全局变量*/
h1{
color:$c;
}
h1{
$w:100px;
/*私有变量*/
font-size: $w;
}
效果大小为100px的红色字
- 嵌套
$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;
}
}
}
- 嵌套中的&,表示当前元素
$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;
}
}
}
}
- 群组嵌套
$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;
}
}
}
}
- 混入，也就是定义一个’函数‘使用
- 使用@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;
}
}
}
}
- 参数默认值，在不传参情况下，使用默认值
$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 )
}
- 继承@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属性，并且他还有自己属性，会变成一个圆*/
}
- 注释（有三种）
- //普通注释，在编译时会被过滤
- /在编译时，会一起编译过去/
- /？强力注释，不仅在会被编译过去，压缩文件时候也在/
- 导入文件：可以创建个文件夹写入样式，别的文件需要时引入就行
mixin.scss文件中写入
$w=100px;
@mixin mybox{
heigth:100px;
background-color:pink;
index.scss文件导入
@import 'mixin.scss'
.box{
width:$w;
@extend mybox;
}
- 条件@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%;}
}
}
- 循环
- @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
##示例：按钮制作
-
效果
-
代码：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)
}