SASS用法指南(转)

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

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

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

各类"CSS预处理器"之中,我本身最喜欢SASS,以为它有不少优势,打算之后都用它来写CSS。下面是我整理的用法总结,供本身开发时参考,相信对其余人也有用。前端

============================================java

SASS用法指南node

做者:阮一峰python

1、什么是SASSlinux

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

本文总结了SASS的主要用法。个人目标是,有了这篇文章,平常的通常使用就不须要去看官方文档了。程序员

2、安装和使用

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、基本用法

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、代码的重用

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、高级用法

5.1 条件语句

@if能够用来判断:

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

配套的还有@else命令:

  @if lightness($color) > 30% {
    
  } @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);
  }

(完)

留言(69条)

不懂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"

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

 

感受有点鸡肋,如今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算了........
相关文章
相关标签/搜索