sass 快速入门学习

笔阁 发布于 2015/12/11 09:06
阅读 635
收藏 2
## 什么是css预处理器


  众所周知css并不能算是一们真正意义上的“编程”语言,它本身无法未完成像其它编程语言一样的嵌套、继承、设置变量等工作。


  在程序员眼里,CSS是一件很麻烦的东西。它没有变量,也没有条件语句,只是一行行单纯的描述,写起来相当费事。


![enter image description here][1]


  为了解决css的不足,开发者们想到了编写一种对css进行预处理的“中间语言”,可以实现一些“编程”语言才有的功能,然后自动编译成css供浏览识别,这样既一定程度上弥补了css的不足,也无需一种新的语言来代替css以供浏览器识别。于是css预处理语言SASS就应运而生了。


## 什么Sass


Sass 是一门高于 CSS 的元语言,它能用来清晰地、结构化地描述文件样式,有着比普通 CSS 更加强大的功能。


Sass 能够提供更简洁、更优雅的语法,同时提供多种功能来创建可维护和管理的样式表。


Sass 是最早的css预处理语言,有比less更为强大的功能。但因其一开始的缩进式语法并不能被开发者们接受,所以使用率不高,不过由于其强大的功能和Ruby on Rails 的大力推动,逐渐被更多开发者使用。


Sass 是采用的Ruby语言编写的一款css预处理语言,它诞生于2007年,是最早成熟css预处理语言。最初它是为了配合haml而设计的,因此有着和haml一样的缩进式风格。


Sass从第三代开始,放弃了缩进式风格,并且完全向下兼容普通的css代码,这一代的Sass也被称为Scss。


## Sass 和 SCSS 有什么区别?


Sass 和 SCSS 其实是同一种东西,我们平时都称之为 Sass,两者之间不同之处有以下两点:


文件扩展名不同,Sass 是以“.sass”后缀为扩展名,而 SCSS 是以“.scss”后缀为扩展名
语法书写方式不同,Sass 是以严格的缩进式语法规则来书写,不带大括号({})和分号(;),而 SCSS 的语法书写和我们的 CSS 语法书写方式非常类似。
先来看一个示例:Sass 语法


    $font-stack: Helvetica, sans-serif  //定义变量
    $primary-color: #fff //定义变量
     
    body
      font: 100% $font-stack
      color: $primary-color


SCSS 语法


    $font-stack: Helvetica, sans-serif;
    $primary-color: #fff;
     
    body {
      font: 100% $font-stack;
      color: $primary-color;
    }


编译出来的 CSS


    body {
      font: 100% Helvetica, sans-serif;
      color: #fff;
    }


## 文件后缀名


sass有两种后缀名文件:


一种后缀名为sass,不使用大括号和分号;
另一种就是我们这里使用的scss文件,这种和我们平时写的css文件格式差不多,使用大括号和分号。
而本教程中所说的所有sass文件都指后缀名为scss的文件。在此也建议使用后缀名为scss的文件,以避免sass后缀名的严格格式要求报错。


    //文件后缀名为sass的语法
    body
      background: #eee
      font-size:12px
    p
      background: #0982c1
     
    //文件后缀名为scss的语法  
    body {
      background: #eee;
      font-size:12px;
    }
    p{
      background: #0982c1;
    } 


注意:“.sass”只能使用 Sass 老语法规则(缩进规则),“.scss”使用的是 Sass 的新语法规则,也就是 SCSS 语法规则(类似 CSS 语法格式)。
ps:本文采用的语法格式都将使用的是 SCSS 语法格式。


## 四种style生成后的css


在 Sass 中编译出来的样式风格也可以按不同的样式风格显示。其主要包括以下几种样式风格:


 - 嵌套输出方式 nested
 - 展开输出方式 expanded
 - 紧凑输出方式 compact
 - 压缩输出方式 compressed


在知识点中,嵌套输出方式,在前端是可以看到效果的,后几种方式是需要在命令行中编译的,在编译的时候分别带上参数“ --style expanded --style compact --style compressed”:


Sass 提供了一种嵌套显示 CSS 文件的方式


    nav {
      ul {
        margin: 0;
        padding: 0;
        list-style: none;
      }
     
      li { display: inline-block; }
     
      a {
        display: block;
        padding: 6px 12px;
        text-decoration: none;
      }
    }


nested 编译出来:


    nav ul {
      margin: 0;
      padding: 0;
      list-style: none; }
    nav li {
      display: inline-block; }
    nav a {
      display: block;
      padding: 6px 12px;
      text-decoration: none; }


expanded 这个输出的 CSS 样式风格和 nested 类似,只是大括号在另起一行,同样上面的代码,编译出来:


    nav ul {
      margin: 0;
      padding: 0;
      list-style: none;
    }
    nav li {
      display: inline-block;
    }
    nav a {
      display: block;
      padding: 6px 12px;
      text-decoration: none;
    }


compact 编译出来:


    nav ul { margin: 0; padding: 0; list-style: none; }
    nav li { display: inline-block; }
    nav a { display: block; padding: 6px 12px; text-decoration: none; }


compressed 编译出来:


    nav ul{margin:0;padding:0;list-style:none}nav li{display:inline-block}nav a{display:block;padding:6px 12px;text-decoration:none}


## 声明变量


JavaScript中声明变量都是使用关键词“var”开头,但是在 Sass 不使用这个关键词,而是使用美元符号“$”开头。


![变量声明][2]


Sass 的变量包括三个部分:


 - 声明变量的符号“$”
 - 变量名称
 - 赋予变量的值


    //sass style
    $highlight-color: #F90;


## 变量的引用
  凡是css属性的标准值(比如说1px或者bold)可存在的地方,变量就可以使用。css生成时,变量会被它们的值所替代。之后,如果你需要一个不同的值,只需要改变这个变量的值,则所有引用此变量的地方生成的值都会随之改变。


    $color: #F90;
    .box2 {
      border: 1px solid $color;
    }
     
    //编译后
     
    .box2 {
      border: 1px solid #F90;
    }


  看上边示例中的$color变量,它被直接赋值给border属性,当这段代码被编译输出css时,$color会被#F90这一颜色值所替代。产生的效果就是给box2这个类一条1像素宽、实心且颜色值为#F90的边框。


  在声明变量时,变量值也可以引用其他变量。当你通过粒度区分,为不同的值取不同名字时,这相当有用。下例在独立的颜色值粒度上定义了一个变量,且在另一个更复杂的边框值粒度上也定义了一个变量:


    $color: #F90;
    $border: 1px solid $color;
    .box2 {
      border: $border;
    }
     
    //编译后
     
    .box2 {
      border: 1px solid #F90;
    }


  这里,$border变量的声明中使用了$color这个变量。产生的效 果就跟你直接为border属性设置了一个1px $color solid的值是一样的。


更多内容和示例参考:
[http://www.hubwiz.com/course/565c0c2abc27d77730c072b3/][3]




  [1]: http://www.hubwiz.com/course/565c0c2abc27d77730c072b3/img/bg-css.jpg
  [2]: http://www.hubwiz.com/course/565c0c2abc27d77730c072b3/img/variable.png
  [3]: http://www.hubwiz.com/course/565c0c2abc27d77730c072b3/?ch=itu
加载中
返回顶部
顶部