1.資料型別
sassscript 支援 6 種主要的資料型別:
#{}
將帶引號的字串轉化為無引號字串
2. 變數:@mixin
b($selector) }
@includeb(
".header");
通常在專案中會建立variable.scss用來儲存一些全域性變數
3.佔位符//普通變數
$g-primary
:#409eff;
//解構
$values
: center,center;
@include df
($values...) => @include df
(center,center)
不同於變數,佔位符可以預先寫一些樣式,只有在呼叫的時候才會生效
4.屬性巢狀%mr5
.header
=>
/*.header
*/
屬性和:
之間用分號隔開
1. 除法background:
border: 2upx solid #dcdfe6
//不用分號隔開會報錯
以下三種情況 / 將被視為除法運算符號:
p
本質上就是函式實現樣式復用比如垂直居中
假設封裝乙個flex樣式@mixin t-center
本以為大功告成,可是會遇到這種情況@mixin
df($fd,$jc,$ai,$as)
可以設定預設引數
@mixin
df($fd
:row,$jc,$ai,$as)
可以預設設定為null,不傳入引數就不會顯示
@mixin
df($fd
:row,$jc
:null,$ai
:null,$as
:null)
@include df
($jc
:center,$ai
:center)
@mixin
df($fd,$jc,$ai,$as)
可以使用...
寫在引數的後方
@mixin
df($fd,$jc,$ai,$as,$flex...)
!default@include df
($jc
:center,$ai
:center,$flex
:1 auto 1)
可以在變數的結尾新增 !default 給乙個未通過 !default 宣告賦值的變數賦值,此時,如果變數已經被賦值,不會再被重新賦值,但是如果變數還沒有被賦值,則會被賦予新的值。
編譯為$content
:"first content"
;$content
:"second content?" !default;
$new_content
:"first time reference" !default;
#main
@extend#main
用來擴充套件選擇器或佔位符。
@at-root.df
.header
=>
/*.header
*/
@at-root 從字面上解釋就是跳出根元素。當你選擇器巢狀多層之後,想讓某個選擇器跳出,此時就可以使用 @at-root。
}=>
/* width:100%;
height:100%;
}.active
*/@content
@for
@for 指令包含兩種格式:以前要這麼寫@for $var from through
或者@for $var from to
,區別在於 through 與 to 的含義:當使用 through 時,條件範圍包含 與 的值,而使用 to 時條件範圍只包含 的值不包含 的值。另外,$var 可以是任何變數,比如 $i; 和 必須是整數值。
現在只需要.wes
.wes-2
.wes-3
.wes-4
@for $i from 1 through 4
@else
}}
(key:value)以前這麼寫
現在只需要h1
h2h3
@each $header, $size in (
h1: 2em, h2
: 1.5em, h3
: 1.2em)
}
Redis史上最全文章教程
文章 目錄簡單明瞭,突出主題,有思維導圖便於理解 這篇 文章就厲害了,主要以實戰為主,理論為輔,不過打賞碼還是很大 哈哈!這篇文章也是 學習難度最大的,如果沒有redis的理論知識沒有搞懂,你可能會一頭霧水,不過,多讀幾遍,還是能理解的 這篇文章是我第一次學習的時候 使用的,雖然是兩年前的了,但是還...
linux命令史上最全
關閉檔案 q 退出,沒動過檔案 w 儲存 wq 儲存並退出,q!不儲存並退出 w 強行儲存 開啟檔案 vi 開啟檔案,定位至最後一行 vi 開啟檔案,定位到 行 壓縮檔案命令 gzip 解壓檔案命令 gunzip 打包命令 tar cvf a.tar 打包進去的檔案,資料夾名 解包命令 tar xc...
史上最全講解 IOC
spring ioc自動注入 spring ioc掃瞄器 bean的作用域 bean的生命週期 通俗易懂的理解ioc 由於引進了中間位置的 第三方 也就是ioc容器,使得a b c d這4個物件沒有了耦合關係,齒輪之間的傳動全部依靠 第三方 了,全部物件的控制權全部上繳給 第三方 ioc容器,所以,...