乐趣区

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

jiezi

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 在安装快要完成时，需要把图片中的选项去掉不勾选，如果这一步忘了我们可以直接把安装的过程关闭。

  • 安装 Sass
    安装完之后，我们需要更改 Ruby 源，更改成淘宝源：

    gem sources --add https://gems.ruby-china.com/ --remove https://rubygems.org/

    查看源 

    gem sources -l

    安装 Sass

    gem install sass

    查看版本 

    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 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

    @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

缺点 ：

  • 不能在浏览器中运行
退出移动版