SASS用法指南 - 阮一峰的网络日志

相关文章推荐

大鼻子的小马驹 · 埃及航空990-哔哩哔哩_Bilibili· 3 月前 ·

不羁的苦瓜 · Úvodem | laboroatelier.cz· 5 月前 ·

风流倜傥的乒乓球 · MonthCalendar 控件概述 - ...· 8 月前 ·

侠义非凡的菠菜 · 卢布鲁克_百度百科· 1 年前 ·

完美的苦瓜 · Pcap_loop函数-CSDN博客· 1 年前 ·

很自然地，有人就开始为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 {
color:red;

属性也可以嵌套，比如border-color属性，可以写成：

border: {
color: red;

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

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

&: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可以用来判断：

@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);

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

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

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

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 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)

全部试了一遍，发现@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
我建立了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文件是不是没修改过默认编译是只编译修改的文件

官方是这样说的：
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"

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

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

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

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)

________________________

今天我才学到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

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

我尝试在sublime text 3里面写sass，装了ruby和一系列plugins，也在第一行写了@charset "utf-8"; 但还是报错：
/usr/local/lib/ruby/gems/2.3.0/gems/sass-3.4.22/lib/sass/error.rb:149:in `sass_backtrace_str': incompatible character encodings: UTF-8 and ASCII-8BIT (Encoding::CompatibilityError)

这个到底应该怎么解决啊？没用过ruby不懂要怎么fix，求大神赐教！

也在engine.rb加了那句utf-8,但就是用watch就报这个错

While executing gem ... (Gem::DependencyError)
Unable to resolve dependencies: sass requires sass-listen (~> 4.0.0)

Mac的一直报这个错误,gem install compass是可以的但是用gem install sass就开始报这个错误