參考

Sass和Compass 指南

Sass和Scss介紹

SASS是CSS3的一個擴展，增加了規(guī)則嵌套、變量、混合、選擇器繼承等等。通過使用命令行的工具或WEB框架插件把它轉(zhuǎn)換成標準的、格式良好的CSS代碼。
　　SCSS即是SASS的新語法，是Sassy CSS的簡寫，是CSS3語法的超集，也就是說所有有效的CSS3樣式也同樣適合于SASS。

Sass功能

• 使用變量(variables)
• 嵌套規(guī)則(nesting)
• 函數(shù)(function)
• 導入(import)
• 擴展(extend)
• 混入(mixin)
• 迭代(each)
• 條件(condition)
• 自動轉(zhuǎn)換RGB顏色
• 不用加瀏覽器前綴
• Media Query更簡單
• 自動壓縮CSS

Compass

Compass由Sass的核心團隊成員Chris Eppstein創(chuàng)建，是一個非常豐富的樣式框架，包括大量定義好的mixin函數(shù)，以及對Sass的擴展。
Compass和Sass的關(guān)系就相當于Jquery和Javascript的關(guān)系

Compass常用功能

• Reset
• CSS3
• layout
• Typography

Sass安裝

ruby安裝

• ruby
  ruby官網(wǎng)
  不用在官網(wǎng)下載，可以直接下載安裝RubyInstaller
• 安裝RubyInstaller
  RubyInstaller官網(wǎng)
  RubyInstaller下載地址
• 本例使用2.2.2_x64版本
  rubyinstaller-2.2.2-x64.exe
  下載之后安裝
• 配置環(huán)境變量
  新建：RUBY="D:\Ruby22-x64"
  在path后添加：%RUBY%\bin;
• 在命令行輸入gem測試
  
  
  上圖說明ruby安裝成功

Compass安裝

• 查看ruby源
  gem sources

C:\Users\huhch>gem sources
*** CURRENT SOURCES ***
https://rubygems.org/

上面這個源需要翻墻才能連接，所以需要修改源。

• 修改源
  gem sources -a http://gems.ruby-china.org/
  有些人說的gem sources -a https://ruby.taobao.org/或gem sources -a http://ruby.taobao.org/親自嘗試都沒用，后來百度一下才發(fā)現(xiàn)，原來是taobao Gems 源已停止維護，現(xiàn)由 ruby-china 提供鏡像服務(wù)，即我們要換源：http://gems.ruby-china.org/
• 拓展命令
• 移出源：gem sources -r http://xxx.org
• 添加源：gem sources -a http://xxx.org
• 更新源：gem sources -u http://xxx.org
• 安裝Compass
  命令行：gem install compass
• compass安裝成功之后查看compass和sass版本
  compass -v
sass -v

C:\Users\huhch>compass -v
Compass 1.0.3 (Polaris)
Copyright (c) 2008-2017 Chris Eppstein
Released under the MIT License.
Compass is charityware.
Please make a tax deductable donation for a worthy cause: http://umdf.org/compas
s
C:\Users\huhch>sass -v
Sass 3.4.25 (Selective Steve)
C:\Users\huhch>

Sass、Less和Stylus

雖然Sass出來的最早，但是人氣最高、最流行的是Less

• Sass出世的最早
• Less人氣最高、最流行
• Stylus的語法最靈活

官網(wǎng)

• Less
• Sass
• Stylus
• stylus中文版參考文檔

后綴

• Less：.less
• Sass：.sass和.scss
• Stylus：.styl

語法區(qū)別

• .sass

//四種都支持//和/**/兩種注釋
/*注釋*/
h1
  color: red

//變量定義
$primary_color: #369

• .scss

h1{
  color: red;
}

//變量
$color:red;

body{
  head{

  }
  section{

  }
}
//函數(shù)
@mixin alert($color: blue){
  color: $color;
}

//繼承
.block{
  margin: 10px;
  padding: 5px;
}
p{
  //將block樣式全部繼承過來了
  @extend .block;
}

• .less

/*注釋*/
h1{
  color: red;

}
//變量
@color:red;

//函數(shù)
.alert(@color: blue){
  color: @color;
}

//繼承
.block{
  margin: 10px;
  padding: 5px;
}
p{
  //將block樣式全部繼承過來了
  .block;
}

• .styl

h1{
  color: red;
}

h1
  color: red;

h1
  color red

$color= red;
color= red;

//函數(shù)
alert($color = blue){
  color: $color
}