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

缺点

  • 不能在浏览器中运行