SASS用法指南

作者: 阮一峰

日期: 2012年6月19日

学过CSS的人都知道,它不是一种编程语言。

你可以用它开发网页样式,但是没法用它编程。也就是说,CSS基本上是设计师的工具,不是程序员的工具。在程序员眼里,CSS是一件很麻烦的东西。它没有变量,也没有条件语句,只是一行行单纯的描述,写起来相当费事。

很自然地,有人就开始为CSS加入编程元素,这被叫做"CSS预处理器"(css preprocessor)。它的基本思想是,用一种专门的编程语言,进行网页样式设计,然后再编译成正常的CSS文件。

各种"CSS预处理器"之中,我自己最喜欢SASS,觉得它有很多优点,打算以后都用它来写CSS。下面是我整理的用法总结,供自己开发时参考,相信对其他人也有用。

============================================

SASS用法指南

作者:阮一峰

一、什么是SASS

SASS是一种CSS的开发工具,提供了许多便利的写法,大大节省了设计者的时间,使得CSS的开发,变得简单和可维护。

本文总结了SASS的主要用法。我的目标是,有了这篇文章,日常的一般使用就不需要去看官方文档了。

二、安装和使用

2.1 安装

SASS是Ruby语言写的,但是两者的语法没有关系。不懂Ruby,照样使用。只是必须先安装Ruby,然后再安装SASS。

假定你已经安装好了Ruby,接着在命令行输入下面的命令:

  gem install sass

然后,就可以使用了。

2.2 使用

SASS文件就是普通的文本文件,里面可以直接使用CSS语法。文件后缀名是.scss,意思为Sassy CSS。

下面的命令,可以在屏幕上显示.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监听某个文件或目录,一旦源文件有变动,就自动生成编译后的版本。

  // watch a file

  sass --watch input.scss:output.css

  // watch a directory

  sass --watch app/sass:public/stylesheets

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

三、基本用法

3.1 变量

SASS允许使用变量,所有变量以$开头。

  $blue : #1875e7; 

  div {
   color : $blue;
  }

如果变量需要镶嵌在字符串之中,就必须需要写在#{}之中。

  $side : left;

  .rounded {
    border-#{$side}-radius: 5px;
  }

3.2 计算功能

SASS允许在代码中使用算式:

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

3.3 嵌套

SASS允许选择器嵌套。比如,下面的CSS代码:

  div h1 {
    color : red;
  }

可以写成:

  div {
    hi {
      color:red;
    }
  }

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

  p {
    border: {
      color: red;
    }
  }

注意,border后面必须加上冒号。

在嵌套的代码块内,可以使用&引用父元素。比如a:hover伪类,可以写成:

  a {
    &:hover { color: #ffb3ff; }
  }

3.4 注释

SASS共有两种注释风格。

标准的CSS注释 /* comment */ ,会保留到编译后的文件。

单行注释 // comment,只保留在SASS源文件中,编译后被省略。

在/*后面加一个感叹号,表示这是"重要注释"。即使是压缩模式编译,也会保留这行注释,通常可以用于声明版权信息。

  /*!
    重要注释!
  */

四、代码的重用

4.1 继承

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

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

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

  .class2 {
    @extend .class1;
    font-size:120%;
  }

4.2 Mixin

Mixin有点像C语言的宏(macro),是可以重用的代码块。

使用@mixin命令,定义一个代码块。

  @mixin left {
    float: left;
    margin-left: 10px;
  }

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

  div {
    @include left;
  }

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

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

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

  div {
    @include left(20px);
  }

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

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

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

  #navbar li { @include rounded(top, left); }

  #footer { @include rounded(top, left, 5px); }

4.3 颜色函数

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

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

4.4 插入文件

@import命令,用来插入外部文件。

  @import "path/filename.scss";

如果插入的是.css文件,则等同于css的import命令。

  @import "foo.css";

五、高级用法

5.1 条件语句

@if可以用来判断:

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

配套的还有@else命令:

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

5.2 循环语句

SASS支持for循环:

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

也支持while循环:

  $i: 6;

  @while $i > 0 {
    .item-#{$i} { width: 2em * $i; }
    $i: $i - 2;
  }

each命令,作用与for类似:

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

5.3 自定义函数

SASS允许用户编写自己的函数。

  @function double($n) {
    @return $n * 2;
  }

  #sidebar {
    width: double(5px);
  }

(完)

珠峰培训

简寻

留言(96条)

不懂ruby 和less比如何

sass 和 less 都很好

但有没有什么好的编辑器配合啊?

好像用dreamweaver 来写的话,代码提示功能就没了,稍有不便。

以致我还一直没怎么尝试过这种方式

强大的东西果然都很复杂...

我也想学CSS+DIV,一直懒惰!!!

我看twitter的bootstrap的时候有个less也是和这个差不多的,这些没准也会成为前端工程师的必备知识了,看来要抓紧时间学习一下。

你好啊,我一直在使用less,我觉得您上面写的sass的功能less几乎全有,那么为什么您最后选择了sass呢?

我觉的好的页面制作,他们面对的和要解决的问题都不是 sass 这种工具可以解决的,所以它的应用范围有限,有点程序员的一厢情愿,却不能满足实际快速开发和维护页面制作的需求,一句话,“它解决的问题不在点儿上”。

LESS还是差了不少的,没有@extend,没有属性嵌套,没有@if和@for,我用下来还有不少bug(比如从javascript拿到的数据无法参与计算什么的)。

唯一的特点就是可以在网页上运行时解析,这感觉相当酷(但要说有啥好处其实也没多少)。

不过用这种实现CSS比直接写CSS畅快多了,尤其是单页面应用型网页。

不太看好SASS,有点鸡肋的感觉。

谢谢以前好还没注意,有这样好的工具!

gem install sass
命令行提示HTTP RESPONSE 302错误,网上查找资料提示更新gem,经尝试无效,何解?
win7 x86

博主,您的网友捐助试验到现在已经一年了,可以公布数据让大家了解一下状况吗?

SASS适合程序员,设计师可能更习惯于CSS

引用bingo的发言:

博主,您的网友捐助试验到现在已经一年了,可以公布数据让大家了解一下状况吗?

不好意思,请再等一下。

有报纸买走了这篇文章,我要等到他们发表以后,才能贴上来,大概在6月底吧。

引用大春饵的发言:

你好啊,我一直在使用less,我觉得您上面写的sass的功能less几乎全有,那么为什么您最后选择了sass呢?

Less要靠javascript解析,我不喜欢这种做法。另外,less的变量用@表示,我也不太习惯。

一直用960 Grid System这种框架。
楼主怎么用ruby下的呢,有没有VS或QT下的推荐?

挺累人的.. 我觉着用ruby还不如用javascript

没学过CSS的路过。

不错。前阵子看貌似还是要收费的;今天一看竟然上github了。可以开始用了。

引用大春饵的发言:

你好啊,我一直在使用less,我觉得您上面写的sass的功能less几乎全有,那么为什么您最后选择了sass呢?

sass比less更强大点,特别是对于颜色这块的处理function非常强大,而且还可以自定义function(ruby),另外就是sass的黄金搭档http://compass-style.org/,让sass变得更加完美,就如ruby之于rails... 另外可以看看这篇文章,介绍sass,less,node.js,coffeescript开发工具WebMatrix: http://www.cnblogs.com/aNd1coder/archive/2012/06/17/2552037.html

引用阮一峰的发言:

Less要靠javascript解析,我不喜欢这种做法。另外,less的变量用@表示,我也不太习惯。

less同样也有ruby的gem,可以在本地进行preprocessor...

引用依树的发言:

sass 和 less 都很好

但有没有什么好的编辑器配合啊?

好像用dreamweaver 来写的话,代码提示功能就没了,稍有不便。

以致我还一直没怎么尝试过这种方式

不要保存为.less文件,直接保存成.css,这样提示功能还是有的。
像这样:
<link rel="stylesheet/less" type="text/css" href="less.css">

引用依树的发言:

sass 和 less 都很好

但有没有什么好的编辑器配合啊?

好像用dreamweaver 来写的话,代码提示功能就没了,稍有不便。

以致我还一直没怎么尝试过这种方式

Emacs倒是可以胜任。我试着用了一段时间,还愉快


ERROR: Could not find a valid gem 'sass' (>= 0) in any repository
ERROR: While executing gem ... (Gem::RemoteFetcher::FetchError)
Errno::ETIMEDOUT: A connection attempt failed because the connected party di
d not properly respond after a period of time, or established connection failed
because connected host has failed to respond. - connect(2) (http://rubygems.org/
latest_specs.4.8.gz)

why?

这类工具毫无意义。能节省时间能更方便快捷?没有!

貌似我还停留在纯的css上,这种还没试过,不过对于我懂点后台语言的来说,还好理解,如果那种只会html,css的是不很难理解这些了?

sass貌似把css变复杂了,支持您的博客,

请教阮一峰老师:

您是用什么编辑器来编辑SASS的。

我用的是Sublime,安装了SASS的package,可是还是不行。

谢谢!

用了几年div+Css,竟然都没听说过还有这个神奇的工具,看来要好好了解了解!!

好复杂..我其实只是想扒下octopress 的高亮代码的css而已..

引用依树的发言:

sass 和 less 都很好

但有没有什么好的编辑器配合啊?

好像用dreamweaver 来写的话,代码提示功能就没了,稍有不便。

以致我还一直没怎么尝试过这种方式

用sublime text编辑器,可以安装sass开发包,就可以用提示功能了,我现在就用这个开发,很方便的

博主的代码中的缩进的空格都被转换成中文的空格了,所以直接复制过去在sass下会报错。

很感谢你呀, 正在考虑使用LESS, 还是SASS, 只是不想装RUBY...呵呵

全部试了一遍,发现@import和自带的颜色函数这两处有问题。按照博主的说法使用sass不能编译成功。

@import “path/xxx” //xxx 可以是xxx.scss 或者xxx.sass
这里用的是双引号而不是圆括号
而且 xxx文件的文件名必须为 _xxx.scss 或者 _xxx.sass
SASS官方文档说这叫 partial

@import

Stylesheets can get pretty big. CSS has an @import directive that allows you to break your styles up into multiple stylesheets, but each stylesheet takes a separate (slow) HTTP request. That’s why Sass’s @import directive pulls in the stylesheets directly. Not only that, but any variables or mixins defined in @imported files are available to the files that import them.

Sass has a naming convention for files that are meant to be imported (called “partials”): they begin with an underscore. Let’s create a partial called _rounded.scss to hold our rounded mixin.

In order to support both .scss and .sass files, Sass allows files to be imported without specifying a file extension. That means we can just import "rounded", rather than "rounded.scss".

嗯,关于颜色函数,是在sass的交互shell下使用
在命令行下先敲入 sass -i
这时会有 >> 提示
在敲入 lighten(#cc3, 10%)
会得出 #d6d65c

@linus脱袜子:

谢谢指出。import后面不能跟圆括号,已经改过来了。但是,文件名好像不用以下划线开头,下面的代码可以编译通过。

@import "./test.scss"

另外,颜色函数没有问题啊,我可以正常使用。

background-color:lighten(#cc3, 10%);

感觉有点鸡肋,现在css很熟悉了,用记事本也能写出一个网页~

sass本身很好,看用的人用在何处,怎么用了~

正在试用Sass,还不敢妄下评论。第一感觉就是把简单的CSS变复杂了

还是喜欢手写css的说。。。。。

引用依树的发言:

sass 和 less 都很好

但有没有什么好的编辑器配合啊?

webstorm

3.3 嵌套最后
在嵌套的代码块内,可以使用$引用父元素。比如a:hover伪类,可以写成:
应该是 & 代码中的正确

你好,很感谢您的介绍,只是使用后遇到问题,.scss的文件里面有中文注释的时候它会提示Syntax error: Invalid GBK character "\xE5"这样的错误,在网上搜索了一下还是没能解决,您知道有啥解决办法吗?

引用阮一峰的发言:

Less要靠javascript解析,我不喜欢这种做法。另外,less的变量用@表示,我也不太习惯。

其实less是可以node.js来编译生成css,再放到服务器那边呢。还有,如果 会用gvim的话,那有个脚本,可以实现语法高亮,保存时自动生成css。原来直接写css的好处全有了。还有less人性化的书写方式。less也有工具,可以将再有css代码转换为less(http://css2less.cc)。我想,如果是设计师的话,更喜欢用less.

只是个预处理器嘛。看了下语法,感觉less, scss都不如sass简洁。看来是python写惯了,喜欢缩进了。。

less的语法更轻便,喜欢less. Sass的语法太编程化了,虽然没压力,但是不给力。没有解放思维

不以下划线开头的文件也不会被编译啊
这是为什么呢?
我建立了3个文件colors.scss _widths.scss和test.scss
在test.scss中@import 前两个文件
然后命令行编译test.scss时 sass test.scss test.css
不会产生 color.css
这是为什么呢?请教

引用小徐的发言:

不以下划线开头的文件也不会被编译啊
这是为什么呢?
我建立了3个文件colors.scss _widths.scss和test.scss
在test.scss中@import 前两个文件
然后命令行编译test.scss时 sass test.scss test.css
不会产生 color.css
这是为什么呢?请教

是不是你编译命令写错了 color那个scss文件是不是没修改过 默认编译是只编译修改的文件

引用gigi的发言:

你好,很感谢您的介绍,只是使用后遇到问题,.scss的文件里面有中文注释的时候它会提示Syntax error: Invalid GBK character "\xE5"这样的错误,在网上搜索了一下还是没能解决,您知道有啥解决办法吗?

同问

引用shawn的发言:

同问

在文件的开头声明编码 @charset "utf-8";

其实可以用compass工具的,而不必要一长串的命令

http://ihavanna.org/internet/2013-08/convert-scss-to-css.html

引用shawn的发言:

同问

@charset "utf-8";
在有中文顶部的地方都声明一下。注意要放在第一行。

刚开始看 LESS 和 SASS 感觉是 LESS 语法更简单一些但运算功能好像弱一些,打算暂时先用 LESS 逐渐熟悉后再试试 SASS 吧……

工具我在用 LiveReload 和 CodeKit 其实都挺方便,不需要 js 去做 LESS 编译的。

3.3 嵌套,第四个 code block 上的说明,应是:
“在嵌套的代码块内,可以使用 & 引用父元素。比如a:hover伪类,可以写成:”
原文将 & 写成了 $

3.3的一个是h1,一个是hi

引用依树的发言:

sass 和 less 都很好

但有没有什么好的编辑器配合啊?

好像用dreamweaver 来写的话,代码提示功能就没了,稍有不便。

以致我还一直没怎么尝试过这种方式

用sublimetext吧~

引用gigi的发言:

你好,很感谢您的介绍,只是使用后遇到问题,.scss的文件里面有中文注释的时候它会提示Syntax error: Invalid GBK character "\xE5"这样的错误,在网上搜索了一下还是没能解决,您知道有啥解决办法吗?

在linux或者Mac下就不会有问题 比如用codekit和grunt就不会有问题

引用hooboy的发言:

在linux或者Mac下就不会有问题比如用codekit和grunt就不会有问题

或者给每个sass文件加上@charset "utf-8"; 只是在Mac或者Linux上写代码会比较酷~!

引用gigi的发言:

你好,很感谢您的介绍,只是使用后遇到问题,.scss的文件里面有中文注释的时候它会提示Syntax error: Invalid GBK character "\xE5"这样的错误,在网上搜索了一下还是没能解决,您知道有啥解决办法吗?

官方是这样说的:
Compass doesn't expose all of its options through the CLI, which this task makes use of. If you need an option not mentioned below you can either specify a path to a config.rb file in the config option or embed it directly into the raw option. Options defined in your Gruntfile will override those specified in your config.rb or raw property. config and raw are mutually exclusive.

所以这个问题很好解决。
compass: {
options: {
config: './config.rb',
}
}

在config.rb compass的配置文件中加一句:
# set the css file encoding
Encoding.default_external = "utf-8"

即可

 sass --watch app/sass:public/stylesheets 这句我怎么写怎么把错,您能给我解释下这个路径

大家可以装一个idea编辑器很强大的代码编辑工具

照着练习了,感谢。

div {
    hi {
      color:red;
    }
  }

此处代码有误
应为
div {
    h1 {
      color:red;
    }
  }

弱弱的问一下,在页面里引用的还是.css文件吧,那在浏览器里调试的话怎么找到SASS文件

很明显 SASS 比 LESS 更强大,SASS 拥有条件语句,循环语句还可以自定义函数

这SASS看起来,还是非常CSS化呀,呵呵。

请问楼主:我本地安装好了, 然后在cmd 下面 运行了,确实可以转化成正常的css。
但是scss怎么在实际项目中使用呢?难道是自己把scss写好,然后运行好的css再放到网站上去?
还是在网站打开执行过程中生成呢?谢谢!

峰哥:
建议开头加上这一段

sass 有两种语法
sass有两种后缀名文件:
一种后缀名为sass,不使用大括号和分号;
另一种就是我们这里使用的scss文件,这种和我们平时写的css文件格式差不多,使用大括号和分号。
​在此也建议使用后缀名为scss的文件,以避免sass后缀名的严格格式要求报错。
因为百度搜索sass,第一个出现就是这篇。

我开始不知道,所以命名为sass,编译半天也不对。(其实有两种语法)

引用轻扬的发言:

还是喜欢手写css的说。。。。。

对于以设计为主,辅做前端的设计师来说,会css已经很不错了,sass这种编程类的让我等实在两难,还是手写css算了........

3.3嵌套:引用父元素用&,写成了$

是我读书读的少,还是这里真的又需要更正的地方?
没有border-#{$side}-radius 这种属性啊

引用linus 脱袜子的发言:


ERROR:Could not find a valid gem 'sass' (>= 0) in any repository
ERROR:While executing gem ... (Gem::RemoteFetcher::FetchError)
Errno::ETIMEDOUT: A connection attempt failed because the connected party di
d not properly respond after a period of time, or established connection failed
because connected host has failed to respond. - connect(2) (http://rubygems.org/
latest_specs.4.8.gz)

why?

________________________

今天我才学到3年前的技术,真是惭愧,
我也遇到这个问题:
是因为SASS 需要Ruby

当你尝试着安装这些软件的时候,会出现许多你意想不到的错误,不要担心这个。安装任何的软件都不是那么顺心如意,比如经常会得到如下的错误信息:

Could not find a valid gem ‘sass’ (>= 0) in any repository.
Could not find a valid gem ‘compass (>= 0) in any repository.
或者你出现的错误信息与这些都不相同,但不管怎样,当你遇到这些问题时,你的第一反应就是“google”或者“百度”,并且有着尝试修复一下。很糟糕的事又来了,你对那些命令行一无所知,并且又没有现成的教程供你使用,“百度”、“google”又也查找不了有用的信息提供参考。

解决方案有两个:

切换到另一条网络连接,再尝试重新安装一次
如果安装还是不能通过,仍得到相同的错误结果,那么请你移步到《手动安装SASS和Compass样式框架》页面,这里有些好的建议,可能会解决你的问题。

教你如何快速安装SASS和Compass样式框架http://www.ft-love.com/install-sass-compass-step.html
《手动安装SASS和Compass样式框架》 http://www.ft-love.com/sass-compass-install-using.html

以前就想学了,mark。

请教一下:
font-family: 微软雅黑; 这样的中文格式好像不支持,是吗?

3.3里面的h1写成了hi

引用XX的发言:

这类工具毫无意义。能节省时间能更方便快捷?没有!

too young too simple

引用XX的发言:

这类工具毫无意义。能节省时间能更方便快捷?没有!

你如果现在回头来看这个评论,会发现那时的自己有多么无知。

好文要頂

写的很好,学习了!
3.3节中,“可以使用$引用父元素”有误,是使用&

引用ziv的发言:

写的很好,学习了!
3.3节中,“可以使用$引用父元素”有误,是使用&

正解。

Visual Studio 2013 + Web Essentials 2013 非常棒!支持LESS、SASS/SCSS,代码智能提示和css规则的浏览器支持提示,保存即编译,生成对应的*.css、*.css.map和*.min.css并支持文件折叠。
|->*.scss
|-->*.css
|--->*.css.map
|--->*.min.css

@materliu:

出现GBK这种问题只要在scss文件上加
@charset "utf-8"; 就可以了

好文 最近在学这个

引用强哥的发言:

Visual Studio 2013 + Web Essentials 2013 非常棒!支持LESS、SASS/SCSS,代码智能提示和css规则的浏览器支持提示,保存即编译,生成对应的*.css、*.css.map和*.min.css并支持文件折叠。
|->*.scss
|-->*.css
|--->*.css.map
|--->*.min.css

应该是 Visual Studio + Web Workbench

您好,请教一下,怎么让sass文件在sublime里面保存即编译,已经安装了sass文件,sublime里面安装了两个插件,还需要怎么配置,还是说sublime不支持保存即编译呢?

引用phc的发言:

您好,请教一下,怎么让sass文件在sublime里面保存即编译,已经安装了sass文件,sublime里面安装了两个插件,还需要怎么配置,还是说sublime不支持保存即编译呢?

Command+B

我想请问下,关于sass的百度百科上的文章和您的相同,是您的文章还是百度抄袭,您授权了?

阮兄 3.3嵌套里面
 div {
    h1 {
      color:red;
    }
  }

手误了。。。

这个是scss的示例吧?

阮老师你好!
请问在手机上怎么做到手指触摸屏幕时显示滚动条,手指移走后隐藏?

引用依树的发言:

sass 和 less 都很好

但有没有什么好的编辑器配合啊?

sublime配合插件可以的。

引用jujube的发言:

请教一下:
font-family: 微软雅黑; 这样的中文格式好像不支持,是吗?

这个要看你电脑端字库有没有安装微软雅黑这种字体了吧

1、这个??-moz-border-radius-#{$vert}#{$horz}: $radius;

博主写的很好,受用了。对于苦逼的写了很久的css代码的我来说,遇到这个,感觉非常好用,避免重复的代码能够节省大量的时间,对于商业性开发,能提高很高的效率。

看完这篇文章就已经学会了使用sass了,不说精通 入门已经是没有问题了,这么晚才看到这篇文章,不管怎么说,能够学到新的东西本身就是一种进步 ,谢谢老师

复制代码到 http://www.sassmeister.com/ 跟运行结果对比着看会不会好点

我要发表看法

«-必填

«-必填,不公开

«-我信任你,不会填写广告链接