快速學sass 一 簡介

2021-07-28 11:28:41 字數 2128 閱讀 9371

sass 是一門高於 css 的元語言,它能用來清晰地、結構化地描述檔案樣式,有著比普通 css 更加強大的功能。

sass 能夠提供更簡潔、更優雅的語法,同時提供多種功能來建立可維護和管理的樣式表。

sass 和 scss 其實是同一種東西,我們平時都稱之為 sass,兩者之間不同之處有以下兩點: 副檔名不同,sass是以「.sass」字尾為副檔名,而 scss 是以「.scss」字尾為副檔名 語法書寫方式不同,sass是以嚴格的縮排式語法規則來書寫,不帶大括號({})和分號(;),而 scss 的語法書寫和我們的 css 語法書寫方式非常類似。

先來看乙個示例:

sass 語法

由於 sass 是基於 ruby 寫出來,所以其延續了 ruby 的書寫規範。在書寫 sass 時不帶有大括號和分號,其主要是依靠嚴格的縮排方式來控制的。

$primary-color: #333

//定義變數

body

color: $primary-color

scss 語法

$primary-color: #333;

body

編譯出來的 css

這裡說的 sass 語法是 sass 的最初語法格式,他是通過 tab 鍵控制縮排的一種語法規則,而且這種縮排要求非常嚴格。另外其不帶有任何的分號和大括號。常常把這種格式稱為 sass 老版本,其檔名以「.sass」為副檔名。

來看乙個 sass 語法格式的簡單示例。假設我們有一段這樣的 css **:

body

現在用 sass 的語法格式來編寫:

$font

-stack: helvetica, sans-serif

$primary

-color: #333

body

font: 100

%$font

-stack

color: $primary

-color

在整個 sass **中,我們沒看到類似 css 中的大括號和分號。

注:這種語法格式對於前端人員都不太容易接受,而且容易出錯。

scss 是 sass 的新語法格式,從外形上來判斷他和 css 長得幾乎是一模一樣,**都包裹在一對大括號裡,並且末尾結束處都有乙個分號。其檔名格式常常以「.scss」為副檔名。

同樣的這段 css **:

body

我們使用 scss 語法格式將按下面這樣來書寫:

$font

-stack: helvetica, sans-serif;

$primary

-color: #333;

body

這樣的語法格式對於從事前端工作的同學來說更易於接受,這也是 scss 為什麼更被前端人員青眯的原因。

不管是 sass 的語法格式還是 scss 的語法格式,他們的功能都是一樣的,不同的是其書寫格式和副檔名不同,正因為如此,有不少同學使用 sass 新的語法規則,而副檔名依舊使用的是「.sass」,這也就造成血案了,編譯時說編譯不出來。在此特別提醒新同學:「.sass」只能使用 sass 老語法規則(縮排規則),「.scss」使用的是 sass 的新語法規則,也就是 scss 語法規則(類似 css 語法格式)。

常常有人會問,使用 sass 進行開發,那麼是不是直接通過「」引用「.scss」或「.sass」檔案呢?

那麼這裡告訴大家,在專案中還是引用「.css」檔案,sass 只不過是做為乙個預處理工具,提前幫你做事情,只有你需要時候,他才有功效。那麼sass寫完了如何編譯為css檔案呢?

請戳這裡看我的「快速學sass(二)」。

快速學sass 二 編譯

1.命令列編譯 單檔案轉換命令 sass style.scss style.css在實際編譯過程中,你會發現上面的命令,只能一次性編譯。每次個性儲存 scss 檔案之後,都得重新執行一次這樣的命令。如此操作太麻煩,其實還有一種方法,就是在編譯sass 時,開啟 watch 功能,這樣只要你的 進行任...

Sass快速上手

sass的學名叫 css預處理器 就是在css的基礎上,引入了變數 巢狀 mixin 混合 運算以及函式等功能,增加了 的靈活性,可以讓我們以更少的 實現同樣的效果,而且 的整潔度 可讀性更強。sass檔案還是需要先編譯為css檔案才能正常被瀏覽器識別。sass字尾的檔案 使用類ruby的語法,格式...

密碼學簡介(一)

本文簡單介紹密碼編碼學領域的一些基本原理,基本演算法和基本理念。僅針對原先對此領域無甚了解的朋友做入門之用。加密解密是資訊保安領域的基本技術,加解密系統中的基本概念從下面這張常規加密的簡化模型中就可以知道個大概。從圖中可以看出,明文輸入在金鑰k1的作用之下,通過加密演算法 如des 轉換成密文,於是...