Sass學習筆記 Sass的編譯

2022-02-09 03:28:03 字數 1873 閱讀 5971

命令列編譯

gui 介面工具編譯

一般教程(

ide自助編譯

webstorm設定

點選左上角的filesettingsfile watchers

在彈窗的視窗的右上角點選綠色的 『+』 號,然後選擇scss

arguments(配置編譯後的檔案的輸出路徑)

四種編譯後css樣式

這裡有一段scss

巢狀輸出方式 (nested)

sass --watch test.scss:test.css --style nested

css展開輸出方式 ( expanded )

(編譯結果css檔案與第一種基本相同,只不過結束的大括號需要獨佔一行)

緊湊輸出方式 compact

艾瑪,令強迫症患者不安的單行樣式出現了

壓縮輸出方式 compressed

輸的的css **被壓縮為單行寫法,隨著我們以後工作中大量使用sass直接寫樣式,css**輸出一般為單行壓縮式。

Sass學習筆記

安裝 2.開啟ruby的命令視窗 start command prompt with ruby 輸入gem install sass gem install sass pre 要安裝beta版本的 gem update sass 公升級sass vsass hgit安裝 git clone git ...

Sass學習筆記

1.全域性變數p background color color red span div2.default 第二種,使用前面定義的值 color red 變數申明帶有 default,但是前面還有這個變數的申明 color blue default p3.變數用 包裹 btnclass btn de...

Sass學習筆記。

定義 css預處理器定義了一種新的語言,其基本思想是,用一種專門的程式語言,為css增加了一些程式設計的特性,將css作為目標生成檔案,然後開發者就只要使用這種語言進行編碼工作。採用ruby語言編寫的一款css預處理語言 副檔名 sass 嚴格的縮排式語法 scss 與平時css語法書寫類似 scs...