学习之路/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种：1、Applicaition(使用工具软件)；2、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。