sass 的基礎應用 ruby

2021-07-27 22:21:53 字數 727 閱讀 3554

1.驗證sass是否安裝成功,我使用的是ruby

啟動webstrom  

執行sass -v  顯示如下圖表示安裝成功。==== ( 具體如何安裝 見 sass 安裝  )

cd 到你的要sass編譯的目錄 

sass檔案就是普通的文字檔案,裡面可以直接使用css語法。檔案字尾名是.scss,意思為sassy css。

下面的命令,可以在螢幕上顯示.scss檔案轉化的css**。(假設檔名為test。)

sass test.scss

如果要將顯示結果儲存成檔案,後面再跟乙個.css檔名。

sass test.scss  test.css

sass提供四個編譯風格的選項:

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

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

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

* compressed:壓縮後的css**。

生產環境當中,一般使用最後乙個選項。

sass --style compressed test.sass test.css

你也可以讓sass監聽某個檔案或目錄,一旦原始檔有變動,就自動生成編譯後的版本。

sass 開篇到這裡。後面會說一些sass的基本語法結構

SASS的安裝及使用(前提 安裝Ruby)

本文僅適用於windows系統。一 安裝ruby sass是用ruby語言寫的,但是兩者的語法沒有關係,所以學 sass 不用學 ruby,只是必須先安裝ruby,然後再安裝sass。安裝過程沒什麼麻煩的地方,按提示來就可以。二 安裝sass 進入執行cmd進入命令提示符,輸入ruby v檢視版本號...

sass基礎語法

變數 width 300px 定義乙個變數 width width 使用定義的變數 str hello.jpeg background image url img str 使用 拼接 background image url img 使用 拼接資料型別 width 300px number div ...

前端基礎 sass的使用

安裝ruby。再配置環境變數,如 c ruby23 x64 bin安裝sass gem install sassscss 是 sass 3 引入新的語法,其語法完全相容 css3,並且繼承了 sass 的強大功能。也就是說,任何標準的 css3 樣式表都是具有相同語義的有效的 scss 檔案。另外,...