成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

SASS入門

edagarli / 455人閱讀

摘要：阮一峰用法指南簡單入門結(jié)一語法較為詳細(xì)安裝可用一鍵安裝下載有點(diǎn)慢，記得把第二個(gè)給選了安裝完成后記得重啟使用查看是否安裝成功。安裝在中輸入關(guān)于與文件這兩種的區(qū)別在于文件對(duì)代碼的排版有著非常嚴(yán)格的要求，而且沒有大括號(hào)，沒有分號(hào)。

阮一峰(簡單入門)
結(jié)一(較為詳細(xì))

1.安裝Ruby

windows可用RubyInstaller一鍵安裝
RubyInstaller 下載有點(diǎn)慢，be patient！

記得把第二個(gè)給選了

安裝完成后記得重啟cmd,使用ruby -v 查看是否安裝成功。

2.安裝sass

在cmd中輸入gem install sass

3.關(guān)于sass與scss文件

這兩種的區(qū)別在于.sass文件對(duì)代碼的排版有著非常嚴(yán)格的要求，而且沒有大括號(hào)，沒有分號(hào)。原文地址

個(gè)人認(rèn)為sass雖然比較簡潔，但是并不符合大多數(shù)語言的編碼習(xí)慣，而scss和css比較像，可讀性較高，因此選擇scss

scss:

.a {  
  color: blue;  
  font-weight: bold;  
  text-decoration: underline;  
  .b {  
      color:black;  
  }  
}

sass:

.div  
   color: blue  
   .b  
      color: black  
      font-weight: bold  
      text-decoration: none  
   .c  
      color: white
4.基本語法

創(chuàng)建一個(gè)scss文件， test.scss

變量：

$bule: #1875e7;
$size: 10px !default;
.blue-font{
    color: $blue;
    font-size: $size;
}
.blue-font{
    font-size:15px;
}

字符串：

$side: left;
.rounded{
    border-#{$side}-radius: 5px;
}

計(jì)算：

$twopx: 2px;;
.left-4px{
    margin-left: $twopx * 2;
}

嵌套(border后有：)：

.nest{
    h1{
        color:red;
        border:{
            width: 1px;
            color: red;
            style: solid;
        }
    }
}

嵌套中&表示父元素：

a {
    &:hover { color: #ffb3ff; }
}

注釋：

//這種注釋編譯后不會(huì)保留
/* 這是重要注釋，編譯后會(huì)保留 */

繼承：

.extend1 {
    border: 1px solid #ffffd;
}
.extend2 {
    @extend .extend1;
    font-size:120%;
}

Mixin:

@mixin mixin-left($value: 10px) {
    float: left;
    margin-right: $value;
}

.include-div {
    @include mixin-left(20px);
}

顏色函數(shù)：

lighten(#cc3, 10%) // #d6d65c
darken(#cc3, 10%) // #a3a329
grayscale(#cc3) // #808080
complement(#cc3) // #33c

插入文件：

@import "path/filename.scss";
@import "foo.css";
5.高級(jí)語法

判斷：

$value: 3;
.judge-p {
    @if $value == 3 {
        background-color: #000;
    } @else {
        background-color: #fff;
    }
}

循環(huán)：

for：

@for $i from 1 to 10 {
    .border-#{$i} {
    　border: #{$i}px solid blue;
　}
}

while:

$wi: 6;
@while $wi > 0 {
    .item-#{$wi} { width: 2em * $wi; }
  $wi: $wi - 2;
}

each:

@each $member in a, b, c, d {
    .#{$member} {
        background-image: url("/image/#{$member}.jpg");
    }
}

自定義函數(shù)：

@function double($n) {
    @return $n * 2;
}
#sidebar {
    width: double(5px);
}
6. 編譯

打開cmd, 在test.scss目錄下sass test.scss test.css回車，即生成test.css

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/115096.html

相關(guān)文章

  • sass入門初體驗(yàn)

    摘要：接上文入門初體驗(yàn)，接下來講講，有兩種文件后綴名，一種是，另一種是。 接上文less入門初體驗(yàn)，接下來講講sass，sass有兩種文件后綴名，一種是.sass，另一種是.scss。前者類似于ruby的語法規(guī)則，沒有花括號(hào)，沒有分號(hào)，具有嚴(yán)格的縮進(jìn)；而后者更貼近于css的語法規(guī)則，易于閱讀，更具語義性，所以本文采用.scss后綴名來編寫sass代碼 編譯 1、Ruby:sass是由Rub...

    aisuhua 評(píng)論0 收藏0

  • 20分鐘gulp快速入門

    摘要：所以出現(xiàn)了各種前端構(gòu)建化工具也應(yīng)運(yùn)而生等已經(jīng)成為現(xiàn)在前端開發(fā)工程師的必備技能之一。結(jié)語今天的分享就告一段落啦希望能對(duì)大家有所幫助。 在互聯(lián)網(wǎng)告訴發(fā)展的今天，自node出現(xiàn)后，我們前端也越來越大（心里美美噠~），同樣帶來的Web業(yè)務(wù)日益復(fù)雜化和多元化，模式也都想webPage模式轉(zhuǎn)向webApp模式，拼幾個(gè)頁面搞幾個(gè)jquery的插件就能搞一個(gè)完成一個(gè)項(xiàng)目的日子已經(jīng)是很久遠(yuǎn)的曾經(jīng)了，而且...

    RichardXG 評(píng)論0 收藏0

  • 前端利器：SASS基礎(chǔ)與Compass入門

    摘要：在吸取了的一些特性基礎(chǔ)上，有了大幅改進(jìn)，也就是現(xiàn)在的。嵌套極大程度上降低了選擇器名稱和屬性的重復(fù)書寫。選擇器嵌套選擇器嵌套是指從一個(gè)選擇器中嵌套子選擇器，來實(shí)現(xiàn)選擇器的繼承關(guān)系。也已經(jīng)成為的一個(gè)標(biāo)配組件。 SASS是Syntactically Awesome Stylesheete Sass的縮寫，它是css的一個(gè)開發(fā)工具，提供了很多便利和簡單的語法，讓css看起來更像是一門...

    娣辯孩 評(píng)論0 收藏0

  • [Sass]-Sass入門

    摘要：未編譯樣式多繼承鏈?zhǔn)嚼^承占位選擇器編譯后樣式中使用聲明混合，可以傳遞參數(shù)，參數(shù)名以符號(hào)開始，多個(gè)參數(shù)以逗號(hào)分開，也可以給參數(shù)設(shè)置默認(rèn)值。 初識(shí)Sass SASS簡介 sass是一種css預(yù)處理器，用專門的編程語言，進(jìn)行網(wǎng)頁樣式設(shè)計(jì)，然后再編譯成正常的CSS文件。Sass是CSS3的擴(kuò)展，它增加了嵌套規(guī)則，變量，mixins，選擇器繼承等等。Sass生成格式良好的CSS，使樣式表更易于組...

    godiscoder 評(píng)論0 收藏0

  • vue入門文章

    摘要：本來想自己寫一篇關(guān)于入門的文章。后面可能在這篇文章基礎(chǔ)上，有所內(nèi)容的增加。預(yù)處理器定義了一種新的專門的編程語言，編譯后成正常的文件。 本來想自己寫一篇關(guān)于vue入門的文章。但是看到鏈接的文章后，覺得寫得太詳細(xì)了，實(shí)在有保存下來的必要。后面可能在這篇文章基礎(chǔ)上，有所內(nèi)容的增加。 CSS預(yù)處理器 定義了一種新的專門的編程語言，編譯后成正常的CSS文件。為CSS增加一些編程的特性，無需考慮瀏...

    seanHai 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<