Why Scss

CSS不是一種編程語言，它只是個配置文件，并沒有生命。但我等大程序 怎么能容忍自己寫出來的東西不能動態(tài)變化，不能封裝繼承，不能xxoo呢，于是就有了css預(yù)處理的概念。即，寫是一套，用是一套。Scss是css預(yù)處理的一個選擇，它依托于Ruby，算是逼格比較高的。相似的還有Less等，語言優(yōu)劣之爭意義不大，用好一個其他也是大同小異。

安裝

Mac上自帶Ruby，直接運(yùn)行：

gem install sass

安裝對應(yīng)模塊，然后可以使用：

sass --watch style.scss:style.css

命令來監(jiān)視style.scss，當(dāng)它有更改時，會自動編譯成style.css。

友情提示： 我運(yùn)行g(shù)em時完全不動，還以為是掉網(wǎng)了。后來聽說是我大GFW威武，可以將源更改為x寶的服務(wù)器來解決：

$ gem sources -l$ gem sources --remove https://rubygems.org/ $ gem sources -a http://ruby.taobao.org/$ gem sources -l//然后我順手更新了一下Ruby的版本$ sudo gem update --system 

經(jīng)過上面的折騰，順利安裝sass

常用語法

變量

//定義$magin : 30px; //px$blue : #1875e7; //color$side : left; //str Usage: boder-#{$side}-radius

所有的數(shù)字類型的變量都可以進(jìn)行相應(yīng)的計(jì)算。

嵌套

nav { ul {...} border : { //注意冒號 相當(dāng)于樹形屬性 會編譯成 border-color:red color : red; } a { &:hover { color :$blue;} //&表示引用上層 會編譯成 a:hover{...} }} 

注釋

標(biāo)準(zhǔn)的CSS注釋 /* comment */ ，會保留到編譯后的文件。

單行注釋 // comment，只保留在SASS源文件中，編譯后被省略。

在/*后面加一個感嘆號，表示這是"重要注釋"。即使是壓縮模式編譯，也會保留這行注釋，通常可以用于聲明版權(quán)信息。

繼承

使用@extend可以繼承相應(yīng)的css:

.class1 { border:1px solid #ddd;}.class2 { @extend .class1; border-color: green;}

寫的時候要注意順序，編譯時，css是不會調(diào)順序的，誰先誰后得想好了。

Mixin

這個是一個函數(shù)與宏的私生子。實(shí)現(xiàn)像函數(shù)，使用像宏。關(guān)鍵詞為@mixin和@include

@mixin left($color, $value:10px) { color:$color; margin-left:$value;}.mydiv { @include left($blue,15px);}

顏色處理函數(shù)

lighten(#cc3, 10%) // #d6d65cdarken(#cc3, 10%) // #a3a329grayscale(#cc3) // #808080complement(#cc3) // #33c$linkColor: #08c;a { text-decoration:none; color:$linkColor; &:hover{ color:darken($linkColor,10%); }}

用這個方法就能制作一個鏈接變灰的效果

引入文件

@import "style2.css";

邏輯編譯

想要真正的動起來，就得有判斷啦，循環(huán)啦常規(guī)流程函數(shù)。

@if可一個條件單獨(dú)使用，也可以和@else結(jié)合多條件使用

$type: monster;p { @if $type == ocean { color: blue; } @else if $type == matador { color: red; } @else if $type == monster { color: green; } @else { color: black; }}

for循環(huán)有兩種形式，分別為：@for $var from through 和 @for $var from to 。$i表示變量，start表示起始值，end表示結(jié)束值，這兩個的區(qū)別是關(guān)鍵字through表示包括end這個數(shù)，而to則不包括end這個數(shù)。

@for $i from 1 through 3 { .item-#{$i} { width: 2em * $i; }}

each語法為:@each $var in 。其中$var表示變量，而list和map表示list類型數(shù)據(jù)和map類型數(shù)據(jù)。

$animal-list: puma, sea-slug, egret, salamander;@each $animal in $animal-list { .#{$animal}-icon { background-image: url('/images/#{$animal}.png'); }}$headings: (h1: 2em, h2: 1.5em, h3: 1.2em);@each $header, $size in $headings { #{$header} { font-size: $size; }}

sublime 分頁

其實(shí)這個也不能算是Scss的知識了，只不過是用到它更方便一些。Sublime可以左右分屏，我們可以將源文件放在左側(cè)的窗口中編譯后的放在右側(cè)，方便我們做檢查。Mac上的快捷鍵比較變態(tài):

cmd+option+ctrl+2 

左右移動使用

cmd+shift+[ 

如果你覺得這篇文章對你有幫助，可以順手點(diǎn)個頂，不但不會喜當(dāng)?shù)€能讓更多人能看到它...

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com