Sass是为了让我们更优雅地写CSS,可以让我们使用编程语言中的特性来写CSS
浏览器不能识别Sass,写好的Sass需要编译成CSS
vscode使用插件easy sass。
sass官网:https://www.sass.hk/
类似Sass的CSS预编译语言还有:
- Less
- Stylus
- Sass
在html中使用时引用.css文件或.min.css文件
Sass写法:
文件后缀:.scss
例:$fs:10px;
$声明变量
fs:变量名;
10px:变量值
使用时需要带上$符号
.css与.min.css是插件帮我们生成的css文件,两者区别在于压缩与否。
嵌套
Sass允许嵌套
.father{
width: 200px;
height: 200px;
background-color: gold;
.son{
width: 100px;
height: 100px;
background-color: skyblue;
}
}
hover效果写法:
div{
width: 100px;
height: 100px;
background: skyblue;
// &表示上面的div
&:hover{
background: gold;
}
}
还有背景可以酱紫写:
div{
// 设置个对照
// background-image: url("");
// background-repeat: no-repeat;
// background-size: 50% 50%;
// background-position: 0 0;
background: {
image: url("");
repeat: no-repeat;
size:50% 50%;
position: 0 0;
};
}
变量作用域问题
第一种情况:
$color:red; //全局变量
.box{
$color:blue; //修改了全局变量的值
color:$color; //blue
.item{
color:$color; //blue
}
}
第二种情况:
.box{
$color:red; //局部变量
color:$color;
}
.inner-box{
color:$color; //报错,上面的局部变量不可用
}
第三种情况(较特殊):
.box{
$color:red; //局部变量
color:$color; //red
.inner-box-1{
$color:blue; //可以理解为修改了上面的$color变量
color:$color; //blue
}
.inner-box-2{
color:$color; //blue
}
}
第四种情况(与第三种情况形成对照):
$color:blue; //全局变量
.box{
color:$color; //blue
.inner-box-1{
$color:red;
color:$color; //red
}
.inner-box-2{
color:$color; //blue
}
}
混合
某些属性有时为了兼容性需要写多遍,可以使用SASS中的混合进行简化
定义混合
@mixin name {
}
使用混合
@include name
例:
一、
//定义混合
@mixin box-shadow($shadow) {
-webkit-box-shadow: $shadow;
-moz-box-shadow: $shadow;
-o-box-shadow: $shadow;
-ms-box-shadow: $shadow;
box-shadow: $shadow;
}
div{
width: 200px;
height: 200px;
border: 1px solid red;
@include box-shadow(-5px 0 5px orange) //使用混合
}
二、传多个值
再来举个栗子:
html:
<button class="btn-success">成功</button>
<button class="btn-warning">警告</button>
sass:
@mixin btn-bg-color($btnClass,$bgColor) {
.btn-#{$btnClass}{
background-color: $bgColor;
}
}
@include btn-bg-color("warning",green)
对应的css:
.btn-warning {
background-color: green;
}
还是栗子:
让盒子旋转45deg,考虑兼容性
@mixin transform($deg:45deg) {
-webkit-transform:rotate($deg);
-moz-transform:rotate($deg);
-o-transform:rotate($deg);
-ms-transform:rotate($deg);
transform:rotate($deg);
}
.box1{
@include transform(); //默认45deg
}
.box2{
@include transform(90deg);
}
继承(@extend)
例:
.box{
width: 100px;
height: 100px;
}
.box-1{
@extend .box; //继承.box中的样式
}
对应css:
.box, .box-1 {
width: 100px;
height: 100px;
}
换一种写法
//.box是一个box类
//%box不是类,仅封装了共有的样式
%box{
width: 100px;
height: 100px;
}
.box-1{
@extend %box; //继承.box中的样式
}
对应css:
.box-1 {
width: 100px;
height: 100px;
}
运算
$sidebarWidth:60px;
$contentWidth:200px;
.box{
//加法
// width: 10px + 10px; // 可以 20px
// width: $sidebarWidth + $contentWidth; //可以 260px
//除法(分情况较多)
// width: 300px / 2; //不可以
// width: (300px / 2); //可以
// width: 300px / 2 + 1px; //可以
// width: $sidebarWidth / 2; //可以
// 除余
// width: 50px % 3; //可以
}
//字符串拼接
p::before{
// content: "Foo " + Bar; //可以 "Foo Bar"
// content: Bar + " Foo"; //不可以 Bar Foo
}
流程控制
if…else
$textType:"large";
span{
@if $textType == "large"{
font-size: 40px;
}@else if($textType == "middle"){
font-size: 30px;
}@else{
font-size: 20px;
}
}
for
@for $i from 1 through 3{
.item-#{$i}{
width: 5px * $i;
}
}
对应css
.item-1 {
width: 5px;
}
.item-2 {
width: 10px;
}
.item-3 {
width: 15px;
}
while
$i: 6;
@while $i>0 {
.item-#{$i}{
width:5px * $i;
}
$i: $i - 2;
}
对应css
.item-6 {
width: 30px;
}
.item-4 {
width: 20px;
}
.item-2 {
width: 10px;
}
数组
$list: dog, pig, cat; //数组
//循环
@each $item in $list {
.#{$item}-icon{
width: 100px;
}
}
对应css
.dog-icon {
width: 100px;
}
.pig-icon {
width: 100px;
}
.cat-icon {
width: 100px;
}
再举个栗子
@each $animal, $color in (cat,orange),
(dog,black),
(pig,pink),{
.#{$animal}-icon{
color: $color;
background-image: url(./img/#{$animal}.png);
}
}
对应css
.cat-icon {
color: orange;
background-image: url(./img/cat.png);
}
.dog-icon {
color: black;
background-image: url(./img/dog.png);
}
.pig-icon {
color: pink;
background-image: url(./img/pig.png);
}