2. 程式人生 > >Sass快速入門

Sass快速入門

阿新 • • 發佈：2018-12-28

用過CSS3的都知道，CSS3沒有變數，也不支援任何邏輯指令碼。人總是很聰明的，隨著需求的增加，Sass誕生，目的在於使樣式支援邏輯指令碼，使程式猿們更高效的寫樣式，Sass指令碼經過編譯後，最終會轉換成.css檔案。Sass指令碼有兩種格式，分別是.sass和.scss，這兩種格式的區別在於：.sass不使用大括號和分號。由於.scss的寫法與.css更加相似，所以通常我們都使用.scss格式。本篇部落格將從Sass安裝、Sass編譯到Sass語法應用逐步帶程式猿們快速掌握Sass。

Sass安裝

因為sass依賴於ruby環境，所以裝sass之前先確認裝了ruby，安裝ruby的作用在於：它可以安裝和更新sass。ruby官網下載地址：http://rubyinstaller.org/downloads/

在安裝的時候，請勾選Add Ruby executables to your PATH這個選項，新增環境變數，這樣在安裝成功後就可以直接使用命令列使用ruby。安裝完成後需測試安裝有沒有成功,可執行CMD輸入命令：

$ ruby -v

如能正確顯示ruby版本號，表明安裝成功。由於國內對外網有所限制，接著需要安裝gem源的淘寶映象，目的在於保證順利下載Sass等資源。執行CMD輸入命令：

  1. //1.刪除原gem源
  2. $ gem sources --remove https://rubygems.org/
  4. //2.新增國內淘寶源
  5. $ gem sources -a https://ruby.taobao.org/
  7. //3.列印是否替換成功
  8. $ gem sources -l
  10. //4.更換成功後列印如下
  11. *** CURRENT SOURCES ***
  12. https://ruby.taobao.org/

如果您系統不支援https，請將淘寶源更換成：gem sources -a http://gems.ruby-china.org。至此，所有準備工作就緒，開始安裝Sass，安裝命令列如下：

  1. $ gem install sass
  2. $ gem install compass
安裝成功後，同樣可通過sass -v檢測是否安裝成功，若能顯示版本號則表示安裝成功。

Sass編譯

這步是實現.scss向.css格式轉換的關鍵。進入到編譯檔案所在的目錄底下，編譯命令如下：
 
$ sass input.scss output.css
如需實現動態編譯（只要.scss改變就會馬上編譯成.css檔案），編譯命令如下：
 
$ sass --watch input.scss:output.css

如果是多檔案編譯，編譯物件也可以是檔案目錄：

$ sass --watch app/sass:public/stylesheets
編輯出來的檔案有四種排版可配置，分別是nested、expanded、compact和compressed。以expanded為例，配置時只需在命令列末尾加入--style expanded即可。
 
$ sass --watch input.scss:output.css --style expanded

這四種排版的區別程式猿們可以編譯後自己對比一下，或直接去官網檢視，在實際開發過程中，較常用的是expanded和compressed排版。當然，如果對命令列沒有操作習慣，還可以使用編譯工具koala，官網下載地址：http://koala-app.com/index-zh.html.


Sass語法

——技巧——

（1）在.scss開頭加上@charset "utf-8";這樣編譯時遇到中文便不會出錯；

（2）命名變數時常用到橫杆或下橫崗，如$link-color和$link_color，在編譯時這兩者並沒有區別，指向的是同一物件。


1.變數

變數用$符號定義，如$fontSize: 20px;變數的好處在於一次定義多次使用，免去重複寫相同的程式碼。變數的格式分為普通變數、預設變數、特殊變數、多值變數和物件變數。

（1）普通變數，最簡單的變數使用方法。

  1. @charset "utf-8";
  3. //編譯前.scss
  4. $fontSize: 20px;
  5. div {
  6. font-size: $fontSize;
  7. }
  9. //編譯後.css
  10. div {
  11. font-size: 20px;
  12. }
（2）預設變數，在普通變數後加上!default，目的在於強調變數用意，可修改，常用於元件的入參定義。
  1. //編譯前.scss
  2. $fontSize: 20px ! default;
  3. div {
  4. font-size: $fontSize;
  5. }
  7. //編譯後.css
  8. div {
  9. font-size: 20px;
  10. }

（3）特殊變數，通過 #{變數名稱} 的方式，可引用為樣式名稱。

  1. //編譯前.scss
  2. $direction: top ! default;
  3. div {
  4. border-#{$direction}: 1px solid red;
  5. }
  7. //編譯後.css
  8. div {
  9. border-top: 1px solid red;
  10. }
（4）多值變數，該種變數可賦多個值，值之間用空格隔開，引用時通過nth(多值變數，索引);的方式獲取值內容，索引從1開始計數。
  1. //編譯前.scss
  2. $linkColor: red blue;
  3. div {
  4. cursor: pointer;
  5. color: nth($linkColor, 1);
  6. //此處&表示this，即自身div。
  7. &:hover {
  8. color: nth($linkColor, 2);
  9. }
  10. }
  12. //編譯後.css
  13. div {
  14. cursor: pointer;
  15. color: red;
  16. }
  17. div:hover {
  18. color: blue;
  19. }
（5）物件變數，指用(key1:value1, key2:value2)的形式定義變數。通過map-get($map,$key)獲取內容值，除此之外，還有map-merge($map1,$map2)， map-keys($map)， map-values($map)等方法。
  1. //編譯前.scss
  2. $mapColor:( "color1":red, "color2":blue);
  3. div{
  4. cursor: pointer;
  5. color: map-get($mapColor, "color1");
  6. &:hover {
  7. color: map-get($mapColor, "color2");
  8. }
  9. }
  11. //編譯後.css
  12. div {
  13. cursor: pointer;
  14. color: red;
  15. }
  16. div:hover {
  17. color: blue;
  18. }


2.巢狀

（1）選擇器巢狀，最常用的巢狀語法，是指當描述多層級元素樣式時，子層級元素可巢狀到父層級元素內，這種語法極大地優化了樣式程式碼的可讀性。

  1. //編譯前.scss
  2. ul {
  3. list-style: none;
  4. li {
  5. float: left;
  6. a {
  7. color: red;
  8. &:hover {
  9. color: yellow;
  10. }
  11. }
  12. }
  13. }
  15. //編譯後.css
  16. ul {
  17. list-style: none;
  18. }
  19. ul li {
  20. float: left;
  21. }
  22. ul li a {
  23. color: red;
  24. }
  25. ul li a:hover {
  26. color: yellow;
  27. }
（2）群組巢狀，是指巢狀元素時每次可巢狀多個元素，巢狀的元素用逗號隔開。
  1. //編譯前.scss
  2. .container {
  3. h1, h2, h3 {margin-bottom: .8em}
  4. }
  5. nav,aside {
  6. a {
  7. color: blue
  8. }
  9. }
  11. //編譯後.css
  12. .container h1, .container h2, .container h3 {
  13. margin-bottom: .8em;
  14. }
  16. nav a, aside a {
  17. color: blue;
  18. }
（3）屬性巢狀，主要用於具有類似相同屬性名稱的元素巢狀，注意與其它巢狀寫法的差別，在巢狀時大掛弧前會多一個冒號,由於這種巢狀方法不利於可讀性，建議儘量少用。
  1. //編譯前.scss
  2. div {
  3. border: {
  4. style: solid;
  5. left: {
  6. color: red;
  7. }
  8. right: {
  9. color: yellow;
  10. }
  11. }
  12. }
  14. //編譯後.css
  15. div {
  16. border-style: solid;
  17. border-left-color: red;

  18. 相關推薦

    Sass快速入門

    用過CSS3的都知道，CSS3沒有變數，也不支援任何邏輯指令碼。人總是很聰明的，隨著需求的增加，Sass誕生，目的在於使樣式支援邏輯指令碼，使程式猿們更高效的寫樣式，Sass指令碼經過編譯後，最終會轉換成.css檔案。Sass指令碼有兩種格式，分別是.sass和.scss，這兩種格式的區別在於：.s

    laravel 中CSS 預編譯語言 Sass 快速入門教程

    自動 foo mes ogl width small 封裝 編程 :after CSS 預編譯語言概述 CSS 作為一門樣式語言，語法簡單，易於上手，但是由於不具備常規編程語言提供的變量、函數、繼承等機制，因此很容易寫出大量沒有邏輯、難以復用和擴展的代碼，在日常開發使用中，

    element 原始碼學習（番外篇） —— SASS五分鐘快速入門

    這算是 element 原始碼學習的番外篇，因為 element 中使用了大量 sass 來寫樣式。而 UI 框架的核心其實就是樣式。所以，抽空把 sass 學了一遍，寫了些小 demo 實踐，總結成此文。 SASS 安裝和除錯 簡單說下 sas

    Sass&Compass快速入門總結

    什麼是Sass? Sass是CSS前處理器的一種，其他還有less，stylus。他們的作用相同，但是語法，功能上略有差異，經過了解。我發現less相對來說更易上手，但我還是選擇了功能更為強大，語法種類更多的sass。 Sass在早期使用縮排，無法相容已有的

    day39-Spring 12-Spring的JDBC模板：快速入門

    pri 哪些 困難 ces 5.0 使用 只需要 common commons Spring AOP的關鍵是它的底層的原理和思想,配置和使用並不是十分困難.AOP本身就是一個思想,是面向對象的延伸,不是用來替換面向對象的,而是用來解決面向對象中的一些問題的.在最初的時候提出

    vuex2快速入門

    for nbsp mar lin ext mac os cnblogs value san #建立store.jsimport Vue from ‘vue‘; import Vuex from ‘vuex‘; Vue.use(Vuex) export d

    快速入門系列--WCF--07傳輸安全、授權與審核

    最大的 緩存 ims cut 常見 曾經 strong 這一 set 這部分主要涉及企業級應用的安全問題，一般來說安全框架主要提供3個典型的安全行為：認證、授權和審核。除了典型的安全問題，對於一個以消息作為通信手段的分布式應用，還需要考慮消息保護(Message Prote

    快速入門系列

    body 現在 安全 behavior 需求 discovery 中心 驗證 溝通 最後一章將進行WCF擴展和新特性的學習，這部分內容有一定深度，有一個基本的了解即可，當需要自定義一個完整的SOA框架時，可以再進行細致的學習和實踐。 服務端架構體系的構建主要包含接下來

    快速入門系列--WCF--02消息、會話與服務寄宿

    abc align bsp 不同的 cpu .org 程序 伸縮 網絡 經過WCF基礎的ABC學習，已經可以構建簡單的WCF的服務，使用不同的服務地址和綁定類型，根據業務提供所需的服務契約。但不禁想問，服務所使用的消息報文是什麽樣的形式麽？蘊含什麽樣內容呢？WCF服務是否支

    python 基本語法速覽，快速入門

    我們 method adding ger monk use gre 數據類型 struct https://zhuanlan.zhihu.com/p/24536868 學習參考於這個博文。 我做一個筆記。 關於python一些常用的語法快速的預覽，適合已經掌握一門編程語

    Django REST framework 的快速入門教程

    ret turn ads 使用 blog 所有 定義 想去 cti CRM-API項目搭建 序列器（Serializers） 首先，我們來定義一些序列器。我們來創建一個新的模塊（module）叫做 crm/rest_searializer.py ，這是我們用來描述數據是如何

    Celery 分布式任務隊列快速入門

    ade sunday reat 失敗 繼續 complete port 機器 single Celery介紹和基本使用 在項目中如何使用celery 啟用多個workers Celery 定時任務 與django結合 通過django配置celery period

    Unity快速入門

    小冰 教程 應該 arp nbsp 2.3 入門 模擬操作 飛機 1.熟悉基本操作。 最權威的應該是官方出品，158元的Unity官方教程，其他的基礎操作視頻 lynda 的5.0 ，5.4都可以 2.熟悉簡單例子，將API熟悉一下啊，這個過程中，背誦API是捷徑。 2

    Vue.js——60分鐘快速入門

    attribute 否則 style屬性 快速 基於 oid creat get rac Vue.js是當下很火的一個JavaScript MVVM庫，它是以數據驅動和組件化的思想構建的。相比於Angular.js，Vue.js提供了更加簡潔、更易於理解的API，使得我們能

    Redis快速入門

    pool har 語法 ansi 使用 https 測試的 對象 sta Redis快速入門 一、簡介 Redis是一個開源的使用ANSI C語言編寫、遵守BSD協議、支持網絡、可基於內存亦可持久化的日誌型、Key-Value數據庫，並提供多種語言的A

    快速入門系列--WebAPI--03框架你值得擁有

    let lan 最重要的 reason cnblogs err 註意 解釋 max 接下來進入的是俺在ASP.NET學習中最重要的WebAPI部分，在現在流行的互聯網場景下，WebAPI可以和HTML5、單頁應用程序SPA等技術和理念很好的結合在一起。所謂ASP.N

    快速入門系列--WebAPI--01基礎

    簡單例子 codec 應該 sem ons 請求重定向 選擇 char 阻止 ASP.NET MVC和WebAPI已經是.NET Web部分的主流，剛開始時兩個公用同一個管道，之後為了更加的輕量化(WebAPI是對WCF Restful的輕量化)，WebAPI使用了新的管道

    快速入門系列--MVC--06視圖

    出版 value 快速入門 stream 類型 path .cn esc eba 到了View的呈現板塊，感覺ASP.NET MVC的學習也進入了尾聲，還是比較開心的，畢竟也有了不小收獲。這部分內容相對比較簡單，因為之前還專門學習過如何結合HTML5與MVC框架。前

    快速入門系列--CLR--03泛型集合

    value mov nts readonly 只有一個 並且 cer view 工作 .NET中的泛型集合 在這裏主要介紹常見的泛型集合，很多時候其並發時的線程安全性常常令我們擔憂。因而簡述下.NET並發時線程安全特性，其詳情請見MSDN。 普通集合都不支持多重並發寫操

    MongoDb的基本操作快速入門

    基本操作 mongodb mongodb增刪該查操作示例 mongodb快速入門 1.MongoDb簡介 mongodb是一個基於分布式存儲的開源數據庫系統又被稱為文檔數據庫，可以將數據存儲為一個文檔，數據結構有鍵值對（key=>value）對組成，存儲的文檔類似於JSON對象（BS