CSS預處理器

2021-08-21 17:20:03 字數 1073 閱讀 5671

什麼是css預處器?

css 預處理器用一種專門的程式語言,進行 web 頁面樣式設計,然後再編譯成正常的 css 檔案,以供專案使用。css 預處理器為 css 增加一些程式設計的特性,無需考慮瀏覽器的相容性問題

sass:

sass 是採用 ruby 語言編寫的一款 css 預處理語言,它誕生於2023年,是最大的成熟的 css 預處理語言。最初它是為了配合 haml(一種縮排式 html 預編譯器)而設計的,因此有著和 html 一樣的縮排式風格

雖然縮排式風格可以有效縮減**量,強制規範編碼風格,但它一方面並不為大多數程式接受,另一方面無法相容已有的 css **。這也是 sass 雖然出現得最早,但遠不如 less 普及的原因

sass 和 scss 其實是同一種東西,我們平時都稱之為 sass,兩者之間不同之處有以下兩點:

副檔名不同,sass 是以「.sass」字尾為副檔名,而 scss 是以「.scss」字尾為副檔名

語法書寫方式不同,sass 是以嚴格的縮排式語法規則來書寫,不帶大括號{}和分號; ,而 scss 的語法書寫和我們的 css 語法書寫方式非常類似

less(css預處理語言):

less 是一門 css 預處理語言,它擴充了 css 語言,增加了諸如變數、混合(mixin)、函式等功能,讓 css 更易維護、方便製作主題、擴充。less 可以執行在 node 或瀏覽器端

stylus:可以省略原生css中的大括號{},逗號, 和分號 ;類似於python語言的程式設計風格

舉個例子:

1、body

divcolor white

轉化為:

body div

2、多個選擇器可以使用同乙個樣式

textarea

input

border 1px solid #eee

轉化為:

textarea

input

3、變數:沒有字首,直接用等號賦值

main-color = #555

color main-color

等……由於其語法靈活的問題,如果沒有團隊規範,那麼就會帶來團隊開發混亂,維護起來比較麻煩,各種語法混雜。

css預處理器

css預處理定義了一種新的語言,其思想是一種專門的程式語言,為css增加了一些程式設計的特性。將css作為目標生成檔案。開發者可以使用這種語言進行編碼工作。css預處理器是一種專門的程式語言,進行web頁面樣式設計,然後再編譯成正常的css檔案,以供專案使用。css預處理器為css增加了一些程式設計...

css預處理器

sass less是什麼?大家為什麼要使用他們?他們是css預處理器。他是css上的一種抽象層。他們是一種特殊的語法 語言編譯成css。less是一種動態樣式語言.將css賦予了動態語言的特性,如變數,繼承,運算,函式.less 既可以在客戶端上執行 支援ie 6 webkit,firefox 也可...

CSS(預處理器)

less是一種動態樣式語言,屬於css預處理器的範疇,它擴充套件了 css 語言,增加了變數 mixin 函式等特性,使 css 更易維護和擴充套件。less 既可以在客戶端上執行 也可以借助node.js在服務端執行。less的中文官網 bootstrap中less教程 以 開頭的注釋,不會被編譯...