Sass 用法指南

時間  2019-11-07
標籤 sass 用法 指南 简体版
原文   原文鏈接
對於大部分前端程序員來講，最痛苦的是莫過於寫樣式（css）了,試想一下，當作了 一個炫酷插件，或者實現了多牛逼的功能，但是沒有完美樣式，是不被人寵幸的，巨瞭解，我身邊絕大部分的人都及其不喜歡寫樣式，一方面：嵌套多層元素時，那選擇器的寫法可不建議簡寫，畢竟涉及到樣式覆蓋與權重的問題；第二方面：對於某些程序員來講這與體力活不差一二。但是在我看來，一個優秀的，吸引人的web，樣式的成分仍是仍是處於上游的，試想一下，一個web，沒有「華麗」的表面，怎麼吸引人的注意？我始終相信這樣一句話「天無絕程序員之路」，這時候sass就拯救了咱們

1、什麼是SASS

SASS是一種CSS的開發工具，提供了許多便利的寫法，大大節省了設計者的時間，使得CSS的開發，變得簡單和可維護。css

本文總結了SASS的主要用法。個人目標是，有了這篇文章，平常的通常使用就不須要去看官方文檔了。html

2、安裝和使用

2.1 安裝

SASS是Ruby語言寫的，可是二者的語法沒有關係。不懂Ruby，照樣使用。只是必須先安裝Ruby，而後再安裝SASS。前端

假定你已經安裝好了Ruby，接着在命令行輸入下面的命令：程序員

　　gem install sass複製代碼

而後，就可使用了。web

2.2 使用

SASS文件就是普通的文本文件，裏面能夠直接使用CSS語法。文件後綴名是.scss，意思爲Sassy CSS。面試

下面的命令，能夠在屏幕上顯示.scss文件轉化的css代碼。（假設文件名爲test。）shell

　 sass test.scss複製代碼

若是要將顯示結果保存成文件，後面再跟一個.css文件名。編程

　　sass test.scss test.css複製代碼

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

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

生產環境當中，通常使用最後一個選項。sass

　sass --style compressed test.sass test.css複製代碼

你也可讓SASS監聽某個文件或目錄，一旦源文件有變更，就自動生成編譯後的版本。

// watch a file　　
sass --watch input.scss:output.css　　
// watch a directory　　
sass --watch app/sass:public/stylesheets複製代碼

SASS的官方網站，提供了一個在線轉換器。你能夠在那裏，試運行下面的各類例子。

3、基本用法

3.1 變量

SASS容許使用變量，全部變量以$開頭。

$blue : #1875e7;　　　
div {　　　
    color : $blue;　　
}複製代碼

若是變量須要鑲嵌在字符串之中，就必須須要寫在#{}之中。

$side : left;　　
.rounded {　　　　
    border-#{$side}-radius: 5px;　　
}複製代碼

3.2 計算功能

SASS容許在代碼中使用算式：

body {　　　　
    margin: (14px/2);　　　　
    top: 50px + 100px;　　　　
    right: $var * 10%;　　
}複製代碼

3.3 嵌套

SASS容許選擇器嵌套。好比，下面的CSS代碼：

div h1 {　　　　
    color : red;　　
}複製代碼

能夠寫成：

div {　　　　
    hi {　　　　　　
        color:red;　　　　
    }　　
}複製代碼

屬性也能夠嵌套，好比border-color屬性，能夠寫成：

p {　　　　
    border: {　　　　　　
        color: red;　　　　
    }　　
}複製代碼

注意，border後面必須加上冒號。

在嵌套的代碼塊內，可使用&引用父元素。好比a:hover僞類，能夠寫成：

a {　　　　
    &:hover { 
        color: #ffb3ff; 
    }　　
}複製代碼

3.4 註釋

SASS共有兩種註釋風格。

標準的CSS註釋 /* comment */ ，會保留到編譯後的文件。

單行註釋 // comment，只保留在SASS源文件中，編譯後被省略。

在/*後面加一個感嘆號，表示這是"重要註釋"。即便是壓縮模式編譯，也會保留這行註釋，一般能夠用於聲明版權信息。

/*! 　　　　
    重要註釋！　　
*/複製代碼

4、代碼的重用

4.1 繼承

SASS容許一個選擇器，繼承另外一個選擇器。好比，現有class1：

.class1 {　　　　
    border: 1px solid #ddd;　　
}複製代碼

class2要繼承class1，就要使用@extend命令：

.class2 {　　　　
    @extend .class1;　　　　
    font-size:120%;　　
}複製代碼

4.2 Mixin

Mixin有點像C語言的宏（macro），是能夠重用的代碼塊。

使用@mixin命令，定義一個代碼塊。

@mixin left {　　　　
    float: left;　　　　
    margin-left: 10px;　　
}複製代碼

使用@include命令，調用這個mixin。

div {　　　　
    @include left;　　
}複製代碼

mixin的強大之處，在於能夠指定參數和缺省值。

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

使用的時候，根據須要加入參數：

div {　　　　
    @include left(20px);　　
}複製代碼

下面是一個mixin的實例，用來生成瀏覽器前綴。

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

使用的時候，能夠像下面這樣調用：

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

4.3 顏色函數

SASS提供了一些內置的顏色函數，以便生成系列顏色。

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

4.4 插入文件

@import命令，用來插入外部文件。

　@import "path/filename.scss";複製代碼

若是插入的是.css文件，則等同於css的import命令。

@import "foo.css";複製代碼

5、高級用法

5.1 條件語句

@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;　　
}複製代碼

5.2 循環語句

SASS支持for循環：

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

也支持while循環：

$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");　　　　
    }　　
}複製代碼

5.3 自定義函數

SASS容許用戶編寫本身的函數。

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



Sass 相關面試問題

什麼是SASS？

SASS（Syntactically Awesome Stylesheet）是一個CSS預處理器，有助於減小CSS的重複，節省時間。 它是更穩定和強大的CSS擴展語言，描述文檔的樣式乾淨和結構。

一、爲何要使用SASS？

  • 它是預處理語言，它爲CSS提供縮進語法（它本身的語法）。

  • 它容許更有效地編寫代碼和易於維護。

  • 它是包含CSS的全部功能的CSS的超集，是一個開源的預處理器，以 Ruby 編碼。

  • 它提供了比平面CSS好的結構格式的文檔樣式。

  • 它使用可重複使用的方法，邏輯語句和一些內置函數，如顏色操做，數學和參數列表。

二、列出SASS的一些功能？

  • 它是更穩定，強大，與CSS的版本兼容。

  • 它是超集的CSS和基於JavaScript。

  • 它被稱爲CSS的語法糖，這意味着它使用戶更容易閱讀或表達的東西更清楚。

  • 它使用本身的語法並編譯爲可讀的CSS。

  • 你能夠在更少的時間內輕鬆地編寫CSS代碼。

  • 它是一個開源的預處理器，被解釋爲CSS。

三、SASS的優勢是什麼？

  • 它容許在編程結構中編寫乾淨的CSS。

  • 它有助於編寫CSS更快。

  • 它是CSS的超集，幫助設計師和開發人員更有效率和快速地工做。

  • 因爲Sass兼容全部版本的CSS，咱們可使用任何可用的CSS庫。

  • 可使用嵌套語法和有用的函數，如顏色操做，數學和其餘值。

四、SASS的缺點是什麼？

  • 開發人員須要時間瞭解此預處理器中存在的新功能。

  • 若是更多的人在同一個網站上工做，那麼將使用相同的預處理器。 有些人使用Sass，有些人使用CSS直接編輯文件。 所以，它將變得難以與現場工做。

  • 有機會失去瀏覽器的內置元素檢查器的好處。

五、列出SASS支持的兩種語法？

SASS支持兩種語法，即 SCSS 和縮進語法。

  • SCSS（Sassy CSS）是CSS語法的擴展，能夠更容易地維護大型樣式表，而且能夠識別供應商特定的語法和許多CSS。 SCSS文件使用擴展名 .scss 。

  • 縮進是較舊的語法，有時僅稱爲 Sass 。 使用這種形式的語法，能夠簡潔地編寫CSS。 SASS文件使用擴展名 .sass 。

六、有多少種方法可使用SASS？

您可使用三種不一樣的方式使用SASS:

  • 做爲命令行工具

  • 做爲一個Ruby模塊

  • 做爲Rack啓用框架的插件

七、SASS中的嵌套規則是什麼？

嵌套是不一樣邏輯結構的組合。 使用SASS，咱們能夠將多個CSS規則相互組合。 若是使用多個選擇器，則能夠在另外一個選擇器中使用一個選擇器來建立複合選擇器。

八、如何在SASS中引用父選擇器？

您可使用＆amp; 字符選擇父級選擇器。 它告訴父選擇器應該插入的位置。

九、如何在SASS中寫入佔位符選擇器？

SASS使用 class 或 id 選擇器支持佔位符選擇器。 在正常CSS中，這些用「＃"或「。"指定，但在SASS中，它們替換爲「％"。

十、列出SASS上的不一樣類型的運算符？

有5種類型的運算符:

  • 數字運算符

  • 顏色運算符

  • 字符串運算符

  • 布爾運算符

  • 列表運算符

什麼是數字運算？

它容許諸如加法，減法，乘法和除法的數學運算。

什麼是彩色運算？

它容許使用顏色份量和算術運算。

什麼是列表運算？

列表表示使用逗號或空格分隔的一系列值。

什麼是布爾運算？

您可使用and、or和not（與或非）對Sass腳本執行布爾運算。

SASS中的括號是什麼？

括號是一對標記，一般用圓括號（）或方括號[]來標記，這提供了影響操做順序的符號邏輯。

什麼是SASS中的插值？

它使用＃{} 語法提供選擇器和屬性名稱中的SassScript變量。 您能夠在花括號中指定變量或屬性名稱。

什麼是可變默認值？

您能夠經過向變量值的結尾添加 ！default 標誌來設置變量的默認值。若是值已經分配給變量，則不會從新分配該值。

什麼是導入指令？

它直接採用文件名導入，全部導入的文件將合併到一個單一的CSS文件。

什麼是媒體指令？

它將樣式規則設置爲不一樣的媒體類型。

什麼是擴展指令？

它用於共享選擇器之間的規則和關係。 它能夠在一個類中擴展全部其餘類樣式，也能夠應用本身的特定樣式。

什麼是根指令？

它是一個嵌套規則的集合，它可以在文檔的根節點建立樣式塊。

什麼是@if指令？

它用於基於表達式求值的結果選擇性地執行代碼語句。

什麼是@else if指令？

@else if語句與@if指令一塊兒使用，每當@if語句失敗，則嘗試@else if語句，若是它們也失敗，則執行@else。

什麼是@for指令？

它容許您在循環中生成樣式。 計數器變量用於設置每次迭代的輸出。

什麼是@each指令？

在@each指令中，定義了一個包含列表中每一個項目的值的變量。

什麼是@mixin指令？

它用於定義mixin，其中包含可選的mixin名稱以後的變量和參數。

什麼是@include指令？

它用於在文檔中包含mixin，由mixin定義的樣式能夠包含在當前規則中。

什麼是mixin 參數?

SassScript值能夠做爲mixin中的參數，當mixin包含並在mixin中做爲變量使用時，能夠將其做爲參數。

列出兩種類型的mixin參數？

有兩種類型的mixin參數:

  • 關鍵字參數

  • 可變參數

什麼是關鍵字參數？

它用於在mixin中包含參數。 命名的參數能夠按任何順序傳遞，參數的默認值能夠省略。

什麼是可變參數？

變量參數用於將任意數量的參數傳遞給mixin。 它包含傳遞給函數或mixin的關鍵字參數。

什麼是函數指令？

使用函數指令，能夠建立本身的函數，並在腳本上下文中使用它們，或者可使用任何值。

什麼是SASS輸出樣式？

SASS生成的CSS文件由反映文檔結構的默認CSS樣式組成。 默認的CSS樣式很好，但可能不適合全部狀況。

什麼是嵌套CSS樣式？

嵌套樣式是SASS的默認樣式。 這種方式的樣式在處理大型CSS文件時很是有用。

什麼是擴展CSS樣式？

在擴展輸出樣式中，每一個屬性和規則都有本身的線。 與嵌套CSS樣式相比，它須要更多的空間。

什麼是緊湊的CSS樣式？

緊湊的CSS風格競爭力比Expanded和Nested佔用更少的空間。 它主要關注選擇器而不是其屬性。

什麼是壓縮CSS樣式？

與全部其餘樣式相比，壓縮的CSS樣式佔用最少的空間。 它僅提供空格，以在文件末尾分隔選擇器和換行符。

SASS縮進語法的主要特色是什麼？

  • 它使用縮進而不是 {和} 來分隔塊。

  • 要分隔語句，它使用換行符而不是分號（;）。

  • 屬性聲明和選擇器必須放在本身的行上， {和} 中的語句必須放在>和縮進。

有多少種方法能夠聲明CSS屬性？

CSS屬性能夠經過兩種方式聲明:

  • 屬性能夠聲明爲相似於CSS但沒有分號（;）。

  • colon（:）將以每一個屬性名稱爲前綴。

什麼是寫@mixin和@include指令的速記？

您可使用= for @mixin指令和+ for @include指令，這須要更少的鍵入，使您的代碼更簡單，更容易閱讀。

每當SASS文件更改時，使用哪一個命令來觀察文件並更新CSS？

sass --watch C:\\ ruby \\ lib \\ sass \\ style.scss:style.css

什麼是SASS的註釋？

註釋佔用整行幷包圍嵌套在它們下面的全部文本，它們是基於行的縮進語法。

哪一個命令用於從命令行運行SASS代碼？

sass input.scss output.css

樣式表的字符編碼的CSS規範是什麼？

  • 首先它檢查Unicode字節，下一個@charset聲明，而後檢查Ruby字符串編碼。

  • 接下來，若是未設置任何內容，則會將字符集編碼視爲。

  • 使用@charset聲明顯式地肯定字符編碼。 只需在樣式表的開頭使用「@charset encoding name"，SASS將假設這是給定的字符編碼。

  • 若是SASS的輸出文件包含非ASCII字符，那麼它將使用 @charset 聲明。

有多少種註釋類型？

Sass支持兩種類型的註釋:

  • 多行註釋 - 使用/ *和* /寫入。 多行註釋保存在CSS輸出中。

  • 單行註釋 - 這些是使用 // 和註釋寫成的。 單行註釋不會保留在CSS輸出中。

什麼是交互式shell？

它使用命令行評估SassScript表達式。 您可使用sass命令行和 -i 選項運行shell。

什麼是@debug指令？

它檢測錯誤並將SassScript表達式值顯示到標準錯誤輸出流。

什麼是@error指令？

它將SassScript表達式值顯示爲致命錯誤。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程