01_Sass介绍、安装、compass介绍和Sass、Less、Stylus的区别

参考

Sass和Compass 指南

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
• Sass
• Stylus
• 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
}