- 变量
通过$符合去声明一个变量,通常存储css中要复用的样式,例如字体、颜色等。
Sass 变量使用 $ 符号:$variablename: value;
eg:
$global-color: #efefef;
$global-font-size: 14px;
- 嵌套
以嵌套的方式使用css
下面的例子,ul,li,a都被嵌套在nav下面,nav相当于父级,只有在nav下的ul,li,a才会具有定义的样式。
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li { display: inline-block; }
a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}
- 引入
使用@import可以导入其它文件等内容
Sass @import 指令语法如下:@import filename;
eg:
@import '../../assets/scss.scss';
分音(Partials) Sass Partials
如果你不希望将一个sass文件编译为css文件,可以在文件名的开头加一个下划线,这将告诉scaa不要将其编译到css。但是,在导入语句中我们不需要加下划线
Sass Partials 语法格式:_filename;
注意⚠️:请不要将带下划线与不带下划线的同名文件放在同一目录下,比如colors.scss与_colors.scss不能放置于同一目录下,否则,带下划线的文件将会被忽略。
可以嵌套引入
#main {
@import "example";
}
- scss作用域
<style lang='scss' scoped>
//变量
$color: rgb(5, 4, 4);
//引入:使用@import 文件路径 即可
@import '../../assets/scss.scss';
.scss{
color: $global-color; //@import引入的
ul{
font-size: 18px;
color: $color;
text-align: left;
}
h3{
$color: #b2b2b2; //只在h3内有效,局部作用域
color: $color;
}
}
</style >
scss中还可以使用!global来设置变量是全局的
$color: rgb(5, 4, 4) !global;
- 混入
通过@mixin定义混入
通过@include使用混入
定义一个混入,通过@mixin来定义
@mixin block{
property:value;
property:value;
}
eg:
@mixin block{
font-size: 12px;
color: skyblue;
text-align: right;
font-weight: 800;
}
使用混入,通过@include来使用
.selector{
@include name;
}
eg:
.selector{
@include block;
}
还可以通过mixin来传递参数让代码更灵活,该特性在添加浏览器前缀的时候非常有用。
//注意变量前要加上$
@mixin border-radius($radius){
border-radius: $radius;
-ms-border-radius: $radius;
-moz-border-radius: $radius;
-webkit-border-radius: $radius;
}
.box{
@include border-radius(10px);
}
当不能确定一个混入传入的参数有几个的时候,这时我们可以使用…来定义可变参数
例如,用于创建盒子阴影(box-shadow)的一个混入,可以传入任意数量的box-shadow作为参数
@mixin box-shadow($shadows...) {
-moz-box-shadow: $shadows;
-webkit-box-shadow: $shadows;
box-shadow: $shadows;
}
.shadows {
@include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);
}
- 继承
使用@extend在选择器之间复用css属性
例如,两个标题的大部分样式都一样,只是颜色有区别,这样定义一个公共的样式,然后在各自的样式里面继承公共的样式就可以了,而且在标签上写类名的时候也不用多个类选择器。
<h3 class="tit1">Sass 变量的作用域只能在当前的层级上有效果</h3>
<h3 class="tit2">SASS 可以通过@extend指令在选择器之间复用CSS属性</h3>
.tit{
font-size: 20px;
font-weight: 600;
line-height: 30px;
text-align: center
}
.tit1{
@extend .tit;
color: #aaa;
}
.tit2{
@extend .tit;
color: #ccc;
}
- 引用父级选择器
使用“&”
li{
background: #ececec;
&:hover{
background: #b2b2b2;
}
}
编译后的css文件中&将被替换成嵌套外层的父选择器,如果有多层嵌套,最外层的父选择器会一层一层往下传递。
//相当于:
li:hover{
background: #b2b2b2;
}
-
注释
/* */ 多行注释,会被完整输出到编译后的css
// 单行注释,不会被编译 -
循环
each循环
@each $item in $list { // 其中list是 数组 ,item是数组的每一项;
$i: index($list,$item) // index()函数,index(数组,每一项),返回对应这一项的索引。
.bg#{$i}{. //编译后.bg1,.bg2,......
background:$item;
}
}
扩展
当使用element UI等组件库时,我们通常需要改变其原有组件样式,可以选择使用 >>> 操作符。
有些像sass之类的预处理器无法正常解析 >>> ,这种情况下可以使用 /deep/ 或者 ::v-deep ,两者都是 >>> 别名,同样可以正常工作。
<style lang="scss" scoped>
.button-box{
::v-deep .van-overlay{
z-index: 100;
}
}
</style>