Sass學習筆記

字串函式

數字函式

列表函式

introspection函式

miscellaneous函式（三元表示式）

maprgb顏色函式

hsl函式 (還是顏色)

opacity函式

$swap
: 3;
$swap
: 2 !default;

在變數後加乙個 !default

我們可以通過在引數中傳預設值

@mixin
border-radius
($radius
:5px)

button

我們可以給引數傳值

//scss .btn .btn-primary .btn-second

sass 中的佔位符 %placeholder 功能是乙個很強大，很實用的乙個功能.他可以取代以前 css 中的基類造成的**冗餘的情形。因為 %placeholder 宣告的**，如果不被 @extend 呼叫的話，不會產生任何**。

//scss
%mt5
%pt5
.btn
.block
}

當我們不繼承 %mt5 %pt5 時，那麼這兩個**塊不會編譯到css中，只有@extend呼叫才會產生**

@mixin
generate-sizes
($class, $small, $medium, $big)
-small
.#-medium
.#-big
}@include
generate-sizes
("header-text", 12px, 20px, 40px)
;

使用 #{} 來拼接

//scss
@mixin
blockorhidden
($boolean
:true)
";display
: block;
}@else
";display
: none;}}
.block
.hidden

@debug：如果你在命令列中使用命令生成css檔案，命令列中就會列印debug的資訊

在製作網格系統的時候，大家應該對 .col1~.col12 這樣的印象較深。在 css 中你需要乙個乙個去書寫，但在 sass 中，可以使用 @for 迴圈來完成。在 sass 的 @for 迴圈中有兩種方式：

@for $i from through @for $i from to

這兩個的區別是關鍵字 through 表示包括 end 這個數，而 to 則不包括 end 這個數。

看如下**

//scss 
$grid-prefix
: span !default;
$grid-width
: 60px !default;
$grid-gutter
: 20px !default;
%grid
@for $i from 1 through 12
#}

//scss
$types
: 4;
$type-width
: 20px;
@while $types > 0
$types
: $types - 1;
}

遍歷列表

@each $var in

$list
: adam john wynn mason kuroir;//$list 就是乙個列表
@mixin author-images
.png") no-repeat;}}
}.author-bio

unquote() 函式主要是用來刪除乙個字串中的引號，如果這個字串沒有帶有引號，將返回原始的字串。

quote() 函式剛好與 unquote() 函式功能相反，主要用來給字串新增引號。如果字串，自身帶有引號會統一換成雙引號「」

to-upper-case() 函式將字串小寫字母轉換成大寫字母

to-lower-case() 函式與 to-upper-case() 剛好相反，將字串轉換成小寫字母

>> comparable
(2px,1%)
false
>> comparable
(2px,1em)
false
>> comparable
(2rem,1em)
false
>> comparable
(2px,1cm)
true
>> comparable
(2px,1mm)
true

if
($condition,$if-true,$if-false)

基本使用

$map:(
$key1
: value1,
$key2
: value2,
$key3
: value3
)

可巢狀

$default-color
: #fff !default;
$primary-color
: #22ae39 !default;
$color:(
default
: #fff,
primary
: #22ae39,
negative
: #d9534f
);

高階技巧，背景主題

$theme-color:(
default:(
bgcolor
: #fff,
text-color
: #444,
link-color
: #39f
),primary:(
bgcolor
: #000,
text-color
:#fff,
link-color
: #93f
),negative:(
bgcolor
: #f36,
text-color
: #fefefe,
link-color
: #d4e
));

>> alpha
(red)
1>> alpha
(rgba
(red,.8)
)0.8
>> opacity
(red)
1>> opacity
(rgba
(red,.8)
)0.8

Sass學習筆記

安裝 2.開啟ruby的命令視窗 start command prompt with ruby 輸入gem install sass gem install sass pre 要安裝beta版本的 gem update sass 公升級sass vsass hgit安裝 git clone git ...

Sass學習筆記

1.全域性變數p background color color red span div2.default 第二種，使用前面定義的值 color red 變數申明帶有 default，但是前面還有這個變數的申明 color blue default p3.變數用包裹 btnclass btn de...

Sass學習筆記。

定義 css預處理器定義了一種新的語言，其基本思想是，用一種專門的程式語言，為css增加了一些程式設計的特性，將css作為目標生成檔案，然後開發者就只要使用這種語言進行編碼工作。採用ruby語言編寫的一款css預處理語言副檔名 sass 嚴格的縮排式語法 scss 與平時css語法書寫類似 scs...

Sass學習筆記

Sass學習筆記

Sass學習筆記

Sass學習筆記。

相關推薦