Sass CSS擴充套件語言

sass世界上最成熟、最穩定、最強大的專業級css擴充套件語言！

sass 是一款強化 css 的輔助工具，它在 css 語法的基礎上增加了變數 (variables)、巢狀 (nested rules)、混合 (mixins)、匯入 (inline imports) 等高階功能，這些拓展令 css 更加強大與優雅。使用 sass 以及 sass 的樣式庫（如 compass）有助於更好地組織管理樣式檔案，以及更高效地開發專案

1.將sass編譯成css

sass sass/style.scss:css/style.css

2.自動編譯sass

sass --watch sass:css
>>> sass is watching for changes. press ctrl-c to stop.

3.修改編譯輸出的css格式:nested預設樣式

sass --watch sass:css --style nested/compact/compressed/expanded

4..scss和.sass

.sass縮排式

5.變數

6.巢狀

巢狀時呼叫父選擇器&

巢狀屬性font

7.混合-mixins

@mixin alert($text-color,$background) 
}.alert-warning

轉化之後的css檔案

.alert-warning

.alert-warning a

8.繼承/擴充套件-inheritance

.alert

.alert a

.alert-info

css樣式檔案

.alert, .alert-info

.alert a, .alert-info a

.alert-info

9.@import與partials

partials的檔名:sass/_base.scss

在sass/style.scss中匯入:

@import "base";

10.interpolation插入值

$version:"0.0.1";
/*專案版本是:#*/
$name: "info";
$attr: "border";
.alert-# -color:#ccc;
}---------
.alert-info

11.控制指令control directives

@if @for @for @each @while

@if $var==true

$type: monster;
p  @else if $type == matador  @else if $type == monster  @else 
}

@for $var from through，或者@for $var from to，區別在於through與to的含義：當使用through時，條件範圍包含與的值，而使用to時條件範圍只包含的值不包含的值。另外，$var可以是任何變數，比如$i；和必須是整數值。

@for $i from 1 through 3

}/*包含3*/

---------

.item-1

.item-2

.item-3

@each $var in $list

$icons: success error warning;
@each $icon in $icons  .png);
}}

@while指令重複輸出格式直到表示式返回結果為false。這樣可以實現比@for更複雜的迴圈，只是很少會用到。

$i: 6;
@while $i > 0  
$i: $i - 2;
}-----------
.item-6 
.item-4 
.item-2

12.自定義函式

$colors:(light:#fff,dark:#000);
@function color($key)  這個key";
}	@return map-get($colors,$key);
}body

Sass CSS擴充套件語言

3 SASS CSS的功能擴充套件

Python C語言擴充套件

C語言擴充套件Python

Sass CSS擴充套件語言

3 SASS CSS的功能擴充套件

Python C語言擴充套件

C語言擴充套件Python

相關推薦