Less/Sass

Less 和 Sass

第一章 Less和Sass簡介

Less和Sass都為動態(tài)樣式表的語言，即css框架，通過簡潔明了的語法定義，使得編寫CSS的工作變得非常簡單。

第二章 Less

本質(zhì)上，LESS 包含一套自定義的語法及一個解析器，用戶根據(jù)這些語法定義自己的樣式規(guī)則，這些規(guī)則最終會通過解析器，編譯生成對應(yīng)的 CSS 文件。LESS 并沒有裁剪 CSS 原有的特性，更不是用來取代 CSS 的，而是在現(xiàn)有 CSS 語法的基礎(chǔ)上，為 CSS 加入程序式語言的特性。

2.1 配置

在服務(wù)器配置less非常簡單，只需要安裝less的編譯器：

npm install -g less

打開lessc --help,我們可以看到使用方法：

lessc [option option=parameter ...] <source> [destination],實際上，我們編譯一個less文件的時候，可以直接輸出指令

lessc styles.less styles.css

而在客戶端使用則更加便捷，我們可以直接引入名為less.js的編譯器，對所寫代碼進行編譯

<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中的變量充許你在樣式中的某個地方對常用的值進行定義，然后應(yīng)用到樣式中，這樣只要改變你定義的變量參數(shù)值就可以達到改變?nèi)值男Ч?/p> 

@color: #4d926f;
    #header {
        color: @color;
    }
    h2 {
        color: @color;
    }

編譯后的效果

#header {
    color: #4d926f;
}
h2 {
    color: #4d926f;
}

同時，對于變量，我們還可以做運算

@nice-blue: #5B83AD;
@light-blue: @nice-blue + #111;

#header { color: @light-blue; }

我們不僅可以定義屬性值為變量，同時可以定義屬性為常量；

@color :blue;
@blue : 'color' ;
@height:10px; 
@width:100px; 
#header {
    height: @height; 
    width: @width; 
    color: @@blue; 
}

在一個less文件中,我們可以使用@inport導(dǎo)入其他less文件

@color : blue;
@import '02.less';
div{
    color:@color;
    background:@background;
}

@background:yellow;

2.3 混入

在 LESS 中我們可以定義一些通用的屬性集為一個 class，然后在另一個 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ù)的函數(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);
}

當然,對于函數(shù),我們也可以定義默認值

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

我們平時在寫css的時候,通常會多次運用選擇器選擇子元素進行樣式控制

<div id="header">
    <a>學習less</a>
</div>

#header {
    display: inline;
    float: left;
}
#header a {
    font-size: 26px;
    font-weight: bold;
}

Less允許我們運用套嵌描述子元素樣式,寫法類似dom的層級關(guān)系

#header{
    width: @width * 5;
    height: @height;
    .border;
    a:first-child{
        color:@color;
    };
    a:last-of-type{
        color:blue;
    }
}

對于偽類選擇器,我們發(fā)現(xiàn)編譯后的樣式不正確

#header{
    display: inline;
    float: left;
    a{
        font-size: 26px;
        font-weight: bold;
        :hover{
            color:yellow;
        }
    }
}

這時,我們只需要用&符號,讓屬性連寫

#header{
    display: inline;
    float: left;
    a{
        font-size: 26px;
        font-weight: bold;
        &:hover{
            color:yellow;
        }
    }
}

2.5 函數(shù)

Less 提供了多種函數(shù)用于控制顏色變化、處理字符串、算術(shù)運算等等

http://www.1024i.com/demo/less/reference.html

http://lesscss.cn/functions/

2.6 循環(huán)

less給我們提供了控制循環(huán)的API loop,類似于if...else語句,我們可以使用loop幫助我們完成css的編譯

比如說

.loop(@counter) when (@counter > 0) {
  .loop((@counter - 1));    // next iteration
  width: (10px * @counter); // code for each iteration
}

div {
  .loop(5); // launch the loop
}

對于我們曾經(jīng)自己寫過的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相當于if判斷

第三章 Sass

世界上最成熟、最穩(wěn)定、最強大的專業(yè)級CSS擴展語言！(...)

http://sass-lang.com/

學習完了less,sass對我們來說也會很簡單

3.1 安裝sass

在windows上如果想要使用sass,我們需要配置ruby環(huán)境,首先安裝ruby,配置項選擇添加到環(huán)境變量中

安裝完畢,在控制臺輸入ruby -v可以查看安裝的ruby版本號

安裝完ruby后,就可以繼續(xù)安裝sass了

控制臺輸入gem install sass,sass會自動安裝在你的全局環(huán)境中.

3.2 使用sass

SASS提供四個編譯風格的選項：

  • nested：嵌套縮進的css代碼，它是默認值。
  • expanded：沒有縮進的、擴展的css代碼。
  • compact：簡潔格式的css代碼。
  • compressed：壓縮后的css代碼。

我們使用默認值即可.

在使用express時,sass默認風格是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;
}

注意外邊寫的是#號,括號內(nèi)寫$side;

sass同樣也可以支持@import引入

@import '02.sass';
div{
    height:$height;
    width:$width;
    color : $blue;
}

$blue : #1875e7;
$width: 10px;
$height : 100px;

我們生成的css文件會有一個編譯目錄和sass.map文件,sass文件相當于源文件，css相當于編譯后的文件，當檢查到頁面問題的時候，你看到的是css，但是需要修改的是sass文件，這個map就是兩個文件的對應(yīng)關(guān)系表。

3.4 計算

和less一致,sass也支持計算

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

編譯出來的結(jié)果和less有所不同

#header {
  display: inline;
  float: left; }
  #header a {
    font-size: 26px;
    font-weight: bold; }

對于偽類選擇器,我們依舊用&符號鏈接

#header{
    display: inline;
    float: left;
    a{
        &:hover{
            color:yellow;
        }
        font-size: 26px;
        font-weight: bold;
    }
}

3.6 代碼繼承

Sass允許一個選擇器，繼承另一個選擇器,使用@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;
        }
    } 
}
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

推薦閱讀更多精彩內(nèi)容

  • LESS 參考資料：LESS官網(wǎng)w3cplus less入門教程 less的編譯 less特性及語法 變量——V...
    壽_司閱讀 2,424評論 0贊 0
  • 1.背景介紹 CSS 是一門非程序式語言，沒有變量、函數(shù)、SCOPE（作用域），需要書寫大量看似沒有邏輯的代碼，不...
    遠望的云閱讀 32,243評論 3贊 35
  • 簡介 CSS（層疊樣式表）是一門歷史悠久的標記性語言，同 HTML 一道，被廣泛應(yīng)用于萬維網(wǎng)（World Wide...
    老夫的天閱讀 1,989評論 1贊 29
  • 預(yù)防鼻炎小知識 1.擁有一個強健的體魄，疾病自然遠離我們，所以日常進行必要的鍛煉是很重要的，身體鍛煉能提高我們的抵...
    陳裕金閱讀 155評論 0贊 0
  • 原文鏈接由于樹莓派并沒有傳統(tǒng)意義上的BIOS, 所以現(xiàn)在各種系統(tǒng)配置參數(shù)通常被存在"config.txt"這個文本...
    palytoxin閱讀 4,253評論 0贊 2