常见的CSS预处理器之Sass初体验

时间 2019-11-26

原文原文链接

Sass

Sass（英文全称：Syntactically Awesome Stylesheets）是一个最初由Hampton Catlin设计并由Natalie Weizenbaum开发的层叠样式表语言。css

Sass是一个将脚本解析成CSS的脚本语言，即SassScript，它包括两套语法。最开始的语法叫“缩进语法”，使用缩进来区分代码块而且用回车将不一样规则隔开；而较新的语法叫作“SCSS”，使用CSS同样的语法块也就是大括号将不一样规则分开，用分号将具体样式分开。一般状况下这两套语法是经过.sass 和 .scss 两个文件扩展名来区分的。web

对于Sass的基本使用，咱们须要从嵌套、变量、函数、继承和高阶属性这几方面来一一了解。浏览器

1 环境的布置

安装Ruby环境，在官网http://rubyinstaller.org上找到最新的安装包，而后按照指示一步一步的操做，安装的过程可能会比较慢。有两点须要注意的是：sass

1 勾选UTF-8的选项，若是忘记了的话也能够在安装完以后来更改Sass的默认编码，方法以下：ruby
```
到Ruby22\lib\ruby\gems\x.x.x\gems\sass-x.x.xx\lib\sass目录下
    Encoding.default_external = Encoding.find('utf-8')
```
2 在安装快要完成时，须要把图片中的选项去掉不勾选，若是这一步忘了咱们能够直接把安装的过程关闭。less
安装Sass 安装完以后，咱们须要更改Ruby源，更改为淘宝源：函数
```
gem sources --add https://gems.ruby-china.com/ --remove https://rubygems.org/
```
查看源编码
```
gem sources -l
```
安装Sassurl
```
gem install sass
```
查看版本.net
```
sass -v
```

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](https://my.oschina.net/u/569418) double($x, $y, $z) {
  [@return](https://my.oschina.net/u/556800) $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

@for $index 变量从一到一百，把1.jpg到100.jpg生成100个不一样的背景颜色：

@for $index from 1 to 100 {
   .background-#{$index} {
       background-image: url("/image/#{$index}.jpg");
   }
 }

while 打印四个数，定义了一个变量为20px，依次4次输出结果：

$types: 4;
 $type-width: 20px;
 @while $types > 0 {
   .while-#{$types}{
   width: $type-width + $types;
 }
   $types: $types - 1;
 }

each 遍历三种颜色：

@each $item in red, green, yellow {
   .#{$item} {
     color: $item;
   }
 }

Sass 优点和劣势

优势：

扩展了CSS3，增长了规则、变量、混入、选择器、继承等属性
Sass生成良好的格式化CSS代码
易于组织和维护
Sass生态环境完善
Sass功能上较强于Less
Sass有丰富的sass库：Compass/Bourbon

缺点：

不能在浏览器中运行