sass安裝

什麼是 CSS 預處理器?

定義:css

CSS 預處理器定義了一種新的語言,其基本思想是,用一種專門的編程語言,爲 CSS 增長了一些編程的特性,將 CSS 做爲目標生成文件,而後開發者就只要使用這種語言進行編碼工做。前端

通俗的說,「CSS 預處理器用一種專門的編程語言,進行 Web 頁面樣式設計,而後再編譯成正常的 CSS 文件,以供項目使用。CSS 預處理器爲 CSS 增長一些編程的特性,無需考慮瀏覽器的兼容性問題」,例如你能夠在 CSS 中使用變量簡單的邏輯程序函數(如右側代碼編輯器中就使用了變量$color)等等在編程語言中的一些基本特性,可讓你的 CSS 更加簡潔適應性更強可讀性更佳更易於代碼的維護等諸多好處。編程

其它 CSS 預處理器語言:windows

CSS 預處理器技術已經很是的成熟,並且也涌現出了不少種不一樣的CSS 預處理器語言,好比說:瀏覽器

  • Sass(SCSS)
  • LESS
  • Stylus
  • Turbine
  • Swithch CSS
  • CSS Cacheer
  • DT CSS

如此之多的 CSS 預處理器,那麼「我應該選擇哪一種 CSS 預處理器?」也相應成了最近網上的一大熱門話題,在 LinkedinTwitterCSS-Trick知乎以及各大技術論壇上,不少人爲此爭論不休。相比過去咱們對是否應該使用 CSS 預處理器的話題而言,這已是很大的進步了。sass

到目前爲止,在衆多優秀的 CSS 預處理器語言中就屬 SassLESS 和 Stylus 最優秀,討論的也多,對比的也多。本教程將着重向你們介紹 CSS 預處理器中的 Sass。相信前端開發工程師會喜歡的。ruby

什麼是 Sass?

Sass 官網上是這樣描述 Sass 的:網絡

Sass 是一門高於 CSS 的元語言,它能用來清晰地、結構化地描述文件樣式,有着比普通 CSS 更增強大的功能。 Sass 可以提供更簡潔更優雅的語法,同時提供多種功能來建立可維護和管理的樣式表。

Sass 前世此生:框架

Sass 是最先的 CSS 預處理語言,有比 LESS 更爲強大的功能,不過其一開始的縮進式語法(Sass 老版本語法,後面課程會詳細介紹 )並不能被大衆接受,不過因爲其強大的功能和 Ruby on Rails 的大力推進,仍是有不少開發者選擇了 Sass。編程語言

Sass 是採用 Ruby 語言編寫的一款 CSS 預處理語言,它誕生於2007年,是最大的成熟的 CSS 預處理語言。最初它是爲了配合 HAML(一種縮進式 HTML 預編譯器)而設計的,所以有着和 HTML 同樣的縮進式風格。

爲何早期不如 LESS 普及?

雖然縮進式風格能夠有效縮減代碼量,強制規範編碼風格,但它一方面並不爲大多數程序接受,另外一方面沒法兼容已有的 CSS 代碼。這也是 Sass 雖然出現得最先,但遠不如 LESS 普及的緣由。

Sass 和 SCSS 有什麼區別?

Sass 和 SCSS 實際上是同一種東西,咱們平時都稱之爲 Sass,二者之間不一樣之處有如下兩點:

  1. 文件擴展名不一樣,Sass 是以「.sass」後綴爲擴展名,而 SCSS 是以「.scss」後綴爲擴展名
  2. 語法書寫方式不一樣,Sass 是以嚴格的縮進式語法規則來書寫,不帶大括號({})和分號(;),而 SCSS 的語法書寫和咱們的 CSS 語法書寫方式很是相似。

先來看一個示例:

Sass 語法

$font-stack: Helvetica, sans-serif  //定義變量 $primary-color: #333 //定義變量  body   font: 100% $font-stack   color: $primary-color

SCSS 語法

$font-stack: Helvetica, sans-serif; $primary-color: #333;  body {   font: 100% $font-stack;   color: $primary-color; }

編譯出來的 CSS

body {   font: 100% Helvetica, sans-serif;   color: #333; }

 

 

Sass/SCSS 和純 CSS 寫法差不少嗎?

 

寫法差不少嗎?這是不少初學者會問的一個問題。那麼藉此機會簡單瞭解一下。

Sass 和 CSS 寫法有差異:

Sass 和 CSS 寫法的確存在必定的差別,因爲 Sass 是基於 Ruby 寫出來,因此其延續了 Ruby 的書寫規範。在書寫 Sass 時不帶有大括號分號,其主要是依靠嚴格的縮進方式來控制的。如:

Sass寫法:

body   color: #fff   background: #f36

而在 CSS 咱們是這樣書寫:

body{   color:#fff;   background:#f36; }

SCSS 和 CSS 寫法無差異:

SCSS 和 CSS 寫法無差異,這也是 Sass 後來愈來愈受大衆喜歡緣由之一。簡單點說,把你現有的「.css」文件直接修改爲「.scss」便可使用。

Sass安裝(windows版)

在 Windows 平臺下安裝 Ruby 須要先有 Ruby 安裝包,你們能夠到 Ruby 的官網(http://rubyinstaller.org/downloads)下載對應須要的 Ruby 版本。

Ruby 安裝文件下載好後,能夠按應用軟件安裝步驟進行安裝 Ruby。在安裝過程當中,我的建議將其安裝在 C 盤下,在安裝過程當中選擇第二個選項(不選中,就會出現編譯時找不到Ruby環境的狀況),以下圖所示:

Ruby 安裝完成後,在開始菜單中找到新安裝的 Ruby,並啓動 Ruby 的 Command 控制面板,以下圖所示:

當你的電腦中安裝好 Ruby 以後,接下來就能夠安裝 Sass 了。一樣的在windows下安裝 Sass 有多種方法。但這幾種方法都是很是的簡單,只須要在你的命令終端輸入一行命令便可。

   一、經過命令安裝 Sass

打開電腦的命令終端,輸入下面的命令:

gem install sass

提醒一下,在使用 Mac 的同窗,可能須要在上面的命令前加上"sudo",才能正常安裝:

sudo gem install sass

若是上面的方法沒有安裝成功,可使用下面的兩種方法。

   二、經過 Compass 來安裝 Sass

除了使用 gem 命令來安裝 Sass 以外,還能夠經過安裝 compass來安裝 Sass,由於 Compass 是基於 Sass 開發的一個框架。也就是說,你安裝了 Compass,也就同時安裝好了 Sass。

一樣的在你的命令終端輸入下面的命令:

sudo gem install sass

執行完上面的命令以後,就開始安裝 Compass 和 Sass。

注:Compass 是一個成熟的、基於 Sass 開發的一個框架,這裏面集成了不少寫好的 mixins 和 Sass 函數。不過在此暫不作過多闡述。

   三、本地安裝 Sass

因爲有時候直接使用上面的命令安裝會讓你沒法正常實現安裝(網絡受限緣由),當碰到這種狀況之時,那麼安裝須要特殊去處理,能夠經過下面的方法來實現 Sass 的正常安裝:

能夠到 Rubygems(http://rubygems.org/) 網站上將 Sass 的安裝包(http://rubygems.org/gems/sass)下載下來,而後在命令終端輸入:

gem install <把下載的安裝包拖到這裏>

直接回車便可安裝成功。

注:在 iOSX 系統平臺,能夠直接將下載的安裝包拖到 "gem install" 後面,若是在是 Windows 系統,須要手功輸入安裝的文件路徑。

  四、淘寶 RubyGems 鏡像安裝 Sass

除了下載 Sass 安裝包到本地安裝以外,碰到網絡緣由沒法安裝時還可使用淘寶 RubyGems 鏡像安裝 Sass。只是咱們須要經過 gem sources 命令來配置源,先移除默認的 https://rubygems.org 源,而後添加淘寶的源 https://ruby.taobao.org:

第一步:移動默認的源

gem sources --remove https://rubygems.org/

第二步:指定淘寶的源

gem sources -a https://ruby.taobao.org/

第三步:查看指定的源是否是淘寶源

gem sources -l

返回結果以下:

*** CURRENT SOURCES *** https://ruby.taobao.org

請確保只有 ruby.taobao.org。若是無誤以後,執行下面的命令:

gem install sass

 

查測 Sass 及更新

 

經過上面的幾種方法均可以安裝 Sass,可是,咱們要如何確認本身是否安裝 Sass 成功了呢?其實很簡單,只須要經過下面的命令便可:

sass -v

若是在你的命令終端能看到相似這樣的信息就表示你的電腦安裝 Sass 已成功。也就是說能夠正常的使用 Sass 了。

更新 Sass

維護 Sass 的團隊會不斷的爲 Sass 添加新的功能,那麼如何確保本身已安裝的 Sass 也具備這些新的功能特性呢?不會是卸載了從新安裝吧(雖然安裝也就是一個命令的事情)? 其實不須要這麼麻煩,只須要在命令終端執行:

gem update sass 

這個時候你看到相似下面這樣的信息,表示你的 Sass 已更新到最新版本。

卸載(刪除)Sass

在常期使用的時候不免會碰到沒法解決的問題,有時候可能須要卸載 Sass,而後再從新安裝 Sass。那麼怎麼卸載 Sass 呢?

其實他也就是一句命令的事情:

gem uninstall sass

這樣就卸載了 Sass ,但這行命令基本上是使用不上。

相關文章
相關標籤/搜索