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

來源：懂視網責編：小采時間：2020-11-27 16:03:54

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

使用sass/scss編寫CSS快速上手_html/css_WEB-ITnose:文章作者：松陽 Why Scss CSS不是一種編程語言，它只是個配置文件，并沒有生命。但我等大程序怎么能容忍自己寫出來的東西不能動態變化，不能封裝繼承，不能xxoo呢，于是就有了css預處理的概念。即，寫是一套，用是一套。Scss是

推薦度：

點擊下載本文 文檔為doc格式

導讀使用sass/scss編寫CSS快速上手_html/css_WEB-ITnose:文章作者：松陽 Why Scss CSS不是一種編程語言，它只是個配置文件，并沒有生命。但我等大程序怎么能容忍自己寫出來的東西不能動態變化，不能封裝繼承，不能xxoo呢，于是就有了css預處理的概念。即，寫是一套，用是一套。Scss是

文章作者：松陽

Why Scss

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

安裝

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//然后我順手更新了一下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源文件中，編譯后被省略。

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

繼承

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

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

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

Mixin

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

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

顏色處理函數

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";

邏輯編譯

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

@if可一個條件單獨使用，也可以和@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 through 和 @for $var from to 。$i表示變量，start表示起始值，end表示結束值，這兩個的區別是關鍵字through表示包括end這個數，而to則不包括end這個數。

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

each語法為:@each $var in 。其中$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; }}