參考
Sass和Scss介紹
SASS是CSS3的一個擴展，增加了規則嵌套、變量、混合、選擇器繼承等等。通過使用命令行的工具或WEB框架插件把它轉換成標準的、格式良好的CSS代碼。
SCSS即是SASS的新語法，是Sassy CSS的簡寫，是CSS3語法的超集，也就是說所有有效的CSS3樣式也同樣適合于SASS。
Sass功能
- 使用變量(variables)
- 嵌套規則(nesting)
- 函數(function)
- 導入(import)
- 擴展(extend)
- 混入(mixin)
- 迭代(each)
- 條件(condition)
- 自動轉換RGB顏色
- 不用加瀏覽器前綴
- Media Query更簡單
- 自動壓縮CSS
Compass
Compass由Sass的核心團隊成員Chris Eppstein創建，是一個非常豐富的樣式框架，包括大量定義好的mixin函數，以及對Sass的擴展。
Compass和Sass的關系就相當于Jquery和Javascript的關系
Compass常用功能
- Reset
- CSS3
- layout
- Typography
Sass安裝
ruby安裝
- ruby
ruby官網
不用在官網下載，可以直接下載安裝RubyInstaller - 安裝RubyInstaller
RubyInstaller官網
RubyInstaller下載地址 - 本例使用2.2.2_x64版本
rubyinstaller-2.2.2-x64.exe
下載之后安裝 - 配置環境變量
新建：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/親自嘗試都沒用，后來百度一下才發現，原來是taobao Gems 源已停止維護，現由 ruby-china 提供鏡像服務，即我們要換源：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的語法最靈活
官網
后綴
- Less：
.less - Sass：
.sass和.scss - Stylus：
.styl
語法區別
.sass
//四種都支持//和/**/兩種注釋
/*注釋*/
h1
color: red
//變量定義
$primary_color: #369
.scss
h1{
color: red;
}
//變量
$color:red;
body{
head{
}
section{
}
}
//函數
@mixin alert($color: blue){
color: $color;
}
//繼承
.block{
margin: 10px;
padding: 5px;
}
p{
//將block樣式全部繼承過來了
@extend .block;
}
.less
/*注釋*/
h1{
color: red;
}
//變量
@color:red;
//函數
.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;
//函數
alert($color = blue){
color: $color
}
