SASS基礎教程

2021-07-15 11:59:03 字數 1309 閱讀 5452

最近一直被泡在前端窯子裡,因此也接觸到一些不新鮮又新鮮的東西,其中今天我們就要學習

sass

一、sass是什麼?

它是對css的擴充套件,讓css語言更強大。優雅。

允許使用變數、巢狀規則、繼承、自定義函式、條件語句等一系列功能,並且能夠完全相容css語法。

二、安裝和使用

2.1 安裝

sass是ruby語言寫的,因此在安裝sass之前必須先安裝ruby。

假如你已經安裝好了ruby,那麼在命令列輸入如下命令就可以使用了:

gem install sass

允許使用變數、巢狀規則、繼承、自定義函式、條件語句等一系列功能,並且能夠完全相容css語法。

2.2 使用

sass檔案其實就是普通的文字檔案,裡面可以直接編寫css**,檔名字尾必須是.scss。

下面的命令演示如何將.scss檔案輸出為.css檔案。(假如檔名為test)

sass test.scss test.css

sass提供如下幾種編譯風格:

* nested:巢狀縮排的css**,它是預設值;

* expanded:沒有縮排的、擴充套件的css**;

* compact:簡潔的css**格式;

* compressed:壓縮後的css**;

生產環境中,我們一般選擇最後一種,如下:

sass --style compressed test.sass test.css

也可以讓sass監聽某個檔案或目錄,一旦原始檔有變動,就會自動編譯。

//監聽檔案

sass --watch input.scss:output.css

//監聽目錄

sass --watch pro/sass:public/css

2.3實踐

2.3.1 變數:

2.3.2 偽類:

2.3.3 巢狀:

2.3.4 繼承(@extend):

2.3.5 引入(@mixin和@include):

2.3.6 傳參(@mixin和@include()):

2.3.7 插入檔案(@import)

@import "path/filename.scss";

@import "filename.css";

2.3.8 迴圈(for/while/each)

for:

while:

each:

XSL基礎教程

xsl基礎教程 一 http www 128.ibm.com developerworks cn xml ccidnet xslfund index1.html xsl基礎教程 二 http www.ibm.com developerworks cn xml ccidnet xslfund inde...

ps基礎教程

ps基礎教程 軟體簡介 推薦版本 流行多用的版本cs2 cs5,推薦cs3和cs5,cs2版本較舊,不推薦使用。基礎教學目錄 第一課 photoshop工具欄的使用01 第二課 工具欄的使用02 第三課 photoshop圖層 第四課 色彩原理和圖層的混合模式 第五課 圖層的樣式 第六課 圖層蒙版和...

php基礎教程

本教程旨在以最簡單 最易懂的方式,讓讀者對php有個整體上的把握和了解,並具備基本的php程式設計能力。本教程並不講環境搭建和一些技術竅門,但會提供一些示例,方便讀者理解概念。php可以用來作 和手機應用的伺服器介面,很多大型公司的 再用php做。php可以給手機應用提供伺服器介面。以.php結尾的...