Less 和 Sass
第一章 Less和Sass簡(jiǎn)介
Less和Sass都為動(dòng)態(tài)樣式表的語(yǔ)言，即css框架，通過(guò)簡(jiǎn)潔明了的語(yǔ)法定義，使得編寫CSS的工作變得非常簡(jiǎn)單。
第二章 Less
本質(zhì)上，LESS 包含一套自定義的語(yǔ)法及一個(gè)解析器，用戶根據(jù)這些語(yǔ)法定義自己的樣式規(guī)則，這些規(guī)則最終會(huì)通過(guò)解析器，編譯生成對(duì)應(yīng)的 CSS 文件。LESS 并沒有裁剪 CSS 原有的特性，更不是用來(lái)取代 CSS 的，而是在現(xiàn)有 CSS 語(yǔ)法的基礎(chǔ)上，為 CSS 加入程序式語(yǔ)言的特性。
2.1 配置
在服務(wù)器配置less非常簡(jiǎn)單，只需要安裝less的編譯器：
npm install -g less
打開lessc --help,我們可以看到使用方法：
lessc [option option=parameter ...] <source> [destination],實(shí)際上，我們編譯一個(gè)less文件的時(shí)候，可以直接輸出指令
lessc styles.less styles.css
而在客戶端使用則更加便捷，我們可以直接引入名為less.js的編譯器，對(duì)所寫代碼進(jìn)行編譯
<link rel="stylesheet/less" type="text/less" href="styles.less" />
<script src="http://cdn.bootcss.com/less.js/1.7.0/less.min.js" type="text/javascript"></script>
注意，一定要在自己寫完的樣式之后引入less編譯器
2.2 變量
Less中的變量充許你在樣式中的某個(gè)地方對(duì)常用的值進(jìn)行定義，然后應(yīng)用到樣式中，這樣只要改變你定義的變量參數(shù)值就可以達(dá)到改變?nèi)值男Ч?/p>
@color: #4d926f;
#header {
color: @color;
}
h2 {
color: @color;
}
編譯后的效果
#header {
color: #4d926f;
}
h2 {
color: #4d926f;
}
同時(shí)，對(duì)于變量，我們還可以做運(yùn)算
@nice-blue: #5B83AD;
@light-blue: @nice-blue + #111;
#header { color: @light-blue; }
我們不僅可以定義屬性值為變量，同時(shí)可以定義屬性為常量；
@color :blue;
@blue : 'color' ;
@height:10px;
@width:100px;
#header {
height: @height;
width: @width;
color: @@blue;
}
在一個(gè)less文件中,我們可以使用@inport導(dǎo)入其他less文件
@color : blue;
@import '02.less';
div{
color:@color;
background:@background;
}
@background:yellow;
2.3 混入
在 LESS 中我們可以定義一些通用的屬性集為一個(gè) class，然后在另一個(gè) class 中去調(diào)用這些屬性.
.border{
border:1px solid red;
}
@color :blue;
@blue : 'color' ;
@height:10px;
@width:100px;
#header {
height: @height;
width: @width;
color: @@blue;
.border;
}
在混入的同時(shí),我們可以把這個(gè)類看作一個(gè)可以傳遞參數(shù)的函數(shù)調(diào)用
.border(@yourcolor){
border:1px solid @yourcolor;
}
@color :blue;
@blue : 'color' ;
@height:10px;
@width:100px;
#header {
height: @height;
width: @width;
color: @@blue;
.border(yellow);
}
當(dāng)然,對(duì)于函數(shù),我們也可以定義默認(rèn)值
.border(@yourcolor:red){
border:1px solid @yourcolor;
}
@color :blue;
@blue : 'color' ;
@height:10px;
@width:100px;
#header {
height: @height;
width: @width;
color: @@blue;
.border;
}
2.4 套嵌
我們平時(shí)在寫css的時(shí)候,通常會(huì)多次運(yùn)用選擇器選擇子元素進(jìn)行樣式控制
<div id="header">
<a>學(xué)習(xí)less</a>
</div>
#header {
display: inline;
float: left;
}
#header a {
font-size: 26px;
font-weight: bold;
}
Less允許我們運(yùn)用套嵌描述子元素樣式,寫法類似dom的層級(jí)關(guān)系
#header{
width: @width * 5;
height: @height;
.border;
a:first-child{
color:@color;
};
a:last-of-type{
color:blue;
}
}
對(duì)于偽類選擇器,我們發(fā)現(xiàn)編譯后的樣式不正確
#header{
display: inline;
float: left;
a{
font-size: 26px;
font-weight: bold;
:hover{
color:yellow;
}
}
}
這時(shí),我們只需要用&符號(hào),讓屬性連寫
#header{
display: inline;
float: left;
a{
font-size: 26px;
font-weight: bold;
&:hover{
color:yellow;
}
}
}
2.5 函數(shù)
Less 提供了多種函數(shù)用于控制顏色變化、處理字符串、算術(shù)運(yùn)算等等
2.6 循環(huán)
less給我們提供了控制循環(huán)的API loop,類似于if...else語(yǔ)句,我們可以使用loop幫助我們完成css的編譯
比如說(shuō)
.loop(@counter) when (@counter > 0) {
.loop((@counter - 1)); // next iteration
width: (10px * @counter); // code for each iteration
}
div {
.loop(5); // launch the loop
}
對(duì)于我們?cè)?jīng)自己寫過(guò)的boolstrap,嘗試控制循環(huán):
.loop(@n , @i: 1 ) when (@i <= @n) {
.col-md-@{i} {
width: (@i * 100% / @n);
}
.loop( @n , (@i + 1) );
}
@media(max-width:992px){
.loop(12);
}
注意
.loop是函數(shù)名,可以隨意定義,when相當(dāng)于if判斷
第三章 Sass
世界上最成熟、最穩(wěn)定、最強(qiáng)大的專業(yè)級(jí)CSS擴(kuò)展語(yǔ)言！(...)
學(xué)習(xí)完了less,sass對(duì)我們來(lái)說(shuō)也會(huì)很簡(jiǎn)單
3.1 安裝sass
在windows上如果想要使用sass,我們需要配置ruby環(huán)境,首先安裝ruby,配置項(xiàng)選擇添加到環(huán)境變量中
安裝完畢,在控制臺(tái)輸入ruby -v可以查看安裝的ruby版本號(hào)
安裝完ruby后,就可以繼續(xù)安裝sass了
控制臺(tái)輸入gem install sass,sass會(huì)自動(dòng)安裝在你的全局環(huán)境中.
3.2 使用sass
SASS提供四個(gè)編譯風(fēng)格的選項(xiàng)：
- nested：嵌套縮進(jìn)的css代碼，它是默認(rèn)值。
- expanded：沒有縮進(jìn)的、擴(kuò)展的css代碼。
- compact：簡(jiǎn)潔格式的css代碼。
- compressed：壓縮后的css代碼。
我們使用默認(rèn)值即可.
在使用express時(shí),sass默認(rèn)風(fēng)格是sass,我們只需要略作更改,改做scss即可
sass test.scss 可以在命令行輸出編譯后的結(jié)果
sass test.scss test.css 可以將結(jié)果輸出為css文件.
sass在線編譯器 http://www.sassmeister.com/
3.3 變量
和less類似,sass也支持變量
$blue : #1875e7;
$width: 10px;
$height : 100px;
div{
height:$height;
width:$width;
color : $blue;
}
同樣,變量也支持嵌套書寫
$side : left;
.rounded{
border-#{$side}-radius: 5px;
}
注意外邊寫的是#號(hào),括號(hào)內(nèi)寫$side;
sass同樣也可以支持@import引入
@import '02.sass';
div{
height:$height;
width:$width;
color : $blue;
}
$blue : #1875e7;
$width: 10px;
$height : 100px;
我們生成的css文件會(huì)有一個(gè)編譯目錄和sass.map文件,sass文件相當(dāng)于源文件，css相當(dāng)于編譯后的文件，當(dāng)檢查到頁(yè)面問(wèn)題的時(shí)候，你看到的是css，但是需要修改的是sass文件，這個(gè)map就是兩個(gè)文件的對(duì)應(yīng)關(guān)系表。
3.4 計(jì)算
和less一致,sass也支持計(jì)算
#header{
margin-top : (14px / 2);
width : 100px + 50px;
color : #FFF - #211;
}
3.5 套嵌
Sass同樣支持選擇器套嵌
#header {
display: inline;
float: left;
}
#header a {
font-size: 26px;
font-weight: bold;
}
#header{
display: inline;
float: left;
a{
font-size: 26px;
font-weight: bold;
}
}
編譯出來(lái)的結(jié)果和less有所不同
#header {
display: inline;
float: left; }
#header a {
font-size: 26px;
font-weight: bold; }
對(duì)于偽類選擇器,我們依舊用&符號(hào)鏈接
#header{
display: inline;
float: left;
a{
&:hover{
color:yellow;
}
font-size: 26px;
font-weight: bold;
}
}
3.6 代碼繼承
Sass允許一個(gè)選擇器，繼承另一個(gè)選擇器,使用@extend繼承父類屬性
.class1{
background:yellow;
}
.class2{
@extend .class1;
width : 100px;
height : 10px;
}
3.7 代碼混用
類似less,sass也支持代碼混用,并支持傳入?yún)?shù),只是需要用到@mixin和@include命令
@mixin color($v : yellow){
background: $v;
}
#header {
@include color(red);
}
3.8 控制結(jié)構(gòu)
for循環(huán)
Sass支持 if,for,while,each作為控制結(jié)構(gòu)用于數(shù)據(jù)輸出;
http://sass-lang.com/documentation/file.SASS_REFERENCE.html#control_directives__expressions
@media(max-width:992px){
@for $i from 1 through 12 {
.col-md-#{$i}{
width : $i*100%/12;
float : left;
}
}
}
