一. 基础
1.数据类型
SassScript 支持 6 种主要的数据类型:
-
数字,1, 2, 13, 10px
-
字符串,有引号字符串与无引号字符串,"foo", 'bar', baz
-
颜色,blue, #04a3f9, rgba(255,0,0,0.5)
-
布尔型,true, false
-
空值,null
-
数组 (list),用空格或逗号作分隔符,1.5em 1em 0 2em, Helvetica, Arial, sans-serif maps, 相当于 JavaScript 的 object,(key1: value1, key2: value2)
#{}
将带引号的字符串转化为无引号字符串
@mixin B($selector) {
#{$selector} {
color: red;
}
}
@include B('.header');
2.变量
通常在项目中会建立variable.scss用来存储一些全局变量
/*普通变量*/
$g-primary: #409eff;
/*解构*/
$values: center, center;
@include df($values...) => @include df(center, center);
3.占位符
不同于变量,占位符可以预先写一些样式,只有在调用的时候才会生效
%mr5 {
margin-right:5px;
}
.header {
@extend %mr5;
}
=>
/*
.header {
margin-right:5px;
}
*/
4.属性嵌套
属性和
:
之间用分号隔开
background: {
color: #fff;
image: none;
}
border: 2upx solid #dcdfe6 {
radius: 8upx;
}
/* 不用分号隔开会报错 */
二. 运算
1. 除法
以下三种情况 / 将被视为除法运算符号:
-
如果值,或值的一部分,是变量或者函数的返回值
-
如果值被圆括号包裹
-
如果值是算数表达式的一部分
p { font: 10px/8px;
width/2; width: round(1.5)/2; height: (500px/2); margin-left: 5px + 8px/2px; }
三:宏定义@mixin
本质上就是函数实现样式复用
比如垂直居中
@mixin t-center {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
四. 带参数的mixin
假设封装一个flex样式
@mixin df($fd,$jc,$ai,$as){
display:flex;
flex-direction:$fd;
jusitify-content:$jc;
align-items:$ai;
align-self:$as;
}
本以为大功告成,可是会遇到这种情况
- 每次都要传一些不变的参数,很难受
可以设置默认参数
@mixin df($fd:row,$jc,$ai,$as){
display:flex;
flex-direction:$fd;
jusitify-content:$jc;
align-items:$ai;
align-self:$as;
}
- 不是每个参数我都需要,怎么办?
可以默认设置为null,不传入参数就不会显示
@mixin df($fd:row,$jc:null,$ai:null,$as:null){
display:flex;
flex-direction:$fd;
jusitify-content:$jc;
align-items:$ai;
align-self:$as;
}
- 传参顺序错了,容易会错误
我们可能会这样传参
@include df(center,center)
但有时候第一个设置默认值了,这种情况可以使用关键词传参
@include df($jc:center,$ai:center)
-
传入的某个参数是一组值怎么办,比如:flex
@mixin df(jc,as){ display:flex; flex-direction:jc; align-items:as; flex:xx;//?怎么传 }
可以使用
...
写在参数的后方
@mixin df($fd,$jc,$ai,$as,$flex...){
display:flex;
flex-direction:$fd;
jusitify-content:$jc;
align-items:$ai;
align-self:$as;
flex:$flex;
}
@include df($jc:center,$ai:center,$flex:1 auto 1)
其他
!default
可以在变量的结尾添加 !default 给一个未通过 !default 声明赋值的变量赋值,此时,如果变量已经被赋值,不会再被重新赋值,但是如果变量还没有被赋值,则会被赋予新的值。
$content: "First content";
$content: "Second content?" !default;
$new_content: "First time reference" !default;
#main {
content: $content;
new-content: $new_content;
}
编译为
#main {
content: "First content";
new-content: "First time reference";
}
@extend
用来扩展选择器或占位符。
.df {
display:flex
}
.header {
@extend .df;
}
=>
/*
.header {
display:flex
}
*/
@at-root
@at-root 从字面上解释就是跳出根元素。当你选择器嵌套多层之后,想让某个选择器跳出,此时就可以使用 @at-root。
.wrapper {
width:100%;
height:100%;
@at-root .active{
color:red
}
}
=>
/*
.wrapper {
width:100%;
height:100%;
}
.active{
color:red
}
*/
@content
@for
@for 指令包含两种格式:
@for $var from <start> through <end>
或者@for $var from <start> to <end>
,区别在于 through 与 to 的含义:当使用 through 时,条件范围包含 与 的值,而使用 to 时条件范围只包含 的值不包含 的值。另外,$var
可以是任何变量,比如 $i;<start>
和<end>
必须是整数值。
以前要这么写
.wes {
/* 多出部分用省略号表示 , 用于一行 */
overflow:hidden;
word-wrap:normal;
white-space:nowrap;
text-overflow:ellipsis;
}
.wes-2 {
/* 适用于webkit内核和移动端 */
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
.wes-3 {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}
.wes-4 {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4;
overflow: hidden;
}
现在只需要
@for $i from 1 through 4 {
.wes-#{$i} {
overflow: hidden;
@if ($i==1) {
word-wrap: normal;
white-space: nowrap;
text-overflow: ellipsis;
} @else {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: $i;
}
}
}
对象操作
(key:value)
以前这么写
h1 {
font-size: 2em; }
h2 {
font-size: 1.5em; }
h3 {
font-size: 1.2em; }
现在只需要
@each $header, $size in (h1: 2em, h2: 1.5em, h3: 1.2em) {
#{$header} {
font-size: $size;
}
}