SASS入門

edagarli 發(fā)布于2019-08-30 12:49 / 507人閱讀

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

阮一峰(簡單入門)
結一(較為詳細)

1.安裝Ruby

windows可用RubyInstaller一鍵安裝
RubyInstaller 下載有點慢，be patient！

記得把第二個給選了

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

2.安裝sass

在cmd中輸入gem install sass

3.關于sass與scss文件

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

個人認為sass雖然比較簡潔，但是并不符合大多數(shù)語言的編碼習慣，而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)建一個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;
}

計算：

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

嵌套(border后有：)：

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

嵌套中&表示父元素：

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

注釋：

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

繼承：

.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.高級語法

判斷：

$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

GPU云服務器云服務器 sass 多云管理 sass sass 混合云部署 iaas paas sass

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

轉載請注明本文地址：http://www.ezyhdfw.cn/yun/115096.html

sass入門初體驗

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

aisuhua 2019-08-30 13:16 評論0 收藏0
20分鐘gulp快速入門

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

RichardXG 2019-08-22 15:06 評論0 收藏0
前端利器：SASS基礎與Compass入門

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

娣辯孩 2019-08-28 17:54 評論0 收藏0
[Sass]-Sass入門

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

godiscoder 2019-08-29 13:27 評論0 收藏0
vue入門文章

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

seanHai 2019-08-29 17:06 評論0 收藏0