Sass
Sass（英文全称：Syntactically Awesome Stylesheets）是一个最初由Hampton Catlin设计并由Natalie Weizenbaum开发的层叠样式表语言。
Sass是一个将脚本解析成CSS的脚本语言，即SassScript，它包括两套语法。最开始的语法叫“缩进语法”，使用缩进来区分代码块并且用回车将不同规则隔开；而较新的语法叫做“SCSS”，使用CSS一样的语法块也就是大括号将不同规则分开，用分号将具体样式分开。通常情况下这两套语法是通过.sass 和 .scss 两个文件扩展名来区分的。
对于Sass的基本使用，我们需要从嵌套、变量、函数、继承和高阶属性这几方面来一一了解。
1 环境的布置
-
安装Ruby环境，在官网http://rubyinstaller.org上找到最新的安装包，然后按照指示一步一步的操作，安装的过程可能会比较慢。有两点需要注意的是：
1 勾选UTF-8的选项，如果忘记了的话也可以在安装完之后来更改Sass的默认编码，方法如下：
到Ruby22\lib\ruby\gems\x.x.x\gems\sass-x.x.xx\lib\sass目录下 Encoding.default_external = Encoding.find('utf-8')2 在安装快要完成时，需要把图片中的选项去掉不勾选，如果这一步忘了我们可以直接把安装的过程关闭。
T-1.png
-
安装Sass
安装完之后，我们需要更改Ruby源，更改成淘宝源：gem sources --add https://gems.ruby-china.com/ -- remove https://rubygems.org/查看源
gem sources -l安装Sass
gem install sass查看版本
sass -v
T-2.png
2 Sass 和 SCSS
-
SCSS是sass的一个升级版本，前者完全兼容后者
-
Sass是靠缩进表示嵌套关系，SCSS是花括号
具体语法上面的差异
SCSS语法：
$width: 100%;
$height: 100px;
$color: red;
.container{
width: $width;
height: $height;
background-color: $color;
margin-bottom: 5px;
}
.container2{
width: $width;
height: $height;
background-color: $color;
margin-bottom: 5px;
}
.container3{
width: $width;
height: $height;
background-color: $color;
margin-bottom: 5px;
}
Sass 语法：
!primary-color= hotpink
=border-radius(!radius)
-webkit-border-radius= !radius
-moz-border-radius= !radius
border-radius= !radius
.my-element
color= !primary-color
width= 100%
overflow= hidden
.my-other-element
+border-radius(5px)
3 编译 .scss 文件
sass main.scss main.css
Sass 编译语法和 Less编译语法有一定的相似性；不同的是Sass实际上是支持编译风格的以及文件侦听。
我们加上一个 -- style 的属性就可以指定编译风格，它的编译风格一共有四种：
sass --style compressed main.sass main.css
-
nested 嵌套缩进的css代码
-
expanded 没有缩进
-
compact 简洁格式
-
compressed 压缩
文件侦听的意思就是说我们监听的某一个文件它有变动的时候，然后我们在保存的时候会自动把它编译成对应的css。
监听文件
sass --watch main.scss:main.css
监听文件夹
sass --watch xxxx/sass:xxxxx/xxxxx
4 Sass基本语法
Sass嵌套
- Sass 写法
.container {
padding: 0;
.header {
background-color: red;
}
}
- 伪类写法
#header {
&:after {
content: " ";
display: block;
font-size: 0;
height: 0;
clear: both;
visibility: hidden;
}
}
Sass的嵌套相较于Less有一个不同的地方在于，在伪类中可以实现一个属性的嵌套，比如在Sass中下面样式：
p {
border: {
color: red;
}
}
在css中编译出来的是：
p{
border-color:red;
}
Sass 变量
sass的变量与less比较有一定的不同，在less中是以@ 符号开头的，而在sass中则是$ 美元符号，其他部分没有区别。
- sass 也是用 js 的写法来写 css
- 使用 $ 符号定义变量
-
$变量名看成是一个字符串
$width: 100%;
$height: 100px;
$color: blue;
$direction: left;
.border {
border-#{$direction}: solid 5px;
}
Sass 函数
在sass中函数要加上一个@function
@function double($x, $y, $z) {
@return $x * $y * $z;
}
#header{
width: double(5, 5, 5px);
}
编译成css：
#header{
width:125px;
}
内置函数
- unquote 去引号
- percentage 百分比
- index 计算位置
.header {
width: index(1px solid red, 1px);
}
编译成css：
.header{
width:1px;
}
- mix 混合颜色
mix (color, color, ratio);
- lightness 获取亮度值
Sass 注释
// 普通注释
// 只在源文件出现，编译之后就不存在了
/*
* 注释
* compressed的style的css中没有
*/
/*！
* 重要注释
* 任何style的css文件中都会有，即使编译混淆，注释仍然存在
*/
Sass 计算属性
body {
margin: (14px/2);
top: 50px + 100px;
right: $var * 10%;
}
Sass 继承
- extend
.header {
border: 1px solid #ddd;
}
.body {
@extend .header;
}
编译后的css：
.header,body{
border:1px solid #ddd;
}
- mixin
@mixin common {
background-color: red;
}
.header{
font-size: 16px;
@include common;
}
编译后的css：
.header{
font-size:16px;
background-color:red;
}
我们也可以向JS更进一步，把mixin写成一个函数，再加一个默认值：
@mixin default($x, $y, $z: 12px){
margin-left: $x;
margin-right: $y;
margin-top: $z;
}
.header {
@include default(5px, 5px);
}
编译后的css：
.header {
margin-left: 5px;
margin-right: 5px;
margin-top: 12px;
}
Sass 引入
Sass的引入和Less是一样的，都是加上一个@import “.scss文件名”。
进阶属性
- @（运算）
.header {
@if 10 == 10 { color: red; }
@if 10 < 20 { color: red; }
}
- else颜色值比较以突出文字
.header {
@if 10 == 11 { color: red; }
@else { color: green; }
}
-
循环（分为三个）
1 for
2 while
3 ench
1 @for $index 变量从一到一百，把1.jpg到100.jpg生成100个不同的背景颜色：
@for $index from 1 to 100 {
.background-#{$index} {
background-image: url("/image/#{$index}.jpg");
}
}
2 while 打印四个数，定义了一个变量为20px，依次4次输出结果：
$types: 4;
$type-width: 20px;
@while $types > 0 {
.while-#{$types}{
width: $type-width + $types;
}
$types: $types - 1;
}
3 each 遍历三种颜色：
@each $item in red, green, yellow {
.#{$item} {
color: $item;
}
}
Sass 优势和劣势
优点：
- 扩展了CSS3，增加了规则、变量、混入、选择器、继承等属性
- Sass生成良好的格式化CSS代码
- 易于组织和维护
- Sass生态环境完善
- Sass功能上较强于Less
- Sass有丰富的sass库：Compass/Bourbon
缺点：
- 不能在浏览器中运行
网友评论