css預處理器sass學習

2022-04-07 09:41:58 字數 1139 閱讀 8121

叫做css預處理器，他的基本思想是用一門專門的程式語言來進行頁面樣式的設計，然後在編譯成正常的css檔案。

sass的用法

gem install sass
使用sass就是普通的文字檔案，字尾名為.scss。然後讓我們用sass的語法寫好檔案之後，需要編譯成.css檔案才能供html檔案使用（即通過link標籤引入html檔案），那麼我們就可以使用命令列或是git工具，輸入：

sass test.scss test.css #假設我們的sass檔名為test
下面是乙個具體編譯sass的例子：

首先我們在資料夾中建上圖這樣的兩個檔案：.html、.scss

然後在兩個檔案中分別寫入**：

乙個關於css預處理器sass的小練習		


/* scss */


$blue:red;


div
然後我們在用git將scss**編譯成.css**，將得到如下三個檔案，其中乙個就是我們需要的.css檔案。

執行html將得到如下結果。

sass語法基礎

如果變數需要嵌入在字串中，我們就必須把他們放在#{}中。

$side : right;


.rounded -radius: 5px;


}
屬性也可以巢狀：border-color

border後面必須加冒號

div }}
在巢狀的**塊內，可以使用&來引用父元素，如：a:hover偽類，可寫為：

a 


}
**的重

css預處理器

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

CSS預處理器

什麼是css預處器？css 預處理器用一種專門的程式語言，進行 web 頁面樣式設計，然後再編譯成正常的 css 檔案，以供專案使用。css 預處理器為 css 增加一些程式設計的特性，無需考慮瀏覽器的相容性問題 sass sass 是採用 ruby 語言編寫的一款 css 預處理語言，它誕生於20...

css預處理器

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