sass 入门教程

1、引言

众所周知css并不能算是一们真正意义上的“编程”语言，它本身无法未完成像其它编程语言一样的嵌套、继承、设置变量等工作。为了解决css的不足，开发者们想到了编写一种对css进行预处理的“中间语言”，可以实现一些“编程”语言才有的功能，然后自动编译成css供浏览识别，这样既一定程度上弥补了css的不足，也无需一种新的语言来代替css以供浏览器识别。于是css预处理语言SASS就应运而生了

2、安装

sass基于Ruby语言开发而成，因此安装sass前需要安装Ruby。去官网下载Ruby并安装,安装过程中请注意勾选Add Ruby executables to your PATH添加到系统环境变量

使用淘宝RubyGems镜像安装 sass

$ gem sources --remove https://rubygems.org/
$ gem sources -a https://ruby.taobao.org/
$ gem sources -l
gem install compass

3、编译

sass test.scss test.css

SASS提供四个编译风格的选项

* nested：嵌套缩进的css代码，它是默认值。
* expanded：没有缩进的、扩展的css代码。
* compact：简洁格式的css代码。
* compressed：压缩后的css代码。

生产环境当中，一般使用最后一个选项。

sass --style compressed test.sass test.css

也可以让SASS监听某个文件或目录，一旦源文件有变动，就自动生成编译

// watch a file
sass --watch input.scss:output.css
// watch a directory
sass --watch app/sass:public/stylesheets

4、嵌套

选择器嵌套


div {
　　h1 {
　　　　color:red;
　　}
}

属性嵌套


div {
　　h1 {
　　　　background:{
            color:red;
            url(xxx.jpg);
            position:0 0;
        }
　　}
}

引用父元素


a {
　　&:hover {
        color: #ffb3ff;
    }
}

5、变量

SASS允许使用变量，所有变量以$开头


$blue : #1875e7;　
div {
　　color : $blue;
}

如果变量需要镶嵌在字符串之中，就必须需要写在#{}之中


$side : left;
.rounded {
　　border-#{$side}-radius: 5px;
}

6、mixin

使用@mixin命令，定义一个代码块


@mixin center($w:1180px){
    width:$w;
    margin:0 auto;
}

使用@include命令，调用这个mixin。


div {
　　@include center;
}

传参


div {
　　@include center(980px);
}

7、继承

现有一个class1类


.class1 {
　　border: 1px solid #ddd;
}

class2要继承class1，就要使用@extend命令


.class2 {
　　@extend .class1;
　　font-size:120%;
}
我们可以用占位符来写一些继承的样式(如“%one”)，然后再通过@extend继承，这样就可以防止被渲染到CSS的规则集中

%test{
    color:red;
}
 
.test1{
    @extend %test;
    background:orange;
}
 
.test2{
    @extend %test;
    background:red;
}
 
/* 编译后 */
 
/* line 120, sass/_order.scss */
.test1, .test2 {
  color: red;
}
 
/* line 124, sass/_order.scss */
.test1 {
  background: orange;
}
 
/* line 129, sass/_order.scss */
.test2 {
  background: red;
}

8、插入文件

@import命令，用来插入外部文件。

@import "path/filename.scss";

如果插入的是.css文件，则等同于css的import命令

@import "foo.css";

9、条件语句

使用@if……@else……定义一个三角形箭头函数


/* 箭头
arrow(direction,size,color);
*/
@mixin arrow($direction,$size,$color) {
    width: 0;
    height: 0;
    line-height: 0;
    font-size: 0;
    overflow: hidden;
    border-width: $size;
    cursor: pointer;
    @if $direction == top {
        border-style: dashed dashed solid dashed;
        border-color: transparent transparent $color transparent;
        border-top: none;
    }
    @else if $direction == bottom {
        border-style: solid dashed dashed dashed;
        border-color: $color transparent transparent transparent;
        border-bottom: none;
    }
    @else if $direction == right {
        border-style: dashed dashed dashed solid;
        border-color: transparent transparent transparent $color;
        border-right: none;
    }
    @else if $direction == left {
        border-style: dashed solid dashed dashed;
        border-color: transparent $color transparent transparent;
        border-left: none;
    }
}

10、循环

SASS支持for循环


    @for $i from 1 to 10 {
　　　　.border-#{$i} {
　　　　　　border: #{$i}px solid blue;
　　　　}
　　}

也支持while循环


    $i: 6;
　　@while $i > 0 {
　　　　.item-#{$i} { width: 2em * $i; }
　　　　$i: $i - 2;
　　}

each命令，作用与for类似


    @each $member in a, b, c, d {
　　　　.#{$member} {
　　　　　　background-image: url("/image/#{$member}.jpg");
　　　　}
　　}

代码若有中文编译Sass 文件出现Syntax error: Invalid GBK character报错解决办法

找到ruby的安装目录，里面也有sass模块，如这个路径：C:\Ruby\lib\ruby\gems\1.9.1\gems\sass-3.3.14\lib\sass

在这个文件里面engine.rb，添加一行代码：

Encoding.default_external = Encoding.find('utf-8')

放在所有的require XXXX 之后即可。

最后在scss文件头部启用编码声明：

@charset "utf-8";//必须设置了这个才能编译有中文的注释

既然.scss能通过sass命令转译成.css样式，那么我们是否可以将.css转译成.scss呢？

事实是可以的，我们可以通过sass-convert命令：

$ sass-convert css/style.css style.scss

sass-convert除了可以将.css样式转译成.scss文件之外，还可以通过这个命令对.sass和.scss之间样式转译。

安装compass-sourcemaps

$ gem install compass-sourcemaps --pre

在Compass项目配置文件config.rb中增加enable_sourcemaps配置

# enable sourcemaps
enable_sourcemaps = true
sass_options = {:sourcemap => true}