前端之Sass/Scss實戰(zhàn)筆記

Introduction


Sass 有兩種語法規(guī)則(syntaxes),目前新的語法規(guī)則(從 Sass 3開始)被稱為 “SCSS”( 時髦的css(Sassy CSS)),它是css3語法的的拓展級置谦,就是說每一個語法正確的CSS3文件也是合法的SCSS文件寄啼,SCSS文件使用.scss作為拓展名。第二種語法別成為縮進語法(或者 Sass),它受到了Haml的簡潔精煉的啟發(fā)械哟,它是為了人們可以用和css相近的但是更精簡的方式來書寫css而誕生的。它沒有括號颊亮,分號阀捅,它使用 行縮進 的方式來指定css 塊,雖然sass不是最原始的語法熏瞄,但是縮進語法將繼續(xù)被支持脚祟,在縮進語法的文件以 .sass 為拓展名。

注釋

有三種形式:
(1)//comment:該注釋只是在.scss源文件中有强饮,編譯后的css文件中沒有由桌。
(2)/! /:重要注釋,任何style的css文件中都會有邮丰,一般放置css文件版權說明等信息行您。
(3)/ /:該注釋在compressed的style的css中沒有,其他style的css文件都會含有剪廉。

Quick Start


Installation

Build

1.切換到.scss文件所在目錄

命令行下切換到代碼文件夾目錄(如Z:\)娃循,假設有文件test.scss文件,里面內(nèi)容如下:(SASS完全支持css語法)
h1{ font-size:17px; } h2{ font-size:18px; }

2.編譯scss文件為css文件

運行命令:sass --style compressed test.scss test.css
斗蒋,即可生成壓縮版的css文件捌斧,并且命名為test.css笛质。幾點說明:
(1)--style 后面可以有四個參數(shù)可選,分別為expanded捞蚂、nested妇押、compact、compressed洞难,分別選用不同參數(shù)的效果可以自己嘗試體驗舆吮。
(2)test.scss和test.css文件目錄可以自定義,例如把Z盤sass目錄下的test.scss文件編譯為壓縮版的文件队贱,并放置在Z盤css目錄下色冀,那么命令即:

sass --style compressed z:\sass\test.scss z:\css\test.css

(3)開發(fā)過程中,只需要修改scss文件柱嫌,然后編譯锋恬;前端頁面只需要引用相應的css文件即可。

3.偵聽文件和文件夾

如果希望某一個scss文件或者相應的文件夾下面文件修改后编丘,自動進行編譯与学,那么可以使用偵聽命令。
(1)偵聽文件:
sass --watch --style compressed test.scss:test.css

當test.scss文件有修改后嘉抓,會自動編譯為test.css索守,并且是compressed的。
(2)偵聽文件夾:
sass --watch --style compressed sass:css

當sass文件夾下.scss
文件有修改的時候抑片,會自動編譯為與sass中文件同名的css文件卵佛。
備注:
(1)注意源文件和目標文件之間是冒號,與編譯命令中為空格不同敞斋。
(2)生成的map文件可以查找source map文件的作用截汪。

Webpack

Webpack中也內(nèi)置了sass-loader,通過簡單的配置既可以使用植捎。不過需要注意的是衙解,Webpack的sass-loader還是依賴于node-sass以及sass(gem),所以如果安裝sass-loader報錯可以先嘗試安裝sass焰枢。
****變量與選擇器********變量******定義**
變量的定義一般以$開頭蚓峦,某個變量的作用域僅限于他們定義的層級以及子層級。如果變量是定義在所有嵌套選擇器之外的济锄,那么他們可以在各處被調(diào)用枫匾。

 $color1:#aeaeae; .div1{ background-color:$color1; }

編譯后:

 div1 { background-color: #aeaeae; } /*# sourceMappingURL=test.css.map */

如果希望某個在子選擇器中定義的變量能夠成為全局變量,可以使用拟淮!global關鍵字:

 #main { $width: 5em !global; width: $width; } #sidebar { width: $width; }
普通變量與默認變量

sass 的默認變量一般是用來設置默認值,然后根據(jù)需求來覆蓋的谴忧,覆蓋的方式也很簡單很泊,只需要在默認變量之前重新聲明下變量即可角虫。

$baseLineHeight: 2;
$baseLineHeight: 1.5 !default;
body{ line-height: $baseLineHeight; }

編譯后的css代碼:

body{ line-height:2;}

可以看出現(xiàn)在編譯后的 line-height 為 2,而不是我們默認的 1.5委造。默認變量的價值在進行組件化開發(fā)的時候會非常有用戳鹅。

局部變量與全局變量

先來看一下代碼例子:

//SCSS
$color: orange !default;//定義全局變量(在選擇器、函數(shù)昏兆、混合宏...的外面定義的變量為全局變量)
  .block { color: $color;//調(diào)用全局變量}
  em { 
  $color: red;//定義局部變量 
  a { 
      color: $color;//調(diào)用局部變量
     }
}
span { color: $color;//調(diào)用全局變量}

css 的結(jié)果:

//CSS
.block { color: orange;}
em a { color: red;}
span { color: orange;}
嵌套引用

嵌套引用在其他編程語言中即是字符串插值枫虏,需要用#{}進行包裹:

$left:left;
 .div1{
   border-#{$left}-width:5px;
 }

想寫出這樣的 CSS:

nav a {
  color:red;
}
header nav a {
  color:green;
}

那么在 Sass 中,就可以使用選擇器的嵌套來實現(xiàn):

nav {
  a {
    color: red;

    header & {
      color:green;
    }
  }  
}

變量計算

Sass中也是支持對于變量進行簡單的計算:

$left:20px; .div1{ margin-left:$left+12px; }

變量可以支持計算的類型爬虱,還是比較多的:

 p { font: 10px/8px; // Plain CSS, no division 
      $width: 1000px; 
      width: $width/2; // Uses a variable, does division 
      width: round(1.5)/2; // Uses a function, does division 
      height: (500px/2); // Uses parentheses, does division 
      margin-left: 5px + 8px/2px; // Uses +, does division 
      font: (italic bold 10px/8px); // In a list, parentheses don't count }

選擇器


嵌套

 .div1{ .span1{ height: 12px; }
 .div2{ width: 16px; } }

屬性也可以嵌套隶债,比如border-color屬性,可以寫成:

 p {     
      border: {
       color: red;
     }   
}

注意跑筝,border后面必須加上冒號死讹。

父元素引用

在嵌套的子層級中,允許使用&引用父元素:

 .div1{ &:hover{ cursor: hand; } }

代碼重用

繼承
SASS允許一個選擇器曲梗,繼承另一個選擇器赞警。比如,現(xiàn)有class1:

 .class1{ font-size:19px; } .class2{ @extend .class1; color:black; }

**注意:如果在class2后面有設置了class1的屬性虏两,那么也會影響class2愧旦,如下:

 .class1{ font-size:19px; } .class2{ @extend .class1; color:black; } .class1{ font-weight:bold; }

由此可以看出Scss也是遞歸編譯的。
****引用外部css文件(Partials)****有時網(wǎng)頁的不同部分會分成多個文件來寫樣式定罢,或者引用通用的一些樣式笤虫,那么可以使用@import。

 @import "_test1.scss"; @import "_test2.scss"; @import "_test3.scss";

Mixin&Include

Mixin有點像C語言的宏(macro)引颈,是可以重用的代碼塊耕皮。
使用@mixin命令,定義一個代碼塊蝙场。

 @mixin left {
     float: left; 
    margin-left: 10px;
   }

使用@include命令凌停,調(diào)用這個mixin。

 div {
     @include left; 
  }

參數(shù)與缺省值
邊距設置

@mixin common($value1,$value2,$defaultValue:12px){
   display:block; 
  margin-left:$value1; 
  margin-right:$value2; 
  padding:$defaultValue;
}
.class1{
 font-size:16px;
 @include common(12px,13px,15px);
}
.class2{ 
  font-size:16px;
 @include common(12px,13px);
}

瀏覽器前綴設置設置

下面是一個mixin的實例售滤,用來生成瀏覽器前綴罚拟。

  @mixin rounded($vert, $horz, $radius: 10px) {
    border-#{$vert}-#{$horz}-radius: $radius;
    -moz-border-radius-#{$vert}#{$horz}: $radius;
    -webkit-border-#{$vert}-#{$horz}-radius: $radius;
  }

使用的時候,可以像下面這樣調(diào)用:

  #navbar li { 
        @include rounded(top, left);
       }  
      #footer { @include rounded(top, left, 5px); }

編程式方法


****流程控制****
條件語句
@if可以用來判斷:

  p {
    @if 1 + 1 == 2 { 
                border: 1px solid; 
              }    
          @if 5 < 3 { border: 2px dotted; }
  }

配套的還有@else命令:

  @if lightness($color) > 30% {
    background-color: #000;
  } @else {
    background-color: #fff;
  }
111111

循環(huán)語句
SASS支持for循環(huán)

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

也支持while循環(huán)

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

each命令完箩,作用與for類似:

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

函數(shù)

Sass允許用戶自定義函數(shù)赐俗,原型如下所示:

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

顏色函數(shù)
SASS提供了一些內(nèi)置的顏色函數(shù),以便生成系列顏色弊知。

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

原文地址:http://segmentfault.com/a/1190000003742313原文作者:王下邀月熊_Chevalier

最后編輯于
?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末阻逮,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子秩彤,更是在濱河造成了極大的恐慌叔扼,老刑警劉巖事哭,帶你破解...
    沈念sama閱讀 217,907評論 6 506
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異瓜富,居然都是意外死亡鳍咱,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,987評論 3 395
  • 文/潘曉璐 我一進店門与柑,熙熙樓的掌柜王于貴愁眉苦臉地迎上來谤辜,“玉大人,你說我怎么就攤上這事价捧〕竽睿” “怎么了?”我有些...
    開封第一講書人閱讀 164,298評論 0 354
  • 文/不壞的土叔 我叫張陵干旧,是天一觀的道長渠欺。 經(jīng)常有香客問我,道長椎眯,這世上最難降的妖魔是什么挠将? 我笑而不...
    開封第一講書人閱讀 58,586評論 1 293
  • 正文 為了忘掉前任,我火速辦了婚禮编整,結(jié)果婚禮上舔稀,老公的妹妹穿的比我還像新娘。我一直安慰自己掌测,他們只是感情好内贮,可當我...
    茶點故事閱讀 67,633評論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著汞斧,像睡著了一般夜郁。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上粘勒,一...
    開封第一講書人閱讀 51,488評論 1 302
  • 那天竞端,我揣著相機與錄音,去河邊找鬼庙睡。 笑死事富,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的乘陪。 我是一名探鬼主播统台,決...
    沈念sama閱讀 40,275評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼啡邑!你這毒婦竟也來了贱勃?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,176評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎募寨,沒想到半個月后族展,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,619評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡拔鹰,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,819評論 3 336
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了贵涵。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片列肢。...
    茶點故事閱讀 39,932評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖宾茂,靈堂內(nèi)的尸體忽然破棺而出瓷马,到底是詐尸還是另有隱情,我是刑警寧澤跨晴,帶...
    沈念sama閱讀 35,655評論 5 346
  • 正文 年R本政府宣布欧聘,位于F島的核電站,受9級特大地震影響端盆,放射性物質(zhì)發(fā)生泄漏怀骤。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,265評論 3 329
  • 文/蒙蒙 一焕妙、第九天 我趴在偏房一處隱蔽的房頂上張望蒋伦。 院中可真熱鬧,春花似錦焚鹊、人聲如沸痕届。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,871評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽研叫。三九已至,卻和暖如春璧针,著一層夾襖步出監(jiān)牢的瞬間嚷炉,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,994評論 1 269
  • 我被黑心中介騙來泰國打工陈莽, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留渤昌,地道東北人。 一個月前我還...
    沈念sama閱讀 48,095評論 3 370
  • 正文 我出身青樓走搁,卻偏偏與公主長得像独柑,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子私植,可洞房花燭夜當晚...
    茶點故事閱讀 44,884評論 2 354

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