进阶篇4. SASS

在上一节中我们演示了使用gulp来编译sass文件,接下来,我们来介绍一下sass。如果你还不会sass,是时候补课了,如果已经熟悉,可以跳过。

sass是一个用来快速编写css文件的语言。经过编译之后的sass文件就是我们通常所说的样式表css。

sass的好处我就不多说了,如果你是一个前端,css已经熟练了,你就应该在sass、less和stylus中挑一个学习,这是必须的;如果你对自己的定位不是前端,或者前端在你掌握的技能中没那么重要的话,sass就可有可无了。

sass 有两种后缀名文件:一种后缀名为 sass,不使用大括号和分号,这是最初的版本;另一种就是我们这里使用的 scss 文件,这种和我们平时写的 css 文件格式差不多,使用大括号和分号。

第一种方式由于不那么容易被习惯了写css的前端们所接受,因此,又出了后一个版本。这才使得sass的使用量逐渐超过less。不过,如果你喜欢用less也是可以的。现在两者的区别可能只是用sass的人多一些(社区大一些),用less的人少一些。

Sass的重要概念

1. 变量

在sass中用美元符$声明变量,在变量名称的后面用冒号隔开属性值和分号,然后可以在其他地方使用这个变量。如:

sass代码:

$blue: #3bbfce;  
$width: 100px;
.main{
  color: $blue;
  width: $width;
}

.footer {
  width: $width / 2; /*SASS允许在代码中使用算式 */ 
}

编译后的css代码:

.main{
  color: #3bbfce;
  width: 100px;
}

.footer {
  width: 50px;
}

2. 嵌套

sass允许你嵌套选择器,以此来表示选择器之间的层级关系,从而避免了重复劳动。比如:

#navigation #main-menu ul {
  background: #e5e5e5;
  border: 1px solid #e2e2e2;
  li {
    padding: 5px 10px 5px 10px;
    &:hover { /*在嵌套的代码块内,可以使用&引用父元素。*/
      background: #ccc;
      a {
        color: #fff;
      }
    }
    a {
      text-decoration: none;
      text-shadow: 1px 2px rgb(211, 200, 200);
   }
  }
}

编译后的css代码:

#navigation #main-menu ul {
  background: #e5e5e5;
  border: 1px solid #e2e2e2;
}

#navigation #main-menu ul li {
  padding: 5px 10px 5px 10px;
}

#navigation #main-menu ul li:hover {
  background: #ccc;
}

#navigation #main-menu ul li:hover a {
  color: #fff;
}

#navigation #main-menu ul li a {
  text-decoration: none;
  text-shadow: 1px 2px #d3c8c8;
}

除了选择器之外,还可以嵌套属性,比如:

p {
 border: {
   color: red;
   radius: 5px;
 }
}

编译后的css代码:

p {
 border-color:red;
 border-radius:5px;
}

3. 继承

sass中允许使用@extend继承某个选择器的属性,比如:

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

.class2 {
 @extend .class1; /* 继承class1 */
 font-size:120%;
}

编译后的css代码:

.class1,.class2 {
 border:1px solid #ddd
}
.class2 {
  font-size:120%
}

4. Mixin

Mixin比变量更强大,它可以让你重复使用一段css代码、一组属性或者一组选择器,而且你可以给它设置参数。

Mixin使用@mixin标识符定义。看上去很像其他的CSS @标识符,比如说@media或者@font-face。这个标识符给一大段样式赋予一个名字,这样你就可以轻易地通过引用这个名字重用这段样式。

Mixin中不仅可以包含属性,也可以包含css规则,包含选择器和选择器中的属性,如下代码:

@mixin no-bullets {
  list-style: none;
  li {
    list-style-image: none;
    list-style-type: none;
    margin-left: 0px;
  }
}

当一个包含css规则的Mixin通过@include包含在一个父规则中时,在Mixin中的规则最终会生成父规则中的嵌套规则。举个例子,看看下边的sass代码,这个例子中使用了no-bullets这个Mixin:

ul.plain {
  color: #444;
  @include no-bullets;
}

sass的@include指令会将引入Mixin的那行代码替换成Mixin里边的内容。最终,上边的例子如下代码:

ul.plain {
  color: #444;
  list-style: none;
}
ul.plain li {
  list-style-image: none;
  list-style-type: none;
  margin-left: 0px;
}

Mixin还可以有参数,在使用@include Mixin的时候传递参数:

@mixin left($dist) {
  float: left;
  margin-left: $dist;
}

#data {
  @include left(10px);
}

编译后的css代码:

#data {
  float: left;
  margin-left: 10px;
}

@content可以使 @mixin接受一整块样式:

@mixin max-screen($res){
  @media only screen and ( max-width: $res )
  {
    @content;
  }
}

@include max-screen(480px) {
  body { color: red }
}

编译后的css代码:

@media only screen and (max-width: 480px) {
  body { color: red }
}    

5. 导入 import

sass的导入( @import)规则和CSS的有所不同,编译时会将 @import的scss文件合并进来只生成一个CSS文件。但是如果你在sass文件中导入css文件如 @import 'reset.css',那效果跟普通CSS导入样式文件一样,导入的css文件不会合并到编译后的文件中,而是以 @import方式存在。

所有的sass导入文件都可以忽略后缀名 .scss。一般来说基础的文件命名方法以开头,如 mixin.scss。这种文件在导入的时候可以不写下划线,可写成 @import "mixin"。

//a.scss
//-------------------------------
body {
  background: #eee;
}

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

@import "reset.css";
@import "a";
p{
  background: #0982c1;
} 

转译出来的b.css样式:

@import "reset.css";
body {
  background: #eee;
}
p{
  background: #0982c1;
}

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

和前面的4个基本概念相比,第5点“导入”本身其实并不算是一个基本概念。但是它为我们提供了一个非常重要的作用——能让我们用模块化的思路去整理我们的Sass文件。

在没有sass和less的日子里,我们不得不把css代码写在很少的几个文件里,因为我们不可能在网站上载入几十个css文件,这样会导致网站加载速度过慢。维持css只有少数的几个文件,速度虽然快了,但是每个文件都会包含非常多的代码,这些代码控制着很多不同对象的样式,以至于css的维护成本会比较高,随着网站的不断升级和内容的增加,css的维护成本也会增加。

模块化css以后我们会具体讲,这里只说一下它的基本思路,就是把页面元素分成小的单元,然后每一个单元的样式放在一个文件中。这样可维护性就增强了。然后经过sass编译之后,将几十甚至上百个小的sass文件编译成几个大的css文件。再交付给生产环境使用。从而即保证了速度又保持了样式表的可维护性。

为了将不同的多个sass文件组合成一个大的css文件,导入@import在此起到了关键性的作用。因此,我们在最后单独提一下。

实践

@mixin medium-up {
 @media screen and (min-width: 768px) {
   @content;
 }
}

@mixin large-up {
 @media screen and (min-width: 1024px) {
   @content;
 }
}

.login {
 background: #fff;
 width: 300px;
 margin: 40px auto;
 padding: 20px;

 @include medium-up{
   width: 600px;
   height: 200px;
 }

 @include large-up{
   width: 1000px;
 } 
}

以上是我们经常用来处理响应式页面中的代码。先定义两个mixin,它们对应的是两个不同的视口尺寸,然后用@content来接收调用mixin的元素的一整套样式

以上代码会生成怎样的css代码,这里留给读者自己来实践。

这里要说的是这样做的好处——这当然还是代码可维护性方面的好处。使用这里的方法和思路,允许我们在为每个元素写默认样式的同时,就立刻定义它在各种尺寸屏幕下的优化样式。传统的方式下,默认样式写在一起,手机尺寸的样式写在一起,排版尺寸的样式写在一起,为了修改一个元素的样式,要在不同的css文件和不同的位置上来回切换。两者孰优孰劣一目了然。

总结

以上是sass的一些基本概念,但不是全部。和css一样,概念都不难,但是要熟练掌握sass,必须大量的写代码,在实践中不断积累经验才能理解它的精髓。作为经验丰富的前端,在实际工作中,你应该能灵活熟练的运用上面这些概念;作为初学者,你可能不会使用太多Mixin,但是应该至少能够看懂Mixin,其余的几个概念则应该没什么大的难度。

更深入的学习SASS,请阅读w3cplus为我们带来的精彩内容。

https://www.w3cplus.com/sassguide/

http://sass-lang.com/guide

本书共78小节:

评论 (写第一个评论)