参考
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
}
