SASS基础入门

早就听说过SASS,一直没来得及学习,最近正好有时间,就去学习了一下。做过前端的人知道,css不是一门编程语言,全程Cascading Style Sheet(层叠样式表),自然它也就没有什么变量、语句、操作符、函数这些概念。所以说css有时候被前端诟病经常重复写,及时在优化也不如写编程语言来的直接,所以人们就开始思考,慢慢的css也有了一些编程性的元素。于是“CSS预处理器”就光荣诞生了。这些“CSS预处理器”的核心或者说思路就是工程师用一门编程语言去书写前端样式,然后交给“CSS预处理器”去转化成css文件。SASS就是其中之一。

SASS简介

SASS是css开发的一种工具,SASS的使用可以是前端css开发更加高效,使得css代码更加的方便维护和简单。

SASS的安装

安装

SASS是Ruby语言写的,但是两者的语法没有关系。不懂Ruby,照样使用。只是必须先安装Ruby,然后再安装SASS。
假定你已经安装好了Ruby,接着在命令行输入下面的命令:
gem install SASS
然后,就可以使用了。

使用

SASS文件就是普通的文本文件,里面可以直接使用CSS语法。
SASS有两种后缀名文件:一种后缀名为SASS,不使用大括号和分号。
另一种就是我们这里使用的scss文件,这种和我们平时写的css文件格式差不多,使用大括号和分号。
而本文中所说的所有SASS文件都指后缀名为scss的文件。在此也建议使用后缀名为scss的文件,以避免SASS后缀名的严格格式要求报错。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//文件后缀名为SASS的语法
body
background: #eee
font-size:12px
p
background: #0982c1
//文件后缀名为scss的语法
body {
background: #eee;
font-size:12px;
}
p{
background: #0982c1;
}

下面的命令,可以在屏幕上显示.scss文件转化的css代码(假设文件名为test)。
   SASS test.scss

如果要将显示结果保存成文件,后面再跟一个.css文件名。
   SASS test.scss test.css

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

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

生产环境当中,一般使用最后一个选项。
SASS --style compressed test.SASS test.css
你也可以让SASS监听某个文件或目录,一旦源文件有变动,就自动生成编译后的版本。

1
2
3
4
// watch a file
SASS --watch input.scss:output.css
// watch a directory
SASS --watch app/SASS:public/stylesheets

SASS的官方网站,提供了一个在线转换器。你可以在那里,试运行下面的各种例子。

SASS基本语法

接下来我们按照学习一门编程语言的顺序来讲讲SASS的基础语法。

注释

SASS共有两种注释风格。
标准的CSS注释 / 注释内容 / ,会保留到编译后的文件。
单行注释 // 注释内容,只保留在SASS源文件中,编译后被省略
在/*后面加一个感叹号,表示这是”重要注释”。即使是压缩模式编译,也会保留这行注释,通常可以用于声明版权信息。

1
2
3
/*!
重要注释!
*/

变量

SASS中可以使用变量,所有的变量是以$开头,后面紧跟变量名,而变量值和变量名之间就需要使用冒号(:)分隔开(就像CSS属性设置一样),如果值后面加上!default则表示默认值。

普通变量和默认变量

1
2
3
4
5
6
7
8
9
10
11
12
$blue: #1875e7; //普通变量
div{
color: $blue;
}
//默认变量:sass的默认变量一般是用来设置默认值,然后根据需求来覆盖的,覆盖的方式也很简单,只需要在默认变量之前重新声明下变量即可
$baseLineHeight: 2;
$baseLineHeight: 1.5 !default;
body{
line-height: $baseLineHeight;
}

如果变量需要嵌套在字符串中的话,需要写在#{}中再利用$引用。

1
2
3
4
5
$side: left;
div{
border-#{$side}: 1px solid #f00;
}

多值变量

多值变量分为list类型和map类型,简单来说list类型有点像js中的数组,而map类型有点像js中的对象。

list

list数据可通过空格,逗号或小括号分隔多个值,可用nth(\$var,\$index)取值。关于list数据操作还有很多其他函数如length(\$list),join(\$list1,\$list2,[\$separator]),append(\$list,\$value,[\$separator])等,具体可参考sass Functions(搜索List Functions即可)
定义

1
2
3
4
5
6
//一维数据
$px: 5px 10px 20px 30px;
//二维数据,相当于js中的二维数组
$px: 5px 10px, 20px 30px;
$px: (5px 10px) (20px 30px);

使用

1
2
3
4
5
6
7
8
$linkColor: #08c #333 !default;//第一个值为默认值,第二个鼠标滑过值
a{
color:nth($linkColor,1);
&:hover{
color:nth($linkColor,2);
}
}

map

map数据以key和value成对出现,其中value又可以是list。格式为:\$map: (key1: value1, key2: value2, key3: value3);可通过map-get(\$map,\$key)取值。关于map数据还有很多其他函数如map-merge(\$map1,\$map2),map-keys(\$map),map-values($map)等,具体可参考sass Functions(搜索Map Functions即可)
定义

1
$heading: (h1: 2em, h2: 1.5em, h3: 1.2em);

使用

1
2
3
4
5
6
$headings: (h1: 2em, h2: 1.5em, h3: 1.2em);
@each $header, $size in $headings {
#{$header} {
font-size: $size;
}
}

全局变量

在变量值后面加上!global即为全局变量。这个目前还用不上,不过将会在sass 3.4后的版本中正式应用。目前的sass变量范围饱受诟病,所以才有了这个全局变量。
目前变量机制
在选择器中声明的变量会覆盖外面全局声明的变量。(这也就人们常说的sass没有局部变量)

1
2
3
4
5
6
7
8
$fontSize: 12px;
body{
$fontSize: 14px;
font-size:$fontSize;
}
p{
font-size:$fontSize;
}

启用global之后的机制
请注意,这个目前还无法使用,所以样式不是真实解析出来的。

1
2
3
4
5
6
7
8
9
10
11
12
$fontSize: 12px;
$color: #333;
body{
$fontSize: 14px;
$color: #fff !global;
font-size:$fontSize;
color:$color;
}
p{
font-size:$fontSize;
color:$color;
}

这里设置了两个变量,然后在body里面重新设置了下,有点不同的是对于$color变量,我们设置了!global。通过编译后的css可以看到font-size取值不同,而color取值相同。与上面的机制对比就会发现默认在选择器里面的变量为局部变量,而只有设置了!global之后才会成为全局变量。
关于变量的详细分析请查阅sass揭秘之变量

运算

SASS中也可以使用一些对数值型的Value(如:数字、颜色、变量等)进行加减乘除四则运算。请注意运算符前后请留一个空格,不然会出错。

1
2
3
4
5
body {
    margin: (14px/2);
    top: 50px + 100px;
    right: $var * 10%;
  }

嵌套

SASS的嵌套包括两种:一种是选择器的嵌套;另一种是属性的嵌套。我们一般说起或用到的都是选择器的嵌套。

选择器嵌套

所谓选择器嵌套指的是在一个选择器中嵌套另一个选择器来实现继承,从而增强了sass文件的结构性和可读性。

1
2
3
4
//css代码
div h1 {
    color : red;
}

可以写成:

1
2
3
4
  div {
    hi {
      color:red;
    }

属性嵌套

属性也可以嵌套,比如border-color属性,可以写成:

1
2
3
4
5
  p {
    border: {
      color: red;
    }
  }

注意,border后面必须加上冒号
在嵌套的代码块内,可以使用&引用父元素。比如a:hover伪类,可以写成:

1
2
3
  a {
    &:hover { color: #ffb3ff; }
  }

代码的重用

插入文件

SASS的导入(@import)规则和CSS的有所不同,编译时会将@import的scss文件合并进来只生成一个CSS文件。但是如果你在SASS文件中导入css文件如@import ‘reset.css’,那效果跟普通CSS导入样式文件一样,导入的css文件不会合并到编译后的文件中,而是以@import方式存在。
所有的SASS导入文件都可以忽略后缀名.scss。一般来说基础的文件命名方法以_开头,如_mixin.scss。这种文件在导入的时候可以不写下划线,可写成@import “mixin”。
被导入SASS文件a.scss:

1
2
3
4
5
//a.scss
//-------------------------------
body {
background: #eee;
}

需要导入样式的SASS文件b.scss:

1
2
3
4
5
@import "reset.css";
@import "a";
p{
background: #0982c1;
}

转译出来的b.css样式:

1
2
3
4
5
6
7
@import "reset.css";
body {
background: #eee;
}
p{
background: #0982c1;
}

根据上面的代码可以看出,b.scss编译后,reset.css继续保持import的方式,而a.scss则被整合进来了。

继承

SASS允许一个选择器,继承另一个选择器。比如,现有class1:

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

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

1
2
3
4
  .class2 {
    @extend .class1;
    font-size:120%;
  }

占位符选择器
从sass 3.2.0以后就可以定义占位选择器%。这种选择器的优势在于:如果不调用则不会有任何多余的css文件,避免了以前在一些基础的文件中预定义了很多基础的样式,然后实际应用中不管是否使用了@extend去继承相应的样式,都会解析出来所有的样式。占位选择器以%标识定义,通过@extend调用。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
//sass style
//-------------------------------
%ir{
color: transparent;
text-shadow: none;
background-color: transparent;
border: 0;
}
%clearfix{
@if $lte7 {
*zoom: 1;
}
&:before,
&:after {
content: "";
display: table;
font: 0/0 a;
}
&:after {
clear: both;
}
}
.ir{
@extend %ir;
}

则%clearfix不会被编译成css。

Mixin(混合)

Mixin有点像C语言的宏(macro),是可以重用的代码块。
使用@mixin命令,定义一个代码块。

1
2
3
4
  @mixin left {
    float: left;
    margin-left: 10px;
  }

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

1
2
3
  div {
    @include left;
  }

mixin的强大之处,在于可以指定参数和缺省值。

1
2
3
4
  @mixin left($value: 10px) {
    float: left;
    margin-right: $value;
  }

使用的时候,根据需要加入参数:

1
2
3
  div {
    @include left(20px);
  }

下面是一个mixin的实例,用来生成浏览器前缀。

1
2
3
4
5
  @mixin rounded($vert, $horz, $radius: 10px) {
    border-#{$vert}-#{$horz}-radius: $radius;
    -moz-border-radius-#{$vert}#{$horz}: $radius;
    -webkit-border-#{$vert}-#{$horz}-radius: $radius;
  }

使用的时候,可以像下面这样调用:

1
2
  #navbar li { @include rounded(top, left); }
  #footer { @include rounded(top, left, 5px); }

颜色函数

SASS提供了一些内置的颜色函数,以便生成系列颜色。

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

更多关于颜色函数的内容可以参阅Sass基础——颜色函数

高级用法

条件语句

@if可以用来判断:

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

配套的还有@else命令:

1
2
3
4
5
  @if lightness($color) > 30% {
    background-color: #000;
  } @else {
    background-color: #fff;
  }

循环语句

SASS支持for循环:

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

也支持while循环:

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

each命令,作用与for类似:

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

关于循环判断详细分析请查阅:sass揭秘之@if,@for,@each

三目判断

语法为:if($condition, $if_true, $if_false) 。三个参数分别表示:条件,条件为真的值,条件为假的值。

1
2
if(true, 1px, 2px) => 1px
if(false, 1px, 2px) => 2px

自定义函数

SASS定义了很多函数可供使用,当然你也可以自己定义函数,以@fuction开始。实际项目中我们使用最多的应该是颜色函数,而颜色函数中又以lighten减淡和darken加深为最,其调用方法为lighten($color,$amount)和darken($color,$amount),它们的第一个参数都是颜色值,第二个参数都是百分比。
颜色函数前面提及过了,下面是自己的定义函数:

1
2
3
4
5
6
  @function double($n) {
    @return $n * 2;
  }
  #sidebar {
    width: double(5px);
  }

关于更多关于函数的详细分析请查阅Sass基础——Sass函数

本文主要按照阮一峰的SASS用法指南w3cplus对SASS的基础语法讲解的整合,主要为了自己学习使用。

测试功能而已,你非要赏点我就没办法了...