【Sass】SASS入门

前言

        作为一个前端开发人员，你肯定对CSS很熟悉，接下来要介绍的工具，基于CSS并优于CSS。我们都知道，CSS作为一个标记语言，不是编程语言，它不可以自定义变量，不可以引用等等，所以我们引入了SASS，它是可以自定义变量、可以有if、else等等编程语句，还可以嵌套等等。说了这么多，让我们来认识一下这神奇的SASS。

是什么

        SASS是一种CSS的开发工具，提供了许多便利的写法，大大节省了设计者的时间，使得CSS的开发变得简单可维护。

优点

1、完全兼容 CSS3

2、在 CSS 语言基础上添加了扩展功能，比如变量、嵌套 (nesting)、混合 (mixin)

3、对颜色和其它值进行操作的{Sass::Script::Functions 函数}

4、函数库控制指令之类的高级功能

5、良好的格式，可对输出格式进行定制

6、支持 Firebug

7、我认为，最大的优点在于，它从一个不可维护的标记语言，变成了可维护的编程语言，大大方便了Web前端程序开发。

如何用

1、安装

        SASS是Ruby语言写的，虽然两者的语法没有任何关系，但是必须要先安装Ruby，然后再安装SASS。

接着，在命令行输入以下命令：

gem install sass

2、使用

        SASS文件就是普通的文本文件，里面可以直接使用CSS语法。文件名后缀是.scss。

sass test.scss//将文件名为test的sass代码显示为css代码

sass test.scss test.css//将sass文件显示出来之后并保存为css文件

SASS四个编译风格：

①nested：嵌套缩进的css代码，默认值。

②expanded：没有缩进的、扩展的css代码。

③compact：简洁格式的css代码。

④compressed：压缩后的css代码。

注：生产环境中一般使用最后一个选项：

sass --style compressed test.sass test.css

        当然，也可以让SASS监听某个文件或目录，一旦源文件变动，就自动生成编译后的版本：

//watch a file监视sass文件
sass --watch input.scss:output.css
//watch a directory监视目录
sass --watch app/sass:public/stylesheets

基本用法

①变量

$blue:#1875e7;
div{
        color:$blue;
}//所有变量使用$开头

$side:left;
    .rounded{
        border-#{$side}-radius:5px;
    }//如果变量需要嵌入到字符串中，要写在#{变量}之中。

②计算功能

body{
        margin:(20px/2);
        top:50px+100px;
        right:$var * 10%;
}

③嵌套

div h1{
        color:red;
}
//可以写成：
div{
    h1{
        color:red;
    }
}
//属性也可以嵌套，如border-color：
p{
    border:{//border要加冒号
        color:red;
    }
}
//嵌套代码块中可以使用$引用父元素，如a:hover可以写成：
a{
        $:hover{color:red;}
}

④注释

标准的CSS注释（/comment/），会保留到编译后的文件。

单行注释（//comment），只保留在SASS源文件中，编译后被省略。

重要注释（/*!），即使是压缩模式编译，也会保留，可以用于声明版本信息。

代码重用

①继承

.class1{
        border:1px solid #ddd;
}//现有选择器
.class2{
        @extend .class1;//class2继承class1，使用@extend命令
        font-size:120%;
}

②Mixin

Mixin是可以重用的代码块

@mixin left{
        float:left;
        margin-left:10px;
}//使用mixin命令定义一个代码块
//使用@include命令调用该代码块
div{
        @include left;
}
//此外，mixin还可以指定参数和缺省值
@mixin left($value:10px){
        float:left;
        margin-right:$value;
}
//使用的时候，根据需要加参数
div{
        @include left(20px);
}

③颜色函数（SASS内置颜色函数，以便生成系列颜色）

lighten(#cc3,10%)//#d6d65c
darken(#cc3,10%)//#a3a329
grayscale(#cc3)//#808080
complement(#cc3)//#33c

④插入文件

@import "path/filename.scss";//插入外部文件
@import "foo.css";//插入css文件

高级用法

①条件语句

@if lightness($color)>30%{
        background-color:#00;
}@else{
        background-color:#fff;
}

②循环语句

//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-1;
}
//each循环
@each $member in a,b,c,d{
    .#{$member}{
        background-image:url("/image/#{$member}.jpg");
    }
}

③自定义函数

@funciton double($n){
        @return $n * 2;
}//自定义函数
#sidebar{
        width:double(5px);
}//使用自定义函数

总结

        知识是从无到有的过程，包括这篇博客，也是参考了众多sass教程，选取了能突出了其主要特点的方面总结了出来，也算是对sass做一个基本的入门总结。