1、变量
常规变量
用!global将局部变量变成全局变量
//全局变量
$a-color:blue;//全局变量
.box{
color: $a-color
}
//局部变量
.child{
$a-color: red;//局部变量
color: $a-color
}
//将局部变量变成全局变量
.box2{
$c-color:yellow !global;
}
.box3{
color: $c-color
}
//全局变量
$a-color:blue;//全局变量
.box{
color: $a-color
}
//局部变量
.child{
$a-color: red;//局部变量
color: $a-color
}
//将局部变量变成全局变量
.box2{
$c-color:yellow !global;
}
.box3{
color: $c-color
}
复制代码
特殊变量
当变量是css属性的一部分,或者变量是css属性的时候,必须要遵循 #{变量名}的格式
//注意,当是css属性,或者是css属性的一部分,请必须遵循
//#{$变量名}格式
//当是css属性的一部分
$side:top;
.box{
border-#{$side}:1px solid #ccc;
}
//当是css属性的时候
$bordertop:border-top;
.box2{
margin-#{$side}: 12px;
#{$bordertop}:18px solid #ccc
}
复制代码
2、 嵌套
常规嵌套
//嵌套,将子选择器的样式,嵌套在父选择器的样式中
ul{
font-size: 12px;
li{
color: yellowgreen;
a{
text-align: center
}
}
}
复制代码
嵌套中的父级选择器 &
//嵌套,在子选择器中,有时候我们需要使用父元素的选择器,用&符号
ul{
li{
float:left;
}
&::after{
content: "";
display: block;
clear: both;
}
}
复制代码
嵌套,跳出选择器嵌套
//用@at-root跳出选择器
div{
width: 100px;
height: 100px;
background: red;
position: relative;
animation:mymove 5s infinite;
@at-root{
@+ mymove {
from{left: 0px;}
to{left: 200px;}
}
}
}
复制代码
3、运算
.box{
height: 10px + 20px;//加
width:40px-10;//减
margin-left: 10px * 2;//乘
padding-left: (75rem/10);//除法要加上括号
font-family: 'Courier'+' New';//字符串的加
position: relative;
top: 1em+(2em-1em);//带括号运算
}
复制代码
4、条件语句
//条件语句
$string:just-test;
$flag:null;
body{
@if($string==just){
color: red
}
@else if($string==test){
color:yellow
}
@else{
color:blueviolet
}
}
复制代码
5、循环语句
@for 变量 from 包含end 变量从start到end @for 变量 to 不包含end 变量从start到end(不包括end)
@for $i from 1 through 3 {
.item-#{$i} { width: 2em * $i; }
}
@for $test from 1 to 3{
.new#{$test}-test{
color: yellow
}
}
复制代码
@each $var in one,two,there{
.#{$var}-icon{
background:url(image/#{$var}.png);
}
}
复制代码
6、混合Mixin
不带参数的Mixin(把mixin看做是function更容易理解)
@mixin win {
position:fixed;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
z-index: 1;
background:rgba(0, 0, 0, .5)
}
.box{
@include win()
}
复制代码
@mixin font($size){
font-size: $size+px;
color: blue
}
.box{
@include font(15)
}
复制代码
7、函数指令
自定义函数,@function @return
//自定义函数
@function box-width($param){
@return $param/10+rem;
}
.box{ width: box-width(750)}
复制代码
继承
让一个选择器,继承另一个选择器的所有样式
//继承,直接在@extend的后面加上选择器的名称
h1{
background: #ccc;
font-size: 15px;
width: 50px;
}
.box{ @extend h1}
复制代码
继承(占位选择器%)
当我们在开发项目的时候,我们可能预设了很多样式,有些我们使用了,有些我们可能都没有用到,但是那些没有用到的样式,我们不想在css中解析出来,这时我们可以用站位选择器去预设我们需要的样式,当需要使用的时候直接@extend用就可以了。
//占位选择器
%red{
border: 1px solid red;
color: red;
background: red;
}
.box{
@extend %red
}
复制代码
8、导入
当我们在拿到一份设计稿的时候,我们一般会想到将页面拆分成多个模块,比如头部,中间部分,尾部。在sass中,我们可以实现css的模块化编码,这时,我们只需要将多个模块统一用@import的方式引入到主模块中即可。 _head.scss
header{background: red}
复制代码
_main.scss
main{background:blue}
复制代码
_foot.scss
footer{ background: green}
复制代码
style.scss
//引入各模块
@import "_head";
@import "_main";
@import "_foot";
.myself{ background: #ccc}
复制代码
扩展
在vscode中装插件。Live Sass Compiler。将Sass转成css