Sass 環境除錯

2021-07-11 19:40:31 字數 1247 閱讀 5276

css的預編譯工具有很多 :less , sass , stylus , postcss 等等 。css預處理器用一種專門的程式語言,進行web頁面樣式設計,然後再編譯成正常的css檔案,以供專案使用。

為css增加一些程式設計的特性,無需考慮瀏覽器的相容性問題,例如你可以在css中使用變數、簡單的邏輯程式、函式等等在程式語言中的一些基本特性,

可以讓你的css更加簡潔、適應性更強、可讀性更佳,更易於**的維護等諸多好處。

sass 是什麼 ?

sass (syntactically awesome stylesheets) is the most mature, stable, and powerful professional grade css extension language in the world.(sass是世界上最成熟、最穩定、最強大的專業級css擴充套件語言!)

sass可以讓你的css更加簡潔、適應性更強、可讀性更佳,更易於**的維護

為什麼使用 sass ?

完全相容所有版本的css

特性豐富

成熟行業認可

社群龐大

擁有較多的框架

環境配置: 有兩種安裝方式,乙個是使用應用程式,二是使用命令列,我們只說下windows下的命令列的演示。安裝

除錯 編譯

編譯時控制不同格式的輸出

或者可以使用nodejs環境來編譯

自動編譯

我們想只要scss 檔案已改動,那麼對應的生成的css也會立即更新,我們需要對檔案或者是專案進行監視。

也可以使用sublime 來自動編譯

或者使用webstorm 來自動編譯

sass 中的repl環境

擴充套件知識 :

sass中有兩種格式 : 一種是 sass字尾的檔案,一種是scss字尾的檔案。我們推薦使用scss字尾的檔案。

兩者的區別和聯絡為:都使用嚴格的縮排方式,但是 sass 中沒有花括號({}),沒有分號(;) , 而 scss 中有花括號和分號,使用起來方便。

簡單舉個例子區分:在以sass為字尾的檔案中是這樣的:

$border:1px

.box

border:$border

color:red

在以scss為字尾的檔案中是這樣的:

$border

:1px;

.box

所以我們更推薦使用scss的檔案格式。

配置SASS環境

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

sass的安裝以及除錯

sass 教程 1 1 sass 簡介 css 不是乙個程式語言,可以用它來開發網頁樣式,但是沒有辦法用它進行程式設計。sass 的 出現,讓 css 實現了通過 程式設計來實現的方式。so sass 是一種 css 開發工具,提供了許多便利的寫法,讓 css 的處理實現了可程式設計 處理。sass...

centos安裝sass環境必看

首先了解一下 sass是什麼?sass號稱 世界上最成熟 最穩定 最強大的專業級css擴充套件語言 sass基於於ruby語言開發而成,因此安裝sass前需要 安裝ruby,1.安裝ruby yum install ruby 2.安裝完成後需測試安裝有沒有成功,執行cmd輸入以下命令 ruby v ...