初次接触SASS

　　SASS：2007年诞生，最早也是最成熟的CSS预处理器。同样的CSS预处理器有LESS（2009年）和Stylus(2010年)。LESS和SASS最大的区别是它们的处理方式：LESS是javascript库，所以它在客户端执行，而SASS需要Ruby，在服务端运行。作为前端，考虑到网速问题，为了不加重客户端的负担，所以我选择SASS。

　　SASS目前有两种语法，最新的语法称为“SCSS”（受LESS影响，全面兼容CSS，扩展名为.scss）。第二种语法是SASS的老语法，也称为缩进语法，不是用大括号和分号来区分块，而是用缩进来指定块。

SCSS语法

SCSS语法规则和CSS的语法规则可以说是完全一样的，由选择器、属性和属性值三部分组成，并且和大括号{}和分号:配合一起使用。

选择器{ 属性 : 属性值；}

仅从SCSS的语法来说。SCSS和CSS的语法规则是一样的，这也是我选择SASS的原因，因为他太像CSS了。可以像平时试用CSS的习惯一样，不用改变自己的书写代码习惯。

SASS语法

SASS语法也称为SASS的缩进语法，其目的是提供一个更简洁的语法。里面没有其他多余的符号，都是靠缩进来区分块，因为不用大括号区分，所以代码必须分行书写。

选择器
    属性 : 属性值

在SASS语法里面，如果有多个选择器的话，每个选择器必须另外在一个行里面，而且用逗号，分割。简单点来说，一个选择器占一行，而且相邻两个选择器之间使用，分开：

.user #userTab,
.posts #postTab
    width : 100px
    height : 30px

SASS特征

仅从语法上面来看。SCSS和CSS可以说基本一致。但事实并不是这样，SASS有几个基本特征，那时CSS没有的。

变量（Variables）：用来定义变量
嵌套（Nesting）：样式和属性的嵌套
Mixins ：抽取样式定义为模块
选择器继承（Selector Inheritance）：继承选择样式

变量（Variables）

在SASS可以声明变量，然后在项目里面重复调用。SASS支持任何变量（例如：颜色、数值、文本等）。在SASS中定义的变量，除了可以在样式里面直接引用，还可以对变量进行一些基本的数学运算。可以预想，使用变量来构建网站的样式，要改动网站的时候，只需要更新变量就可以影响整个网页的相对应的样式了。对于网站的后期维护可以说省了很多事。另外对变量进行一些基本的数学运算的话。可以保证自己的网站色调在一定范围，而且可控。想想都觉得有点小激动。

SASS声明变量必须用$开头，后面紧跟变量名和变量值，而且变量名和变量值之间需要用分号:隔开。就像CSS属性设置一样：

$变量名：变量值

举个简单的例子：

/*声明变量*/
$blue:#o5a;
$red:$c00;

/*引用变量*/
a{color:$blue;}
a:hover{color:$red;}

编译出来的CSS如下：

a{color:#05a;}
a:hover{color:#c00;}

嵌套（Nesting）

SASS中的嵌套有两种，一种是选择器的嵌套，另外一种是样式的嵌套。目的都一样，减少代码量和增强代码可读性。

选择器的嵌套

SASS中选择器的嵌套指的是在一个选择器中嵌套另一个选择器来实现继承。比如说，我们在CSS中多个元素有一个相同的父元素，那么写样式的时候就需要一遍一遍地在每个元素前写这个父元素。

#slider{position:relative;}
#slider li{float:left;}
#slider li a{color:#05a;}
#slider li a:hover{color:#c00;}

SASS里面的选择器嵌套特性让我们可以避免上面多次写同样的代码的情况出现。我们可以在父元素的大括号{}里面写这些元素。同时可以使用&符号来引用元素的父选择器。我们来看看SASS如何将上面的CSS代码转换成SASS代码：

#slider{position:relative;
　　li{float:left;
　　　　a{
　　　　　　color:#05a;
　　　　　　&:hover{color:#c00;}
　　　　}
　　}
}

属性嵌套

很多时候，我们写CSS都会碰到属性的缩写，比如：font、background、border、margin、padding等，在SASS中我们可以使用属性嵌套让代码更加简单明了。例子如下：

CSS

li{
　　font-style:italic;
　　font-family:serif;
　　font-weight:700;
　　font-size:12px;
}

SCSS

li{
　　font:{
　　　　style.italic;
　　　　family:serif;
　　　　weight:700;
　　　　size:12px;
　　}
}

Mixins

Mixins是SASS中最强大的特性之一，简单来说，Mixins可以将一部分样式抽出，作为单独定义的模块，被很多选择器重复使用。这是一个非常有用的特性，Mixins被作为一个公认的选择器，还可以在Mixins中定义变量或者默认参数。

SASS中声明Mixins需要使用@mixin，在后面紧跟Mixins的名：

@mixin Mixins名{
　　/*样式规则*/
}

同时在Mixins中，还可以定义参数，同时可以给这个参数设置一个默认值，但参数名需要使用$符号开始，而且和参数值之间需要使用:分开：

@mixin Mixins名（$参数名：参数值）{
    /*样式规则*/
}

来看一个简单的实例：

@mixin error($borderWidth:2px){
    border: $borderWidth solid #f00;
    color: #f00;
}

在SCSS中调用定义好的Mixins，需要使用@include关键词，然后在其后紧跟需要调用的Mixins。

选择器{
    @include(Mixins名)；
}

在上例的基础上，我们来看如何在需要的地方引用定义好的errorMixins：

.generic-error {
    @include error();/*直接调用error Mixins*/
}
.login-error {
    @include error(3px);/*调用error Mixins，并将$borderWidth参数重定义为3px*/
}

选择器继承（Selector Inheritance）

在CSS中的属性继承应该很熟悉。平时在写CSS样式也常碰到多个元素应用相同的样式，我们在CSS中常把具有相同样式的选择器并列写在一起：

.error, 
.badError {
  border: 1px #f00;
  background: #fdd;
}

.error.intrusion,
.badError.intrusion {
  font-size: 1.3em;
  font-weight: bold;
}

.badError {
  border-width: 3px;
}

但往往需给单独的元素添加另外的样式，这个时候我们就需要把其中选择器单独出来写样式，如此一来我们维护样式就相当的麻烦。为了应对这个问题，SASS可以从一个选择器继承另一个选择器下的所有样式。

在SASS的继承是把一个选择器的所有样式继承到另一个选择器上，在继承另一个选择器的样式时需要使用@extend开始，后面紧跟被继承的选择器：

选择器 {
    @extend 定义的类
}

例如：

/*定义一个类*/
.block {
    margin: 10px 5px;
    padding:2px;
}
p {
    @extend .block;/*继承.block选择器下所有样式*/
    border: 1px solid #eee;
}
ul,ol {
    @extend .block;/*继承.block选择器下所有样式*/
    color:#333;
    text-transform: uppercase;
}

上面的SCSS代码将编译出CSS：

.block,
p,
ul,
ol {
    margin: 10px 5px;
    padding: 2px;
}
p {
    border: 1px solid #eee;
}
ul,
ol {
    color: #333;
    text-transform: uppercase;
}

正如上面所看到的，上面的代码.block的样式将会被插入到相应的你要继承的选择器中，但需要注意的是优先级的问题。

但这种做法有时候会生成一些没必要的代码，比如说，仅有部分样式相同，但并不想独自创建一个类名，以免增生无用之代码，这个时候可以将类.换成%，在上例的基础上做以调整：

%block {
    margin: 10px 5px;
    padding: 2px;
}
p {
    @extend %block;
    border: 1px solid #eee;
}
ul,ol {
    @extend %block;
    color: #333;
    text-transfomr:uppercase;
}

此时编译出来的CSS如下：

p, ul, ol {
  margin: 10px 5px;
  padding: 2px; }

p {
  border: 1px solid #eee; }

ul, ol {
  color: #333;
  text-transfomr: uppercase; }

相比这下，使用%代替.定义公用样式，再通过@extend调用，编译出来的CSS要干净很多。

posted @ 2014-01-16 16:07 KEVIN_葉阅读(420) 评论(0) 编辑收藏举报

刷新页面返回顶部

KEVIN_葉