sass 系列之 sass配置與編譯

2021-08-14 19:10:45 字數 1786 閱讀 4929

/*1.刪除gem源*/

gem sources --move

//2.新增國內gem源

gem sources --add

//3.檢查是否替換成功

gem sources -l

如果替換成功,會如下顯示:

在命令列中使用gem指令安裝sass 和compass。

gem install sass

gem install compass

好了。以上步驟完成之後,sass的環境就安裝好了。

sass的編譯有很多種方式,如命令列編譯模式,sublime外掛程式sass-build、編譯軟體koalad等等進行編譯:

命令列編譯

在乙個空目錄下建立乙個demo.scss檔案隨意書寫一些scss**,然後在這個目錄下,匯出cmd命令視窗,然後輸入如下命令

然後在該目錄下就會自動生成如下檔案(demo.css即為編譯好的css檔案)

以上方式每更改一次scss檔案內容,都要重新編譯一次,所以,sass提供了乙個監聽功能

//通過監視scss檔案,如若scss內容改變,那麼會自動開始編譯

sass --watch demo.scss:demo.css

//在命令列下關閉監聽 ctrl+c

sass --watch sass:stylesheets

命令列編譯配置選項命令列編譯sass的配置選項,如編譯過後css排版,生成除錯map,開啟debug資訊等,可以通過sass-v檢視詳細,常用的有兩種配置選項,–style –sourcemap

//

編譯格式

sass--

watch

input

.scss:output

.css--

style

compact

//編譯新增除錯map

sass--

watch

input

.scss:output

.css--

sourcemap

//選擇編譯格式並新增除錯map

sass--

watch

input

.scss:output

.css--

style

expanded--

sourcemap

//開啟debug資訊

sass--

watch

input

.scss:output

.css--

debug

-info

–style 表示解析之後的css的排版格式,sass內建的css排版格式有四種

nested expended(正常開發格式) compact compressed(壓縮格式)

軟體方式編譯 - koala

配置SASS環境

安裝sass 安裝好ruby之後,在開始介面會有乙個 start command prompt with ruby的檔案使用管理員身份開啟他 然後輸入命令 gem install sass 這個就是安裝sass了 但是有的時候會出錯那是因為被牆了不能安裝,一些大型 提供了一些映象下面就介紹用映象來安...

Sass 初識Sass與Koala工具的使用

找到合適的系統版本 並安裝 二 先新建乙個css資料夾,並在裡面新建乙個文字文件 txt 將其命名為demo.scss 三 開啟koala,將css資料夾拽進來,可以修改一下輸出方式 擴充套件 sass提供四個編譯風格的選項 四 又到了寫 的時候啦,隨便用一款文字編寫工具開啟demo.scss 1....

Sass教程九 Sass知識點之 繼承

extend 繼承 在設計網頁的時候常常遇到這種情況 乙個元素使用的樣式與另乙個元素完全相同,但又新增了額外的樣式。通常會在 html 中給元素定義兩個 class,乙個通用樣式,乙個特殊樣式。那麼通過 extend我們可以這樣寫 通用樣式 normal 特殊樣式 special 編譯過後 norm...