SASS/SCSS入门笔记

什么是SASS?

SASS(Syntactically Awesome Stylesheets)是一种动态样式语言,为CSS融入了编程元素,提供了很多便利的写法,使得CSS的开发变得简单、可维护。先来回顾一下CSS,接触过WEB开发的同学,肯定都了解CSS(级联样式表)。通常,我们使用CSS定义页面需要的样式规则,然后为页面中的目标元素设置或者更改样式。作为一种样式表语言,CSS旨在方便的分离设计和内容展现,便于我们去维护页面的样式。

然而对于大部分编程人员来说,写css样式往往是一件非常痛苦的事情。他们会感觉到各种约束,为什么我不能定一个变量来避免那些类似“变量”的重复书写?为什么我不能继承上个class的样式定义?...SASS正是帮编程人员解开了这些疑惑,让css看起来更像是一门编程语言。

sass-logo-wall.jpg

到底是SASS还是SCSS?

SASS最初的语法规则是缩进语法,它没有括号、分号、使用两个空格缩进来定义代码的嵌套方式,该语法形式的文件以 .sass 为后缀名。

然而SASS的缩排语法,对于写惯css前端的web开发者来说很不直观,也不能将css代码加入到SASS里面,因此SASS语法进行了改良,SASS 3就变成了SASS(sassy css)。与原来的语法兼容,只是用{}取代了原来的缩进,文件以 .scss 为后缀名。

So,到底是用SASS还是SCSS,各位同学依个人口味酌量添加~

安装

SASS基于Ruby语言开发而成,因此安装SASS前需要安装Ruby。ruby安装完成后,我们就可以安装SASS了,命令如下:

gem install sass

安装完后,验证下是否安装成功,我们继续输入如下命令:

sass -v

如安装成功后,会显示当前SASS的版本号:

Sass 3.x.x (Selective Steve)

常用命令

无论是SASS还是SCSS都支持CSS的写法,个人还是习惯SCSS的语法规则。

将SCSS文件转译成CSS文件,命令如下:

sass base.scss base.css

SASS提供四种编译风格

  • nested:嵌套缩进的css代码(默认);
  • expanded:没有缩进的、扩展的css代码;
  • compact:简洁格式的css代码;
  • compressed:压缩后的css代码;

生产环境当中,一般使用最后一个选项,例:

sass --style compressed test.sass test.css

你也可以让SASS监听某个文件或目录,一旦源文件有变动,就自动生成编译后的版本。

// 监听一个SASS文件
sass --watch input.scss:output.css

// 监听文件夹下面的SASS文件
sass --watch app/sass:public/stylesheets

更多命令可参考SASS的帮助选项,命令行内输入sass -h即可。

基本语法规则

变量

SASS要求变量需要以$开头声明,如下:

// 定义变量
$var : left;
div {
     float : $var;
 }

// 编译后
div {
    float : left;
}

变量名中不区分下划线和中划线,如:

// 变量名中含有下划线或中划线
$margin-left : 20px;
div {
    margin-left : $margin_left;
}

// 编译后
div {
    margin-left : 20px;
}

字符串中引用变量,需要用#{}将变量包起来引用,如下:

// 字符串中引用变量
$right : 20;
.mr-#{$right} {
    margin-right : #{$right}px;
}

// 编译后
.mr-20 {
    margin-right : 20px;
}

注释

SASS共有两种注释风格:

  • 标准的CSS注释 /* comment */ ,会保留到编译后的文件;
  • 单行注释 // comment,只保留在SASS源文件中,编译后被省略;

嵌套

我们之前在维护CSS文件的时候,一定遇到过这种情况。当我们写后代选择器时,需要指定父选择器,同样的父选择器会重复写好多次,比如:

#content article h1 { color : #333 }
#content article p { margin-bottom : 1.4em }
#content aside { background-color : #EEE }
...

在SASS里面支持嵌套的方式,规避了上述问题,并且提高了代码的可读性,上例中代码可以在SASS中定义如下:

// 嵌套CSS规则
#content {
    article {
        h1 {
            color : #333;
        }
        p {
            margin-bottom : 1.4em;
        }
    }
    aside {
        background-color : #EEE;
    }
}

在嵌套规则中,我们可以用&来表示父选择器的引用,往往在一些伪类样式中会用到,例如:

// 父选择器标识符
article a { 
    color : blue; 
    &:hover { color : red }
}

// 编译后
article a { 
    color : blue;     
}

article a : hover { 
    color : red;  
}

除了选择器的嵌套,SASS中还支持属性的嵌套,如下:

// 属性嵌套
nav { 
    border : 1px solid #ccc { 
        left : 0px; 
        right : 0px; 
    }
}

// 编译后
nav { 
    border : 1px solid #ccc; 
    border-left : 0px; 
    border-right : 0px;
}

@import 导入

@import命令,用来导入外部文件:

@import "path/filename.scss";

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

@import "foo.css";

混合器

SASS中还提供一种混合器(mixin),它可以帮我们规避大段样式的重用,混合器通过@mixin标识声明,示例如下:

// 混合器示例
@mixin rounded-corners { 
    -moz-border-radius : 5px; 
    -webkit-border-radius : 5px; 
    border-radius : 5px;
}

notice { 
    background-color : green; 
    border : 2px solid #00aa00; 
    @include rounded-corners;
}

// 编译后
.notice { 
    background-color : green; 
    border : 2px solid #00aa00; 
    -moz-border-radius : 5px; 
    -webkit-border-radius : 5px; 
    border-radius : 5px;
}

混合器支持我们传入自定义参数和设置默认参数,当设置默认参数时使用$name: default-value的声明形式,默认值可以是任何有效的css属性值,例:

// 带参数的混合器
@mixin link-colors ( 
    $normal, 
    $hover: $normal, 
    $visited: $normal 
) { 
    color: $normal; 
    &:hover { color: $hover; } 
    &:visited { color: $visited; }
}

a {
    @include link-colors(red);
}

// 编译后
a { 
    color: red; 
    &:hover { color: red; } 
    &:visited { color: red; }
}

@extend 继承

SASS中支持选择器的继承,通过@extend关键字实现,例如:

// 选择器的继承
.class1 {
    background-color : #fff;
}

.class2 {
    @extend .class1;
    color : black;
}

// 编译后
.class1 {
    background-color : #fff;
}

.class2 {
    background-color : #fff;
    color : black;
}

通过继承的实现,往往可以精简我们的css文件。

条件分支

@if可以用来判断:

p {
  @if 1 + 1 == 2 { border : 1px solid; }
  @if 5 < 3 { border : 2px dotted; }
}

// 编译后
p {
    border : 1px solid; 
}

同时还支持@else命令:

body {
    @if 1 > 0 {
      background-color :  #000;
    } @else {
      background-color :  #fff;
}

// 编译后
body {
    background-color :  #000;
}

循环

SASS支持for循环和while循环:

// for循环
@for $i from 1 to 3 {
  .border-#{$i} {
    border: #{$i}px solid blue;
  }
}

// while循环
$i : 1;
@while $i < 3 {
  .border-#{$i} {
    border: #{$i}px solid blue;
  }
  $i: $i + 1;
}

// 编译后
.border-1 {
  border: 1px solid blue;
}

.border-2 {
  border: 2px solid blue;
}

.border-3 {
  border: 3px solid blue;
}

each命令用来遍历指定参数集合:

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

// 编译后
.a {
  background-image: url("/image/a.jpg");
}

.b {
  background-image: url("/image/b.jpg");
}

.c {
  background-image: url("/image/c.jpg");
}

自定义函数

SASS允许用户编写自定义函数,用@function声明,可以传递参数或者设置默认参数,@return返回处理结果:

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

// 编译后
#sidebar {
  width: 10px;
}

参考

http://www.sass.hk/sass-course.html
http://www.ruanyifeng.com/blog/2012/06/sass.html

推荐阅读更多精彩内容