学习之路/CSS扩展语言SASS

CSS扩展语言SASS学习

欢迎阅读我全部的学习之路系列文章： 学习之路系类文章目录

介绍

SASS官网: Sass is the most mature, stable, and powerful professional grade CSS extension language in the world.

百科： Sass 扩展了 CSS3，增长了 嵌套、变量、混入、选择器、继承 等等特性。 Sass 生成良好格式化的 CSS 代码，易于组织和维护。 SASS是对CSS3（层叠样式表）的语法的一种扩充，它可使用巢状、混入、选择子继承等功能，能够更有效有弹性的写出Stylesheet。 Sass最后仍是会编译出合法的CSS让浏览可使用，也就是说它自己的语法并不太容易让浏览器识别（虽然它和CSS的语法很是的像，几乎同样），由于它不是标准的CSS格式，在它的语法内部可使用动态变量等，因此它更像一种极简单的动态语言。

环境安装

使用方式2种：一、Applicaition(使用工具软件)；二、Command Line(命令行)。

我使用的Mac,而且我选择使用第2种方式。

SASS的编译依赖Ruby,因此须要先安装Ruby.

Linux

是可使用系统的包管理工具或者rbenv、 rvm进行安装.

Windows

安装Windows版本的ruby，Rubyinstaller

Mac

Mac系统自带ruby无需特别安装

安装好Ruby以后，使用如下命令检查是否安装正确

$ ruby -v
--
ruby 2.0.0p645 (2015-04-13 revision 50299) [universal.x86_64-darwin15]
$ gem -v
--
2.0.14

命令

在准备好Ruby环境以后

安装

$ gem install sass

若是在Mac或者Linux下执行报权限问题，请在命令前加 sudo 获取root权限.

查看版本

$ sass -v
--
Sass 3.4.19 (Selective Steve)

编译SASS文件

将sass文件编译为CSS文件

$ sass input.sass output.css

监控sass文件变化，并实时编译成CSS文件

$ sass --watch input.sass:output.css

也能够监控文件夹的方式来实时编译CSS文件，如把app/sass目录实时编译到public/css中

$ sass --watch app/sass:public/css

基本语法

SASS的语法比较简单，包括：

• Variables(变量)
• Nesting(嵌套)
• Import(文件引入)
• Maxins(混入)
• Extend/Inheritance(扩展和继承)
• Operators(运算符)

Variables(变量)

那些在样式中能够进行复用的值均可以设置为变量，例如：字体，颜色等。

$font-stack:    Helvetica, sans-serif
$primary-color: #333

body
  font: 100% $font-stack
  color: $primary-color

以上SASS代码编译成CSS代码以后结果以下：

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

Nesting(嵌套)

SASS使咱们能够像HTML结构嵌套同样使用样式。

nav
  ul
    margin: 0
    padding: 0
    list-style: none

    li
      display: inline-block

      a
        display: block
        padding: 6px 12px
        text-decoration: none

以上SASS代码，结构嵌套一个导航的结构样式，提升了代码更有可读性，编译后的CSS代码以下：

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

Import(文件引入)

css虽然也提供了@import引入外部文件，可是会增长HTTP请求。而SASS提供的@import文件引入是将全部的文件最终合并到一个CSS文件中，多个文件引入最终只有一个HTTP请求。

_reset.sass

html,
body,
ul,
ol
  margin:  0
  padding: 0

base.sass

@import reset

body
  font: 100% Helvetica, sans-serif
  background-color: #efefef

编译后的css文件以下

html, body, ul, ol {
  margin: 0;
  padding: 0;
}

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

Maxins(混入)

能够理解为Maxin混入是在sass中方法定义和调用，能够经过定义一个能够复用的方法，进行调用。 例如：能够咱们定义一个Maxin为border-radius实现对全部浏览器厂商的支持，重复使用此Maxin能够减小编写重复的代码

=border-radius($radius)
  -webkit-border-radius: $radius
  -moz-border-radius:    $radius
  -ms-border-radius:     $radius
  border-radius:         $radius

.box
  +border-radius(10px)

其中经过=号定义一个Maxin，经过+进行调用，编译后的css以下：

.box {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  border-radius: 10px;
}

Extend/Inheritance(扩展和继承)

这里的扩展和继承，能够理解为面向对象思想中的继承，咱们能够定义通用的样式基类，而后扩展出不一样的子类，这些扩展的子类就继承了基类的全部样式。

.message
  border: 1px solid #ccc
  padding: 10px
  color: #333


.success
  @extend .message
  border-color: green


.error
  @extend .message
  border-color: red


.warning
  @extend .message
  border-color: yellow

其中.message是样式基类，扩展子类.success,.error,.warning都继承至.message并拥有其样式属性。 以上sass编译以后获得的css以下：

.message, .success, .error, .warning {
  border: 1px solid #cccccc;
  padding: 10px;
  color: #333;
}

.success {
  border-color: green;
}

.error {
  border-color: red;
}

.warning {
  border-color: yellow;
}

Operators(运算符)

在css编写过程当中，一些基本的数学运算是很是有用的。基本的数据运算包括：＋－＊／％。 例如咱们在设置内容和边栏布局的时候能够有以下sass写法：

.container
  width: 100%

article[role="main"]
  float: left
  width: 600px / 960px * 100%


aside[role="complimentary"]
  float: right
  width: 300px / 960px * 100%

以上咱们就编写了一个960像素宽的响应式网格布局，编译后的css以下：

.container {
  width: 100%;
}

article[role="main"] {
  float: left;
  width: 62.5%;
}

aside[role="complimentary"] {
  float: right;
  width: 31.25%;
}

总结

以上内容就是sass的最基本的知识点和使用方式，可是在应用到实际的开发环境中的时候，并不会单独的使用sass。通常会辅以其余相关的构建工具，在接下来的学习中，我会去探索如何在实际的项目中应用sass。