一、介绍
less、sass、scss都是css预处理语言
区别:
1.sass版本3.0之后就是scss
2.sass没有{}和;并且有严格的缩进规范
3.scss和css的缩进规范是一致的
二、学习工具简单测试 East Scss
1.直接在VScode中下载插件East Scss,地址如下:
Easy Sass - Visual Studio Marketplace
2.scss和less的使用方法几乎一致,简单测试一下效果
(1)新建learn-scss文件夹,在learn-scss下新建一个index.html
(2)新建scss文件夹,里面新建一个 test.scss
vscode中East Scss这个插件会自动把.scss文件转成.css文件
(3)直接在html文件中引入使用,打开浏览器即可看到效果
三、Scss的语法
1、和less使用一致的嵌套语法
(1)在html文件中
<div class="test">
<div class="box">
盒子
</div>
</div>
(2)在.scss文件中
.test {
width: 200px;
height: 200px;
background-color: yellowgreen;
margin: 0 auto;
.box {
width: 100px;
height: 100px;
background-color: green;
text-align: center;
line-height: 100px;
margin: 0 auto;
transform: translateY(50%);
}
}
.scss文件被转成css文件后
最终效果
2.用&代表父选择器
比如:a标签的悬停效果
(1)在html文件中
<div class="test">
<div class="box">
<a href="">点我啊</a>
</div>
</div>
(2)在.scss文件中
.test {
width: 200px;
height: 200px;
background-color: yellowgreen;
margin: 0 auto;
.box {
width: 100px;
height: 100px;
background-color: green;
text-align: center;
line-height: 100px;
margin: 0 auto;
transform: translateY(50%);
a{
font-size: 25px;
&:hover{
color: red;
font-size: 16px;
}
}
}
}
3.用$
符号定义变量
4.使用mixins实现代码复用
定义的格式:
@mixin 名称 { 代码 }
适用的格式:
@include 名称
把前面的样式改造一下,如下:
$color:plum;
$border-width:400px;
@mixin box{
width: 100px;
height: 100px;
background-color: green;
}
.test {
width: $border-width;
height: 200px;
background-color: $color;
margin: 0 auto;
.box {
@include box;
text-align: center;
line-height: 100px;
margin: 0 auto;
transform: translateY(50%);
a{
font-size: 25px;
&:hover{
color: red;
font-size: 16px;
}
}
}
}
一个.scss文件就是一个模块,多个.scss文件之间相互引用,就能使用另一个.scss文件里面的变量