您當前位置：首頁 > web前端 > htmlcss > 使用 sass/scss 編寫CSS 快速上手

使用 sass/scss 編寫CSS 快速上手

來源：程序員人生發布時間：2015-04-23 08:39:07 閱讀次數：4540次

文章作者：松陽

本文出自阿修羅道，制止用于商業用處，轉載請注明出處。

原文鏈接：http://blog.csdn.net/fansongy/article/details/44964187

Why Scss

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

安裝

Mac上自帶Ruby，直接運行：

gem install sass

安裝對應模塊，然后可使用：

sass --watch style.scss:style.css

命令來監視style.scss，當它有更改時，會自動編譯成style.css。

友誼提示：我運行gem時完全不動，還以為是掉網了。后來聽說是我大GFW威武，可以將源更改成x寶的服務器來解決：

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

經過上面的折騰，順利安裝sass

經常使用語法

變量

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

所有的數字類型的變量都可以進行相應的計算。

嵌套

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

注釋

標準的CSS注釋 /* comment */ ，會保存到編譯后的文件。

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

在/*后面加1個感嘆號，表示這是"重要注釋"。即便是緊縮模式編譯，也會保存這行注釋，通常可以用于聲明版權信息。

繼承

使用@extend可以繼承相應的css:

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

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

Mixin

這個是1個函數與宏的私生子。實現像函數，使用像宏。關鍵詞為@mixin和@include

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

色彩處理函數

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

用這個方法就可以制作1個鏈接變灰的效果

引入文件

@import "style2.css";

邏輯編譯

想要真實的動起來，就得有判斷啦，循環啦常規流程函數。

@if可1個條件單獨使用，也能夠和@else結合多條件使用

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

for循環有兩種情勢，分別為：@for $var from <start> through <end> 和 @for $var from <start> to <end>。$i表示變量，start表示起始值，end表示結束值，這兩個的區分是關鍵字through表示包括end這個數，而to則不包括end這個數。

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

each語法為:@each $var in <list or map>。其中$var表示變量，而list和map表示list類型數據和map類型數據。

$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; } }