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

2021-09-27 13:05:42 字數 1269 閱讀 6331

本文僅適用於windows系統。

一、安裝ruby

sass是用ruby語言寫的,但是兩者的語法沒有關係,所以學 sass 不用學 ruby,只是必須先安裝ruby,然後再安裝sass。

安裝過程沒什麼麻煩的地方,按提示來就可以。

二、安裝sass

進入執行cmd進入命令提示符,輸入ruby -v檢視版本號,如果能正確顯示版本號,則說明ruby安裝成功。

然後輸入gem install sass進行安裝。

可能會出現下圖(提示could not find a valid gem 'sass')的情況,可以參考這篇文章解決。

正常情況下顯示的結果是這樣的:

三、使用sass

要編譯的scss檔案(mystyle.scss)如下:

$*****-time: 8s;

$box-size: 350px;

$clip-distance: .05;

$clip-size: $box-size * (1 + $clip-distance * 2);

$path-width: 2px;

$main-color: #5fb9d5;

$codepen-logo-path: url('');

%full-fill .bb &::before // for debug

&:hover }

}@keyframes clipme 25% 50% 75% }

/html,

body body *,

*::before,

*::after

進入需要編譯的scss所在的目錄,執行sass style.scss style.css

之後可在該目錄獲得編譯後的css檔案以及css.map檔案。

scss檔案相當於原始檔,css相當於編譯後的檔案,當檢查到頁面問題的時候,看到的是css,但是需要修改的是scss檔案,這個css.map就是兩個檔案的對應關係表。

Sass安裝及基本語法

sass 是乙個 css 預處理器。sass 是 css 擴充套件語言,可以幫助我們減少 css 重複的 節省開發時間。sass 完全相容所有版本的 css。sass 擴充套件了 css3,增加了規則 變數 混入 選擇器 繼承 內建函式等等特性。sass 生成良好格式化的 css 易於組織和維護。s...

Mac 安裝 Sass 和使用

mac 的 os x 系統自帶 ruby,所以 mac 這步就可以跳過。gem install sass 如果出現permitted問題通常是許可權問題,先嘗試下面 sudo gem install sass 如果安裝無限等待嘗試下面替換rubygems映象 gem sources remove 如...

SASS從安裝到使用

新建目錄如圖 sass cache檔案不用管,只需要新建css資料夾,檔案內的內容不用新建。新建sass資料夾,sass資料夾下有main資料夾包含乙個main.sass檔案同理module和page.這樣寫的目的是為了整體結構的完善這樣寫好頂層的架構方便日後維護 接下來 最重要的core.sass...