sass學習筆記

2021-09-24 06:43:45 字數 1605 閱讀 1002

參考文件

安裝ruby後安裝sass和compass。依賴ruby的rubygems系統,就是ruby的包管理系統

gem install sass

gem install compass

複製**

sass test.scss test.css

複製**

sass --style compressed test.sass test.css

複製**

$blue:#187ec7;//變數宣告

div複製**

.div 

}複製**

轉換為css為

.div

.div .div_children

複製**

另外一種是屬性也可以巢狀

div

}複製**

轉換後ccs為

div

複製**

在巢狀**塊中,使用&引用父元素。這個用來實現偽類非常好

a

}複製**

-- sass可以實現繼承

.boderclass

複製**

class2繼承boderclass使用@extend命令

class2

複製**

使用mixxin

@minxin left

複製**

使用@include命令呼叫mixxin

div

複製**

@minxin還支援引數

@minxin border($color:red)

複製**

引用

.dvi

複製**

@import命令,用來插入外部檔案。使用該命令會合併為乙個檔案

@import "path/filename.scss";

複製**

@import "foo.css";

複製**

-- for迴圈.for使用的比較多,像bootstrap的24 分欄就需要用到

@for

$i from 0 through 24

}複製**

該函式就會生成

.col-md-1

.col-md-2

...col-md-24

複製**

-- 函式

@function double($n) 

#sidebar

複製**

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...