Sass和Less的定义区别和使用

Sass

定义

Sass（英文全称：Syntactically Awesome Stylesheets）是一个最初由Hampton Catlin设计并由Natalie Weizenbaum开发的层叠样式表语言。（出自百度百科）
是CSS预处理器，是CSS的扩展，可以帮助我们快速编译代码。

特色

Sass语法的编排语法，比CSS多出很多功能，变量、嵌套。运算，继承，颜色处理，函数等。完全兼容CSS3，可以自定义输出格式。

语法

Sass有两种语法格式SCSS和缩进语法(Indented Sass)。SCSS仅在CSS3语法基础上进行扩展，样式表文件需要以.scss作为拓展名；缩进语法使用缩进而不是花括号来表示选择器的嵌套，样式表需要以.sass作为拓展名。

CSS扩展

• 嵌套规则
  Sass允许将CSS样式嵌套进另一个样式中。内层样式仅适用于外层选择器范围内。

body main {
width:100%;
color: #000000;
.content {
color:#00ff00;
margin:auto;
}
}

• 引用父选择器
  有些时候需要直接使用嵌套外层的父选择器。比如hover样式。

ul li {
font-size:24px;
list-style:none;
&:hover {
color:blue;
}
body.firefox & {
font-weight: normal;
}
&必须出现在选择器开头的位置，可以跟随后缀。

• 嵌套属性
  CSS中有一些属性遵循相同的命名空间。如:
  font-family,font-size和font-weight都在一个命名空间中。Sass提供了一个快捷方式：只需要输入一次命名空间，然后在内部嵌套子属性。

.content {
font: {
family: fantsy;
size: 30em;
weight:bold;
}
}
命名空间也有自己的属性值。
.content {
font :20px/24px fantasy {
weight:bold’
}
}

• 占位符选择器
  当你想编写一个样式，它是另外一个样式的拓展时，我们可以用到占位符选择器，@extend和@extend-Only
  @extend通过在样式表中出现被扩展选择器的地方插入扩展选择器。

.error {
border: 1px #f00;
background-color: #fee;
}
.seriousError {
@extend .error;
border-width: 3px;
}

编译为

.error, .seriousError {
border: 1px #f00;
background-color: #fdd;
}
.seriousError {
border-width: 3px;
}

多重扩展：同一个选择器可以扩展集成可多个选择器，它继承了被扩展选择器的所有样式。

使用方法

• 作为命令行工具
• 作为独立的Ruby的模块
• 作为Rack-enabled框架的插件，包括Ruby on Rails与Merb。
• 在vue-cli脚手架创建的vue项目中使用Sass

步骤：
1.安装Ruby
2.安装Sass gem
命令：gem install sass
3.常见命令
在命令行中运行sass：

sass test.scss output.css

使用Sass命令来监控某个Sass文件的改动并自动编译更新css:

sass --watch test.scss:output.css

如果要监视整个目录：
sass --watch app/sass:public/stylesheets

在Ruby中使用Sass
安装Sass gem后用Ruby运行require “sass”
然后按照下面方法使用Sass::Engine:

engine = Sass::Engine.new("#main {background-color: #0000ff}", :syntax => :scss)
engine.render #=> “#main { background-color: #0000ff; }\n”

Rack/Rails/Merb 插件（Plugin）
在 Rails 3 之前的版本中启用 Sass，需要在 environment.rb 文件中添加一行代码：

config.gem “sass”

对于 Rails 3，则是把这一行加到 Gemfile 中：

gem “sass”

要在 Merb 中启用 Sass，需要在 config/dependencies.rb 文件中添加一行代码：

dependency “merb-haml”

在 Rack 应用中启用 Sass，需要在 config.ru 文件中添加以下代码：

require ‘sass/plugin/rack’
use Sass::Plugin::Rack

在vue-cli脚手架创建的vue项目中使用Sass
用脚手架搭好项目之后运行以下命令安装相关的插件：

npm install node-sass --save-dev
npm install sass-loader --save-dev
然后就可以正常使用scss写的样式啦