參考
Sass和Scss介紹
SASS是CSS3的一個(gè)擴(kuò)展民镜，增加了規(guī)則嵌套、變量险毁、混合制圈、選擇器繼承等等们童。通過使用命令行的工具或WEB框架插件把它轉(zhuǎn)換成標(biāo)準(zhǔn)的、格式良好的CSS代碼鲸鹦。
SCSS即是SASS的新語法慧库，是Sassy CSS的簡寫，是CSS3語法的超集馋嗜，也就是說所有有效的CSS3樣式也同樣適合于SASS齐板。
Sass功能
- 使用變量(variables)
- 嵌套規(guī)則(nesting)
- 函數(shù)(function)
- 導(dǎo)入(import)
- 擴(kuò)展(extend)
- 混入(mixin)
- 迭代(each)
- 條件(condition)
- 自動(dòng)轉(zhuǎn)換RGB顏色
- 不用加瀏覽器前綴
- Media Query更簡單
- 自動(dòng)壓縮CSS
Compass
Compass由Sass的核心團(tuán)隊(duì)成員Chris Eppstein創(chuàng)建，是一個(gè)非常豐富的樣式框架葛菇，包括大量定義好的mixin函數(shù)甘磨，以及對(duì)Sass的擴(kuò)展。
Compass和Sass的關(guān)系就相當(dāng)于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/
上面這個(gè)源需要翻墻才能連接济舆，所以需要修改源。
- 修改源
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 源已停止維護(hù)，現(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：
.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
}
