一文學會sass常用語法

專案一直用的scss,但是一直沒有好好學些sass的用法,一直用的只有定義變數和選擇器巢狀等寥寥幾個功能(捂臉).後來仔細看了一下sass中文網,感覺自己錯過了乙個世界…

2.1 屬性巢狀

帶有相同字首的css屬性可以用巢狀的規則書寫

.text-item

text:
}// 也可以給字首本身新增屬性
.text-container
}

使用${}可以在選擇器或屬性名中使用變數

例如

$textvar:item

$widthname:width
.text-#
:10px;
}

2.3 數值運算

包括(+, -, *, /, %)

.text-item

.text-item

值是算數表示式的一部分,如1px+10px/2px;

運算表示式用()包裹,如(10px/2px);

運算表示式中使用了變數,如$width/2

如果使用了變數,但是仍然希望不進行運算處理,可以使用#{},如

# / 2

# / #

@meida在原來css的功能上擴充套件了可以在選擇器中巢狀書寫@media,不會打亂正常的書寫流程

$mediadevice

:screen;
.text-item
}

.text-item

@media screen
}

@extend可以在乙個選擇器上延伸拓展出其他選擇器的樣式

例如

.text1

.text2
.text-item

.text1, .text-item

.text2, .text-item
.text-item

%text

.text-item

.text-item

.text-item

/* 可以 */

@media screen
.text-item
}/* 報錯 */
%text
@media screen
}/* 可以 */
@media screen
}@media screen
}

1.@if

@if指令後接乙個判斷表示式,如果表示式不為false或者null,則編譯後面的{}中的內容

$text

:text1;
.text-item
@else if $text==text1
@else
}

.text-item

@for 指令可以在限制的範圍內重複輸出格式，每次按要求（變數的值）對輸出結果做出變動,使用格式

@for $var from < start > through < end > : 包含start和end

@for $var from < start > to < end > : 包含start,不包含end

例如

@for $i from 1 through 3

px;}
}

.m-t-4

.m-t-8
/* 如果將through改為to,將不包含下面樣式 */
.m-t-12

@each 可以用於列表的迴圈輸出,表示式為 @each $i in < list >,如下

$animals

:bird,dog,cat;
@each $item in $animals
}

.item-bird

.item-dog
.item-cat

@each $item,$index in (bird,1),(dog,2)

}

$maplist

:(1:dog,2:cat,3:bird)
;@each $index,$item in $maplist
}

1.mixin

可以使用mixin定義重複使用的樣式,避免重複操作,使用是通過@include引入,用法如下,支援大部分sass語法

@mixin errtext

.text-item
/* 編譯之後 */
.text-item

很好理解,就是在使用@include引用的時候通過傳入特定的引數,生成相應的樣式

@mixin

btnstyle
($color,$width,$lineheight)
;.text-btn
/* 編譯之後 */
.text-btn

@mixin

btnstyle
($color
:red,$width
:200px,$lineheight
:20px)
;.text-btn
/* 編譯之後 */
.text-btn

@mixin

btnstyle
($color
:red,$width
:200px,$lineheight
:20px)
;.text-btn
/* 編譯之後 */
.text-btn

@mixin

boxshadow
($shadow...)
.text-item
/* 編譯之後 */
.text-item

@mixin

btnstyle
($color,$width,$height)
$style
:(red,100px,200px)
;.text-btn
/* 編譯之後 */
.text-btn

函式的存在是為了減少重複的表示式運算,函式的定義方式如下,引數的使用方法和mixin一樣

@function functionname(

$var1
...)

@function

getnum
($num)
.text-item
px;}
/* 編譯之後 */
.text-item

一文學會Rust

rust是什麼 rust 是乙個系統程式語言，它注重三個方面 安全，速度和併發性。特徵 1.沒有垃圾 機制，沒有執行時，效率超過c 直逼c語言 2.記憶體安全，併發安全，沒有空指標 3.極其豐富的生態 它是如何做到這些的？編譯時保證和對記憶體生命週期的明確控制。讓我們來談談rust中最重要的概念 所...

qmake常用語法一

關鍵字 注釋 包含檔案 平台巨集 作用域 一 注釋 用 注釋，表示到行尾均為注釋。二 include 包含別的檔案，例如 include xx.pri。類似於c 的 include。三 平台巨集 win32 macx unix linux g 等，分別對應於windows mac unix linu...

makefile常用語法講解一

1 make 是乙個解釋 makefile 中指令的命令工具。make 工具最主要也是最基本的功能就是通過 makefile 檔案來描述源程式之間的相互關係並自動維護編譯工作。而 makefile 檔案需要按照某種語法進行編寫，檔案中需要說明如何編譯各個原始檔並連線生成可執行檔案，並要求定義原始檔之...