Css、less和Sass（SCSS）

景

CSS（層疊樣式表）是一門非程序式語言，入門學習使用非常直觀方便，但是對于一些比較復雜或者重用性比較強的項目來說，因為CSS沒有變量、函數(shù)、SCOPE（作用域），需要書寫大量看似沒有邏輯的代碼，不方便維護及擴展，不利于復用，尤其對于非前端開發(fā)工程師來講，往往會因為缺少 CSS 編寫經(jīng)驗而很難寫出組織良好且易于維護的 CSS 代碼。

為了方便前端開發(fā)的工作量，出現(xiàn)了sass和less。

SASS和LESS

SASS（英文全稱：Syntactically Awesome Stylesheets）Sass 誕生于 2007 年，使用Ruby 編寫，是一種對css的一種擴展提升，增加了規(guī)則、變量、混入、選擇器、繼承等等特性。

可以理解為用js的方式去書寫，然后編譯成css。比如說，sass中可以把反復使用的css屬性值定義成變量，然后通過變量名來引用它們，而無需重復書寫這一屬性值。

LESS（2009年開源的一個項目，受Sass的影響較大，但又使用CSS的語法，讓大部分開發(fā)者和設(shè)計師更容易上手。

LESS保留了css的任何功能，同時提供了多種方式能平滑的將寫好的代碼轉(zhuǎn)化成標準的CSS代碼，可以在任何使用隨時切換到css的語法進行書寫。

SASS和LESS使用

傳統(tǒng)的css可以直接被html引用，但是sass和less由于使用了類似JavaScript的方式去書寫，所以必須要經(jīng)過編譯生成css，而html引用只能引用編譯之后的css文件，雖然過程多了一層，但是畢竟sass/less在書寫的時候就方便很多，所以在我們使用sass/less之前，只要我們提前設(shè)置好，就可以直接生成對應的css文件，而我們只需要關(guān)心我們的sass/less文件即可。

Sass的語法規(guī)則，可以參考下SASS中文網(wǎng)：https://www.sass.hk/。

SASS技術(shù)的文件的后綴名有兩種形式：.sass和.scss。其實兩者都是同一種東西，兩種均可以可以通過編譯生成瀏覽器能識別的css文件。這兩種的區(qū)別：

擴展名不同；
SCSS 的語法書寫和CSS 語法書寫方式非常類似，.sass文件對代碼的排版有著非常嚴格的要求，而且沒有大括號，沒有分號；

Sass 語法

$font-stack: Helvetica, sans-serif //定義變量

$primary-color: #333 //定義變量

body

font: 100% $font-stack

color: $primary-color

SCSS 語法

$font-stack: Helvetica, sans-serif;

$primary-color: #333;

body {

font: 100% $font-stack;

color: $primary-color;

}

編譯出來的 CSS

body {

font: 100% Helvetica, sans-serif;

color: #333;

}

LESS技術(shù)的后綴名只有一種，就是.less，語法規(guī)則和sass大同小異，詳細可以參考less中文網(wǎng)http://lesscss.cn/。

LESS使用分為兩種：

直接在瀏覽器中引入less編譯器js文件和less文件，直接渲染編譯為css文應用到當前頁面中。
less文件通過編譯成為css之后引用css；

/* Less */

  @color: #999;

  @bgColor: skyblue;//不要添加引號

  @width: 50%;

  #wrap {

color: @color;

width: @width;

CSS 是開發(fā)人員用于網(wǎng)頁開發(fā)的樣式語言。它用于設(shè)置網(wǎng)頁樣式并使其具有吸引力。它是 Web 開發(fā)的三個基本部分之一，另外兩個是 JavaScript 和 HTML。

　　CSS 旨在實現(xiàn)表示和內(nèi)容的分離，包括布局、顏色和字體。這種分離可以提高內(nèi)容的可訪問性，提供更多的靈活性和對表示特性規(guī)范的控制，通過在單獨的 .css 文件中指定相關(guān)的 CSS 使多個網(wǎng)頁能夠共享格式，并減少結(jié)構(gòu)上下文中的復雜性和重復性。

　　網(wǎng)頁上的每個項目或元素都是以標記語言編寫的文檔的一部分。在大多數(shù)情況下，使用 HTML(超文本標記語言)，但也使用其他語言，例如 XML 和 XHTML。

　　CSS 的語法非常簡單，包含大量用于各種樣式屬性的英文關(guān)鍵字。它包括選擇器、屬性、值、聲明、聲明塊、規(guī)則集、at 規(guī)則和語句。

　　CSS的優(yōu)點

　　1.一致性——CSS 有助于構(gòu)建一個一致的框架，設(shè)計師可以使用它來構(gòu)建其他網(wǎng)站。因此，網(wǎng)頁設(shè)計師的效率也會提高。

　　2.易于使用——CSS 非常容易學習并簡化了網(wǎng)站開發(fā)。所有代碼都放在一頁上，這意味著對行的改進或編輯不會涉及到幾頁。

　　3.網(wǎng)站速度——通常，用于網(wǎng)站的代碼最多可以達到 2 頁或更多。但是對于 CSS，這不是問題。它只需要 2-3 行代碼，因此網(wǎng)站數(shù)據(jù)庫保持整潔，消除了任何網(wǎng)站加載問題。

　　4.設(shè)備兼容性——CSS 更改對設(shè)備友好。由于人們使用不同類型的智能設(shè)備來訪問互聯(lián)網(wǎng)，因此需要或響應式網(wǎng)頁設(shè)計。CSS 通過使網(wǎng)頁更具響應性來達到這里的目的，以便它們最終在所有設(shè)備中以相同的方式顯示。

　　5.多瀏覽器支持——CSS 享有多瀏覽器的支持。它與所有主要的互聯(lián)網(wǎng)瀏覽器兼容。

　　6.重新定位 – CSS 允許你定義頁面上存在的 Web 元素位置的變化。通過它的實現(xiàn)，開發(fā)人員可以將 HTML 元素放置在他們喜歡的位置，以便與頁面的美感或其他考慮因素保持一致。

　　7.網(wǎng)頁抓取 – CSS 有助于為你的網(wǎng)站啟用 SEO。通過將 CSS 合并到你的網(wǎng)頁中，搜索引擎可以更輕松地在搜索結(jié)果中找到你的頁面。

　　8.傳輸大小 - 它減少了文件傳輸大小。這導致更快的文件傳輸。

　　SCSS 是一種被中斷或編譯成 CSS 的預處理器語言。它是一種特殊類型的 SASS(Syntactically Awesome Style Sheets)。SCSS 的腳本是在 Saasscript 中完成的。SCSS 包含 CSS 的所有功能，還添加了一些額外的特殊功能。

　　使用 SCSS，我們可以向 CSS 添加許多附加功能，例如變量、嵌套等。與編寫傳統(tǒng) CSS 相比，所有這些附加功能可以使編寫 CSS 變得更加容易和快捷。

　　SCSS 生成瀏覽器可以通過在運行 Web 應用程序的服務(wù)器上運行 SCSS 文件來理解的傳統(tǒng) CSS。在 SASS 或 SCSS 中閱讀代碼比在 CSS 中閱讀要快。

　　SASS 和 SCSS 在語法方面的唯一區(qū)別是縮進 { } 的使用。換句話說，SCSS 只不過是帶有縮進的 SASS。

　　SCSS的優(yōu)勢

　　1.它有助于你在程序結(jié)構(gòu)中編寫干凈、簡單且更少的 CSS。

　　2.它包含的代碼更少，因此你可以更快地編寫 CSS。

　　3.它有很好的文檔，這意味著你可以在線獲取所有必需的信息。

　　4.它提供嵌套，因此你可以使用嵌套語法和有用的函數(shù)，如顏色操作、數(shù)學函數(shù)和其他值。

　　5.它與所有版本的 CSS 兼容。因此，你可以使用任何可用的 CSS 庫。

　　6.它由變量組成，這些變量有助于在整個 CSS 中根據(jù)需要多次重用這些值。

　　7.語法高亮是一種廣泛使用的 CSS 工具，在 SCSS 中得到支持。SCSS 允許你使用現(xiàn)有代碼，并在不改變代碼的外部行為的情況下幫助改進其內(nèi)部結(jié)構(gòu)。

　　CSS和SCSS的比較

　　1.SCSS 更具表現(xiàn)力——SCSS 在其代碼中使用的行數(shù)比 CSS 少，這使得代碼加載速度更快。

　　2.它鼓勵規(guī)則的正確嵌套——標準 CSS 不支持嵌套。我們不能在另一個類中編寫一個類。隨著項目變得越來越大，這帶來了可讀性問題，并且結(jié)構(gòu)看起來不太好。

　　3.語法 – SCSS 的語法包含 CSS 中缺少的縮進。

　　4.SCSS 允許用戶編寫更好的內(nèi)聯(lián)文檔——SASS 可以靈活地添加注釋，但任何優(yōu)秀的開發(fā)人員都會更喜歡 SCSS 中提供的內(nèi)聯(lián)文檔。內(nèi)聯(lián)文檔使代碼行不言自明。

　　5.更好的功能——在 SCSS 的幫助下，我們可以以 CSS 中不存在的變量、選擇器和嵌套的形式向代碼添加更多功能。

　　6.自定義 Bootstrap – 了解 SCSS 有助于自定義 Bootstrap 4。

　　7.數(shù)學運算——SCSS 允許我們使用運算符進行數(shù)學運算。我們可以在代碼中執(zhí)行簡單的計算以獲得更好的輸出。

　　盡管CSS提供了所有的工具，但有時很難掌握您控制的內(nèi)容。

介

scss是sass的另一種語法，Sass是一種CSS預處理器，允許開發(fā)者編寫更具結(jié)構(gòu)性、可維護性和動態(tài)性的樣式表

scss保持了css的語法結(jié)構(gòu)，同時具備sass的強大功能，可以簡單理解為一種增強版的css，除css含有功能外，還包含但不限于更優(yōu)的變量、嵌套規(guī)則、混合、函數(shù)、動態(tài)運算等，文件后綴名為scss

安裝與設(shè)置

在瀏覽器前端中，正常是不能直接使用scss的，其是一種CSS預處理器，即需要通過編譯，生成對應的css文件，再進行使用

首先需要安裝Node.js和npm
接著用npm安裝Sass，可以選擇全局安裝-g

編譯scss或sass為css

sass命令后接兩個路徑，第一個路徑example.scss為待編譯的scss文件所在路徑，第二個example.css為生成的css保存路徑，可以用相對路徑也可以用絕對路徑

基礎(chǔ)語法

SCSS整體語法與CSS基本類似，其是CSS的一個超集，在SCSS內(nèi)寫CSS也是完全可以的

注釋

SCSS的注釋主要有兩種形式，一種為//，另一種為/**/，與Js類似

變量

SCSS的變量用$來聲明，使用時直接通過$ + 名稱調(diào)用即可，變量數(shù)據(jù)可以是數(shù)字、字符串、顏色、布爾值、null，甚至還可以是List和Map

變量可以使用在幾乎任何需要的地方，如屬性值，屬性名合成、復雜運算、函數(shù)調(diào)用等

與CSS變量相比：

SCSS變量的作用域類似塊作用域，在一個規(guī)則內(nèi)定義的變量只能在該規(guī)則及其子規(guī)則內(nèi)使用；CSS變量的作用域是基于DOM樹結(jié)構(gòu)，變量在一個元素作用域內(nèi)定義，那么在該元素及其子元素的任何作用域(選擇器)內(nèi)均可使用
SCSS變量主要在編譯階段使用，其最終會將變量值整合到編譯后的CSS中，相當于變量值的占位符，不會包含在編譯后的CSS中；CSS變量主要在運行時使用，因此也可用JS動態(tài)更改

聲明規(guī)則：$name: value;

形式與樣式屬性類似，$后接名稱即為變量名，冒號后面跟變量值

變量聲明后，在其之后的位置依舊可以重新聲明賦值

舉個栗子

編譯后的CSS如下：

編譯后的CSS是比較簡潔的，SCSS的變量值在經(jīng)過計算后被整合到CSS中了

了解一下即可，我們在定義值為字符串的變量時，有兩種寫法，帶引號和不帶引號，兩者都能正常使用
帶引號的可用于表達式計算
不帶引號的一般不用于表達式計算(容易報錯)，而是直接使用

內(nèi)置變量

除了自己定義的變量外，SCSS還包含一些內(nèi)置變量，其分布在不同模塊內(nèi)，使用時需另行導入

示例如下

需注意的是，內(nèi)置變量是不支持重新自定義賦值的

嵌套

在使用CSS寫一些子元素樣式時，很多時候都需要帶上其父元素，以使選擇器更精準或提高其優(yōu)先級，但當大量書寫類似屬性時，每次都需要帶上其父元素選擇器，這其實的重復的工作

SCSS則可以規(guī)避這種情況，其支持嵌套使用

選擇器嵌套

子元素選擇器直接嵌套在父元素選擇器規(guī)則內(nèi)即可
在選擇器規(guī)則內(nèi)，可用&引用當前選擇器，常用于配合偽類選擇器使用，此時不會發(fā)生嵌套行為

編譯后的CSS如下：

屬性嵌套

嵌套除了用在選擇器外，其還可以用在樣式屬性中，如下：

編譯后如下：

算術(shù)運算

SCSS支持對變量或值進行運算，支持 +、-、*、/、%、==、!=、>、< 等運算符，對于不同單位之間的運算，運算結(jié)果取第一個值的單位，如果值之間只有一個有單位，則運算結(jié)果就取該單位

在介紹運算前，先介紹一個新的規(guī)則@debug，其用于幫助在開發(fā)過程中查看一些變量值或表達式值，SCSS運行后會將@debug后面的內(nèi)容輸出到控制臺，類似Js的輸出語句

比較運算

普通運算

需要注意的是，除法/比較特殊，其只在以下三種情況會進行除法運算：

值，或值的一部分，是變量或者函數(shù)的返回值
值被圓括號包裹
值是算數(shù)表達式的一部分

但是，如果你的SCSS版本較高，可能會收到一個warning警告，官方團隊不推薦直接使用/的形式進行除法運算，這是由于在CSS在/也作為分隔符使用

官方更推薦使用sass:math模塊的math.div函數(shù)或calc函數(shù)來執(zhí)行除法運算，如下：

顏色運算

除了普通值運算外，SCSS還支持顏色值之間的運算

需注意的是，這在高版本的SCSS中已經(jīng)棄用，高版本如需計算顏色，推薦使用sass:color模塊內(nèi)的顏色函數(shù)

插值

插值，即將SCSS表達式用#{}包圍，作用是將SCSS表達式結(jié)果嵌入到CSS中

插值幾乎可以使用在SCSS樣式表的所有位置，如：選擇器名、屬性名、屬性值、變量值、動畫名等

編譯后的CSS為：

帶引號字符串

在插值內(nèi)使用帶引號的字符串時，解析時會將引號去掉

編譯后為：

使用時需思考是否要帶引號，否則可能導致超乎預期的結(jié)果

導入

一個項目的樣式往往是很多的，而我們一般不會將其完全放在一個文件內(nèi)，一般會按某種規(guī)則區(qū)分，存放于多個文件內(nèi)，不同文件需共享時就導入

SCSS與CSS具有類似的導入語法@import，其允許多個導入用逗號分隔，導入文件后綴sass/scss可省略，如下：

但是，官方團隊不鼓勵繼續(xù)使用該規(guī)則，其將在未來幾年內(nèi)逐步淘汰它，并最終從語言中刪除

原因是：

@import使所有變量、混入和函數(shù)都可以全局訪問，這使得人們很難分辨任何定義的位置
由于一切都是全局的，因此庫必須為其所有成員添加前綴，以避免命名沖突
@extend規(guī)則也是全局性的，這使得很難預測哪些樣式規(guī)則將被擴展
每個樣式表的@import都會被執(zhí)行，每次編輯時都會重新輸出CSS，這會增加編譯時間并產(chǎn)生臃腫的輸出
無法定義下游樣式表無法訪問的私有成員或占位符選擇器

官方更推薦使用@use來導入模塊，以這種方式加載的任何樣式都將在編譯的 CSS 輸出中只包含一次，無論這些樣式被加載了多少次

@use具有和@import同樣的功能，并且它還具有命名空間，以避免命名沖突，默認其命名空間即為文件名，也可以用as設(shè)置

對于自己編寫的文件，如果不在意命名沖突，也可完全導入，此時即可直接使用

高級功能

除了一些常見功能外，SCSS還具備一些高級功能，如：控制語句、函數(shù)等

條件和循環(huán)

條件語句主要使用@if和@else、@else if，效果于常見編程語言類似，如下：

以上SCSS會根據(jù)$pos變量值動態(tài)選擇生成的justify-content

編譯后CSS為：

循環(huán)語句主要有三個：@each、@for和@while

@each主要可用于變量List或Map

編譯后CSS

@for主要是從一個數(shù)字遍歷到另一個數(shù)字，有兩種形式：

@for <索引變量名> from <a> to <b>，這種不包含最后一個數(shù)字，范圍為[a, b)
@for <索引變量名> from <a> through <b>，這種會包含最后一個數(shù)字，范圍為[a, b]

編譯后的CSS如下：

@while是基于表達式結(jié)果的循環(huán)，當結(jié)果為false時退出循環(huán)

編譯后的CSS為：

函數(shù)

與Js類似，函數(shù)用于封裝、定義一些復雜操作

參數(shù)：函數(shù)的參數(shù)主要支持以下幾類：

普通參數(shù)：與變量名聲明差不多，多個參數(shù)用,逗號分隔
可選參數(shù)：到默認值的參數(shù)，默認值可以是任何表達式，甚至可以引用前面的參數(shù)
任意參數(shù)：聲明參數(shù)時，參數(shù)名最后以...結(jié)尾，表示接收余下所有參數(shù)

返回：需返回值可采用@return返回
調(diào)用：調(diào)用通過函數(shù)名調(diào)用，括號內(nèi)傳參數(shù)，除了按順序傳參數(shù)之外，還可通過關(guān)鍵字傳參，即使用參數(shù)名后冒號跟值的方式

一些示例如下：

有趣的事實
與所有Scss標識符一樣，函數(shù)名稱將連字符和下劃線視為相同，這意味著is-center和is_center兩者都引用相同的函數(shù)，這是早期的歷史遺留物，當時它只允許在標識符名稱中使用下劃線

混入

使用@mixin定義，使用@include引用，用于定義一些可以在整個樣式表中重復使用的樣式，其與函數(shù)類似，也可執(zhí)行復雜操作、傳入?yún)?shù)等，主要用于定義一些復雜的、規(guī)則的通用樣式

語法如下：

@mixin <name> {語句}
@mixin <name> (參數(shù)列表) {語句}

引用如下：

@include <name>
@include <name>(參數(shù)值列表)

一些示例

@content用于表示自定義內(nèi)容，使用時會將{}內(nèi)的內(nèi)容注入到@content所占位置

繼承

繼承是基于選擇器的，其實現(xiàn)一個選擇器可以繼承另一個選擇器的所有樣式，包括組合樣式(如偽類選擇器樣式)

默認瀏覽器樣式不可繼承，因為其不屬于樣式表樣式

示例

編譯后的CSS如下：

編譯與調(diào)試

SCSS是一款CSS預處理器，其具備部分高級編程語言的特性，因此其需要經(jīng)過編譯使用，其也可以進行調(diào)試

編譯

SCSS是需要經(jīng)過編譯，變成CSS才可以正常使用的，這在上面已經(jīng)提到

編譯單個文件比較簡單，在命令行輸入sass空格后接文件名即可，如需生成對應CSS文件，則在原有命令后再接空格加生成文件名即可

不想每次都運行命令重新編譯，也可以通過添加命令參數(shù)--watch以監(jiān)聽編譯，此時不必關(guān)閉控制臺，系統(tǒng)會監(jiān)聽所編譯SCSS文件的變化，但內(nèi)容改變則重新編譯，具體如下

如需停止監(jiān)聽，只需在控制臺按Ctrl + C即可

調(diào)試

SCSS提供了幾個命令用于開發(fā)調(diào)試

@debug用于輸出調(diào)試內(nèi)容
@warn用于輸出警告內(nèi)容，不會終止程序運行編譯，但控制臺會有警告信息
@error用于輸出錯誤信息，會終止程序運行編譯，同時在控制臺輸出錯誤信息

參考資料

SCSS模塊文檔：https://sass.bootcss.com/documentation/modules.html
SCSS官網(wǎng)：https://sass.bootcss.com

在線咨詢

上一篇：Logbook：Python 快速日志記錄實踐
下一篇：18個精選開源免費的文件管理工具

您的項目需求

*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商