SASS用法指南 - 阮一峰的网络日志
SASS用法指南
学过的人都知道，它不是一种编程语言。
你可以用它开发网页样式，但是没法用它编程。也就是说，CSS基本上是设计师的工具，不是程序员的工具。在程序员眼里，CSS是一件很麻烦的东西。它没有变量，也没有条件语句，只是一行行单纯的描述，写起来相当费事。
很自然地，有人就开始为CSS加入编程元素，这被叫做（css preprocessor）。它的基本思想是，用一种专门的编程语言，进行网页样式设计，然后再编译成正常的CSS文件。
各种"CSS预处理器"之中，我自己最喜欢，觉得它有很多优点，打算以后都用它来写CSS。下面是我整理的用法总结，供自己开发时参考，相信对其他人也有用。
============================================
SASS用法指南
作者：阮一峰
一、什么是SASS
是一种CSS的开发工具，提供了许多便利的写法，大大节省了设计者的时间，使得CSS的开发，变得简单和可维护。
本文总结了SASS的主要用法。我的目标是，有了这篇文章，日常的一般使用就不需要去看了。
二、安装和使用
SASS是Ruby语言写的，但是两者的语法没有关系。不懂Ruby，照样使用。只是必须先，然后再安装SASS。
假定你已经安装好了Ruby，接着在命令行输入下面的命令：
　　gem install sass
然后，就可以使用了。
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的官方网站，提供了一个。你可以在那里，试运行下面的各种例子。
三、基本用法
SASS允许使用变量，所有变量以$开头。
　　$blue : #1875e7;　
　　　color : $
如果变量需要镶嵌在字符串之中，就必须需要写在#{}之中。
　　$side :
　　.rounded {
　　　　border-#{$side}-radius: 5
3.2 计算功能
SASS允许在代码中使用算式：
　　body {
　　　　margin: (14px/2);
　　　　top: 50px + 100
　　　　right: $var
SASS允许选择器嵌套。比如，下面的CSS代码：
　　div h1 {
　　　　color :
可以写成：
　　　　hi {
　　　　　　color:
属性也可以嵌套，比如border-color属性，可以写成：
　　　　border: {
　　　　　　color:
注意，border后面必须加上冒号。
在嵌套的代码块内，可以使用&引用父元素。比如a:hover伪类，可以写成：
　　　　&:hover { color: #ffb3 }
SASS共有两种注释风格。
标准的CSS注释 /* comment */ ，会保留到编译后的文件。
单行注释 // comment，只保留在SASS源文件中，编译后被省略。
在/*后面加一个感叹号，表示这是"重要注释"。即使是压缩模式编译，也会保留这行注释，通常可以用于声明版权信息。
　　　　重要注释！
四、代码的重用
SASS允许一个选择器，继承另一个选择器。比如，现有class1：
　　.class1 {
　　　　border: 1px solid #
class2要继承class1，就要使用@extend命令：
　　.class2 {
　　　　@extend .class1;
　　　　font-size:120%;
Mixin有点像C语言的宏（macro），是可以重用的代码块。
使用@mixin命令，定义一个代码块。
　　@mixin left {
　　　　float:
　　　　margin-left: 10
使用@include命令，调用这个mixin。
mixin的强大之处，在于可以指定参数和缺省值。
　　@mixin left($value: 10px) {
　　　　float:
　　　　margin-right: $
使用的时候，根据需要加入参数：
　　　　@include left(20px);
下面是一个mixin的实例，用来生成浏览器前缀。
　　@mixin rounded($vert, $horz, $radius: 10px) {
　　　　border-#{$vert}-#{$horz}-radius: $
　　　　-moz-border-radius-#{$vert}#{$horz}: $
　　　　-webkit-border-#{$vert}-#{$horz}-radius: $
使用的时候，可以像下面这样调用：
　　#navbar li { @include rounded(top, left); }
　　#footer { @include rounded(top, left, 5px); }
4.3 颜色函数
SASS提供了一些内置的颜色函数，以便生成系列颜色。
　　lighten(#cc3, 10%)
// #d6d65c
　　darken(#cc3, 10%)
　　grayscale(#cc3) // #808080
　　complement(#cc3) // #33c
4.4 插入文件
@import命令，用来插入外部文件。
　　@import "path/filename.scss";
如果插入的是.css文件，则等同于css的import命令。
　　@import "foo.css";
五、高级用法
5.1 条件语句
@if可以用来判断：
　　　　@if 1 + 1 == 2 { border: 1 }
　　　　@if 5 < 3 { border: 2 }
配套的还有@else命令：
　　@if lightness($color) > 30% {
　　　　background-color: #000;
　　} @else {
　　　　background-color: #
5.2 循环语句
SASS支持for循环：
　　@for $i from 1 to 10 {
　　　　.border-#{$i} {
　　　　　　border: #{$i}
也支持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);
开发者最需要的，就是一个顺手的开发环境。
Github 的一大特色就是 Pull Request 功能（简写为 PR）。
组件是 Web 开发的方向，现在的热点是 JavaScript 组件，但是 HTML 组件未来可能更有希望。
树莓派（Raspberry Pi）是学习计算机知识、架设服务器的好工具，价格低廉，可玩性高。使用 Less & Sass
- UIkit 中文文档
Less & Sass 文件
一个涵盖包括 LESS 和 Sass 在内所有分发文件的独立 UIkit Bower 仓库。
UIkit 的伟大之处在于，你可以很轻松地将它的源文件集成到你的项目中，并能保障在你的自定义工作流能使用你最喜爱的CSS预处理器来构建资源（assets）。
UIkit 使用
包管理器来加载资源（assets）。因此 UIkit 自动生成分发文件到独立的 。它包含所有来自 UIkit 及其组件的 CSS、Less、SCSS 和 Javascript文件。
获取最新的 UIkit 分发文件
: bower install uikit
你会发现 Less 和 Sass 文件都存在，在它们各自独立的文件夹中：
uikit.less
uikit-mixins.scss
uikit.scss
在你的项目中嵌入 Less
使用 Less 是真的直截了当。只需在 Less 文件的顶部引入 UIkit及其 附加组件，然后利用 UIkit 的钩子和覆写 UIkit 变量，就能开始定制了。
@import "uikit/less/uikit.less";
@import "uikit/less/components/autocomplete.less";
// your custom code goes here, e.g. mixins, variables
在你的项目中嵌入 Sass
由于 Sass 解析代码的原因，它需要首先引入 uikit-mixins.scss ，然后添加自定义项（钩子、变量等），最后再加入 UIkit 和附加组件的文件。
@import "uikit/scss/uikit-mixins.scss";
// 此处填入你的代码，比如： mixins, variables
@import "uikit/scss/uikit.scss";
@import "uikit/scss/components/autocomplete.scss";问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
less/sass相对于直接写css有什么优势？好的方面。css
#contextMenu {
#contextMenu ul {
border-radius: 3
text-align:
background: #
color: #666;
#contextMenu ul li:first-child {
border-radius: 3px 3px 0 0;
#contextMenu ul li:last-child {
border-radius: 0 0 3px 3
#contextMenu ul li {
line-height: 20
#contextMenu ul li:hover {
background-color: #eaf8
#contextMenu {
background: #
border-radius: 3
color: #666;
text-align:
line-height: 20
&:first-child {
border-radius: 3px 3px 0 0;
&:last-child {
border-radius: 0 0 3px 3
background-color: #eaf8
了解学习less sass，但实际项目中还是直接写css，如果样式代码可以复用的不是很多的话，但从代码量(行数)来看less/sass并不比css少。
我觉得一点特别好，嵌套书写看上去很清爽，一块内容的样式层级特别清晰。但是使用less/sass对浏览器而言还要多一步解析成css的操作。
你们项目中写样式直接写css还是写less/sass/stylus得多呢，谈谈你们的看法呗？
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
说说我目前用的最多的吧
支持变量定义
支持“模板函数”（自己定义的名称。。。），比如有些CSS需要做兼容前缀的话，你可以这样使用一个模板函数定义一下，调用的时候传入正常值就可以了。会自动生成前缀的CSS
分享到微博？
Hi，欢迎来到 SegmentFault 技术社区！⊙▽⊙ 在这里，你可以提出编程相关的疑惑，关注感兴趣的问题，对认可的回答投赞同票；大家会帮你解决编程的问题，和你探讨技术更新，为你的回答投上赞同票。
明天提醒我
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：输入关键字或相关内容进行搜索
HBuilder支持less、sass文档。
1. 着色：正常使用
2. 代码提示：只能提示其中的css部分，less、sass仅支持对已编写的代码的单词提示
对less、sass文件右键点击编译，即可正常编译
HBuilder还支持预编译器配置，在菜单工具-预编译器配置里，可以自己选配less、sass甚至coffeescript等文件的预编译器，保存即可触发。Less文件配置说明, 其他文件可参照操作：
npm全局安装less:
npm install less -g
hbuilder 菜单&工具&-&&选项&-&&预编译器&, 修改.less 中的命令路径和命令参数, 也可以直接使用&智能完成&.
如果&智能完成&失败, 请在&命令触发地址&中填写less全局安装后的命令文件lessc.cmd (windows) 或 less (mac)文件的路径. 命令参数请参照截图填写,也可自行修改保存路径
按你们的配置完路径和生成名称，但是最后还是无法自动编译，报node不是内部或外部命令
less配置后可以使用！
我按照步骤了依旧无法使用
http://download.csdn.net/download/c_cyoxi/7594863 这是lessc.cmd的下载地址，下载后，按照它的步骤设置就可以进行自动预编译了。
安装node后, 请重启HBuidler。并确认cmd中能执行node -v,
我的报这个错 'node' 不是内部或外部命令，也不是可运行的程序
或批处理文件。 但是右键编译能成功 自动编译不行 就报错
请问一下，我的电脑里没有找到sass.bat？是需要先安装什么吗？
没有代码提示吗
自动补全也没有吗
安装时候注意一下发起人的Less文件配置说明中第一步,全局安装less,之后就不会报错
需要安装node吗？提示/Users/pico/Downloads/mydownload/Hbuilder.app/Contents/less/lessc.cmd: line 1: @%~dp0bin\node.exe: command not found
是要下载node.js才能用自动编译码
下载地址：http://www.csdn.net/tag/lessc
然后解压到C盘根目录 预编译设置器里设置好对应地址就OK
安装JsCompressor插件就可以压缩了，HBuilder有提供安装
自动编译是可以了，怎么压缩它们啊。
啊啊啊啊！终于好了！！激动的哭了快！谢谢你，也谢谢wind~~thankyou very much
这个lessc.cmd就在你的HBuilder目录下面，你搜索一下就看到了。
我去网上下了lessc.cmd，也放进去了。但是按照他的说法，每次生成都会报错。
你能把你的设置也说一下吗？
按wind的做法的确成功了，你再试试？
你说less支持预编译，那么请问能否把设置写一下呢？wind的不靠谱！
笨笨鸟 正解，赞！
1.选择工具--》预编译设置
2. 点击.sass,.scss进入设置
3.（1） 文件名后台不用改（2）触发命令地址填写SASS程序文件路径，像我的电脑填写的是“c:\Ruby22-x64\bin\sass.bat”（3）命令参数根据需要来写，我的是“--no-cache %FileName% %FileBaseName%.css --style compact” 具体的参数可以参考/sassguide/syntax.html
设置less配置:文件写
路径找lessc.cmd，找不到就下载,
命令参数写:%FileName% %FileBaseName%.css
这样以后就可以less文件自动生成css了！
要回复文章请先或当前位置：&&&&&&
前端用LESS的还是SASS的多
这个问题本不想回答，因为没有任何意义，见问得人多了，就说两句。这个问题就好比靓女和丑女的区别，她们不会因为外貌而失去自有的功能。那么Sass和LESS是一样的，只是CSS预处理器中的一种而以。对于国内使用哪一种多的，我想没有做过统计的人是无法回答。前段时间我在weibo上做了一个初略的统计，喜欢LESS的同学多于喜欢Sass的同学。但对于我个人的观点来说：１、LESS环境较Sass简单２、有同学说LESS使用较Sass简单３、相对而言，国内前端团队使用LESS的同学会略多于Sass４、从功能出发，Sass较LESS略强大一些５、Sass在市面上有一些成熟的框架，比如说Compass，而且有很多框架也在使用Sass，比如说Foundation６、就国外讨论的热度来说，Sass绝对优于LESS７、就学习教程来说，Sass的教程要优于LESS。在国内LESS集中的教程是LESS中文官网，而Sass的中文教程，慢慢在国内也较为普遍。最后，你自己使用哪一种，不应该根据国内对哪一种使用的人多来做出发参考，而是哪种更适合自己的团队。
&&上一篇：下一篇：&&
业务咨询：
招聘热线：028-
传真：028-
地址:成都市人民南路四段成科西路三号省计算机应用研究中心B栋一楼
欢迎PR>=5的网站与我们交换友情链接(网站制作、网站建设类网络公司站点，联系QQ：)
(C) 四川方法数码科技有限公司
四川方法创享科技有限公司
成公网备字第[]号
蜀ICP备号 川B2-
川公网安备 25号