关于sass那些事，sass用法。

SASS是一种CSS预处理器依赖ruby。SASS扩展了CSS，添加了新的规则、变量、混入、选择器和继承等特性。

在使用SASS之前首先要安装ruby服务器：http://www.rubyinstaller.org/。 安装好ruby后，打开Start Command Prompt with Ruby，键入gem install sass 安装SASS。之后输入：sass –v 就可以查看SASS的版本。

SASS的CSS扩展规则

嵌套规则

SASS允许CSS样式嵌套进另一个CSS样式中。内部的规则仅仅用在外部的选择器内。例

SASS

#mainbody { color: #00ffff; width: 100%; .content{  color: #000000; }}// 转换CSS样式如下：#mainbody { color: #00ffff; width: 100%;}#mainbody .content { color: #000000;}

引用父选择器

比起默认的，它通常对使用嵌套样式的父选择器更有用。例如，你也许想要一些特殊的样式，当选择器是hover状态时或者当body元素有一个确定的类。这种情况下，你可以明确地看出哪个一父标签应该被&字符代替。例如：

a { font-size: 12px; color: #FFFFFF; &:hover{color: #00ffff} body .mainbody & {font-weight: bold}}/*转换为CSS 如下*/a { font-size: 12px; color: #FFFFFF;}a:hover { color: #00ffff;}body .mainbody a { font-weight: bold;}

嵌套属性

在命名空间中，CSS有非常少的属性；例如，font-family、font-size和font-weigth都在font命名空间内。在CSS中，如果你想去在同一个命名空间内设置多个属性，你必须去一个一个把它们列出来。SASS为这个提供了一个快捷的方法：仅写一次命名空间，然后在它的内部嵌套进每一个下级属性。例如

.funky { font: {  family: fantasy;  size: 30em;  weight: bold; }}/*转译为CSS如下*/.funky { font-family: fantasy; font-size: 30em; font-weight: bold;}

SassScript

除了简单的CSS属性语句，SASS提供了一些被称作SassScript的小扩展。SassScript允许属性去使用变量、计算和额外的方法。SassScript可以被用在任何属性值中。

SassScript也可以被用于生成选择器和属性名字，使用的时候需要写入mixins。这将会被允许插入。

变量：$

Sass中最易懂的方法是使用变量。变量使用$作为开始，并且设置像CSS属性：

$width: 5em;

之后你可以把它们用到属性中：

#main { width: $width;}

变量只被允许用在它们被定义的嵌套选择器中。如果它们被定义到任何选择器的外部，它们被允许用在任何地方。

数据类型

SassScript支持六个主要的数据类型：

numbers(13, 10px)

文本字符和没有引号的文本字符(“foo”, ‘bar’, baz)

颜色(blue, #ffffff, rgba(255, 0, 0, 0.5))

布尔值(true, false)

空(null)

数值列表，通过逗号或空格分开(1.5em 1em 0 1em, Helvetica, Arial, sans-serif)

映射键值对(key1: value1, key2, value2)

SassScript也支持其他所有类型的CSS属性值，例如Unicade和!important声明。但是，它没有对这些值进行特殊操作。它们仅仅是被当做引用结束的字符串来对待。

字符串

CSS指定了两种字符串：用引号引用，例如”jia”, ’http://peerless.wang’，另外的没有引号的例如：sans-serif 或者 bold。SassScript对这两种类型都可以识别，并且通常如果其中一种类型的字符串被用在Sass文档中，这一种字符串将会被输出到CSS结果中。

下面是一个列外，但是：当使用#{}插入，被引用的字符串不会被引用。这使得它更简单的去使用例子中的选择器在混合指令中。例如

@mixin firefox-message($selector) {  body.firefox #{$selector}:before {  content: "Hi, Firefox users!"; }}@include firefox-message(".header");/*转换为CSS如下*/body.firefox .header:before { content: "Hi, Firefox users!";}

列表

列表是Sass怎样来表示像margin这样的CSS声明值：10px 15px 0 0 或者font-face: Helvetica, Arial, sans-serif。列表仅是一系列的值，通过空格或逗号隔开。事实上，单独的数值计算也是列表，它们的列表仅有一个值。

另外，列表的用处不是很大，但是SassScript列表方法使它们变得更有用。nth 方法可以使多项变成列表，join方法可以把多个列表整合一起，append方法可以添加项目到列表中。@each指令可以为列表中的每一项添加样式。

除了包含简单的值外，列表也可以包含其他列表。例如，1px 2px, 5px 6px 是一个两项目的列表，它包含列表1px 2px和列表5px 6px。如果内部的列表和列表使用同样的分隔符，你需要去在列表的开始和结束的位置使用圆括号去使它们更明显。例如(1px 2px ) (5px 6px)也是两项列表包含列表1px 2px 和5px 6px。 不同处在于外部使用空格分开，之前是使用逗号分开。

当列表是被填入的是简单的CSS，Sass不会添加圆括号，尽管Sass不能明白它们。意思是(1px, 2px) (5px 6px)和 1px 2px 5px 6px当它们被转换成CSS时将看起来一样。但是，当它们在Sass中时，它们是不一样的：第一个列表包含两个列表，而第二个列表包含4个数字。

列表里面也可以什么都没有。这些列表被表现为()（这也是一个空的映射键值对）。它们不可以被直接输出为CSS；如果你试图这么做，例如font-family()，Sass将会抛出一个错误。如果一个列表包含空列表或者空值，例如 1px 2px () 3px或者1px 2px null 3px，空列表和空值在被转换成CSS之前将会被移除。

逗号间隔的列表也许会有一个拖尾的逗号。这个特别有用因为它允许你去声明一个单元素列表。例如，(1,)是一个包含1列表，(1 2 3,)是一个逗号间隔列表其中包含一个空格间隔的列表，这个空格间隔的列表包含1,2,和3。

映射

映射表示的是一个键和值之间的联合，通过键去查询值。在命名组中它们使得更容易去收集值并且允许动态的组。它们不能被直接翻译成CSS，尽管它们的语法结构与media query语句类似：

$map: (key1: value1, key2: value2, key3: value3);

与列表不同，映射的外面必须总是有圆括号并且总是要以逗号分隔。映射中的键和值都可以是任何SassScript对象。一个映射也许仅有一个值对应一个给定的键（尽管值可能是列表）。一个给定的值也许可以被分配到许多键。

像列表一样，映射更多的操作是使用SassScript函数。map-get函数在映射中查询值，map-merge函数添加值到一个映射。@each指令可以被用于添加样式为每一个值或键映射配对。

映射可以被应用到任何列表中。当被一个list函数使用时，映射会被当做对的列表来对待。例如，(key1: value1, key2: value2)通过list函数将被当做一个嵌套列表key1 value1, key2 value2。列表不能被当做映射，但是，空列表除外。()将被描述为一个没有键和值的空映射和一个没有元素的列表。

映射不能被转换为简单的CSS。在CSS函数中使用其中一个作为变量的值或者一个参数，会抛出错误。

运算

所有类型都支持等式运算(==和!=)。另外，每一个类型都有为它们自己特殊需求的自己的运算。

数值运算

SassScript数值的标准运算计算(加法+、减法-、乘法*、除法/、整除%)，如果它们可以计算，在单元中它们将自动进行。例

p { width: 1in + 8pt;}/*转换为CSS为*/p { width: 1.11111in;}

比较运算（<、>、<=、>=）对于数字也都是被支持的，并且等式运算对所有类型都支持。

除法/

CSS允许/符号出现在属性值中作为一种分隔数字的方法。因为SassScript是一种CSS属性语句的扩展，它必须支持这个，因此也允许/被用作分隔符。意思是默认情况下，如果在SassScript中两个数字通过/进行分隔，之后它们将会作为结果出现在CSS中。

但是，在/作为分隔符时将会被划分为三种情况。这些划分在实际使用中，将会覆盖大部分的实例。它们是：

如果这个值或者它中的一部分，是被存储在变量中或者被一个方法返回。

如果这个值被圆括号包围。

如果这个值被用于另一个运算语句的一部分。

例如

p { font: 10px/8px;       // 简单的CSS，没有做除法运算 $width: 1000px; width: $width/2;      // 使用变量，做除法运算 width: round(1.5)/2;    // 使用函数，做除法运算 height: (500px/2);     // 使用圆括号，做除法运算 margin-left: 5px + 8px/2px; // 使用加号, 做除法运算}// 转换为CSS：p { font: 10px/8px; width: 500px; width: 1; height: 250px; margin-left: 9px;}// 如果你想把简单的CSS/和变量一起使用，你可以使用#{}去插入它们。例如p { $font-size: 12px; $line-height: 30px; font: #{$font-size}/#{$line-height};}// 转换成CSS：p { font: 12px/30px;}

字符串运算

+运算可以被用于连接字符串

p { cursor: e + -resize;}// 转换为CSSp { cursor: e-resize;}

注意，如果是一个引号字符串和一个没有引号的字符串相加（有引号的字符串在左边），结果是一个有引号的字符串。同样的，如果一个没引号的字符串和一个有引号的字符串相加（没有引号的字符串在左边），结果将是没有引号的。例如

p:before { content: "Foo " + Bar; font-family: sans- + "serif";}// 转义为CSS为：p:before { content: "Foo Bar"; font-family: sans-serif;}// 默认的，如果两个值是紧挨着的，它们被看做是一个值。p { margin: 3px + 4px auto;}// 转换为CSS：p { margin: 7px auto;}// 在字符串文本中，通过#{}样式可以添加动态值给字符串p:before { content: "I ate #{5 + 10} pies!";}// 转换为CSSp:before { content: "I ate 15 pies!";}// 空值将被当做空字符串来对待并插入字符串中。$value: null;p:before { content: "I ate #{$value} pies!";}// 转换为CSS：p:before { content: "I ate pies!";}

布尔运算

SassScript支持对布尔值进行与，或，非运算

列表运算

列表没有任何特殊的运算，相对的它们的操作时通过列表方法进行的。

圆括号

圆括号可以影响运算顺序

p { width: 1em + (2em * 3);}// 转换为CSS：p { width: 7em;}

函数

SassScript定义了一些实用的函数，它们被调用通过正常CSS函数语句。

p { color: hsl(0, 100%, 50%);}// 转换为CSS：p { color: red;}

关键字参数

Sass函数也可以被调用通过明确的关键字参数。上面的例子也可以被写为：

p { color: hsl($hue: 0, $saturation: 100%, $lightness: 50%);}

当然这样不太简洁，但它可以使样式单更易读。它也允许函数去呈现更多的灵活的接口，提供很多参数，但是调用起来不会困难。

参数的命名可以以任何顺序，并且默认的参数值可以被省略。因为被命名的参数是变量名，下划线和破折号可以互换使用。

参数

Mixin可以获取SassScript参数值作为参数，但Mixin被引入并且在mixin内生成可用的变量的时候参数会被给出来。

在定义一个Mixin的时候，参数会被以变量的形式写出，并以逗号分隔，并且放在名字后面的圆括号内。之后在Mixin被引入的时候，值会以同样的方式被传入。例如

@mixin sexy-border($color, $width) { border: {  color: $color;  width: $width;  style: dashed; }} p { @include sexy-border(blue, 1in); }// 转换为CSSp { border-color: blue; border-width: 1in; border-style: dashed;}

Mixin也可以使用常规的设置变量语句为参数设置默认值。如果Mixin被引入的时候，没有传入参数，默认值就会替代参数值。例如

@mixin sexy-border($color, $width: 1in) { border: {  color: $color;  width: $width;  style: dashed; }}p { @include sexy-border(blue); }h1 { @include sexy-border(blue, 2in); }// 转换为CSS为p { border-color: blue; border-width: 1in; border-style: dashed;}h1 { border-color: blue; border-width: 2in; border-style: dashed;}

函数命令

在Sass中允许去定义你自己的函数并且可以使用在任何脚本环境或值中。例如

$grid-width: 40px;$gutter-width: 10px;@function grid-width($n) { @return $n * $grid-width + ($n - 1) * $gutter-width;}#sidebar { width: grid-width(5); }转换为CSS#sidebar { width: 240px;}

就像你看到的，函数可以使用任何定义的全局变量，并且允许像Mixin类似的参数。一个函数中可能有许多语句，并且你必须去调用@return去返回函数值。

就像Mixin，在调用方法的时候也可以使用关键字参数。上面的函数调用也可以写成这样。

#sidebar { width: grid-width($n: 5); }

建议在函数命名的时候使用前缀以避免函数名冲突并且让维护人员知道它不是CSS或Sass的一部分。例如，如果你为ACME Corp工作，你可以命名你的函数为-acme-grid-width。

就像Mixin一样，函数也允许使用变量参数。

样式输出

尽管Sass默认输出的CSS样式看起来还不错并且反应出了文档结构，Sass为不同的品味和需求也提供了一些其他的样式。

Sass允许通过设置:style option或使用—style命令去选择4种不同的输出样式。

:nested(嵌套)

嵌套样式时Sass默认的输出样式，因为它反映了CSS样式结构和它们渲染HTML文档的结构。每一个属性独占一行，但是缩进并不是一定的。每一个规则的缩进取决于它的嵌套深度。例如

#main { color: #fff; }#main p { width: 10em; }.huge { font-size: 10em; font-weight: bold; text-decoration: underline; }

在阅读较大的CSS文件时嵌套样式是非常好的：它让你可以很快的掌握文件的结构而需要真正的去阅读。

:expended(展开)

展开样式是一个更典型的人为CSS样式，每一个属性和规则占一行。规则内的属性会进行缩进，但规则不会有任何特殊的缩进。例如

#main { color: #fff;}#main p { width: 10em;}.huge { font-size: 10em; font-weight: bold; text-decoration: underline;}

:compact(紧凑)

紧凑样式要比嵌套或展开样式占用的空间小。它更关注于抽取选择器而不是属性。每一个CSS规则占用一行，每一个属性都在这一行中。嵌套的规则会放在下面一行不会有新行，使用新行来分隔各个规则。例如

#main {   color: #fff;   background-color: #000; }#main p {  width: 10em; }.huge {   font-size: 10em;  font-weight: bold;  text-decoration: underline; }

:compressed(压缩)

压缩样式要尽可能的占用最小的空间，在分隔选择器的时候不会有任何空格，在文件的末尾会有新行。它还包含一些其他的压缩方式，例如使用最小的表现形式来现实颜色。但是这样不适合人为阅读。例如

#main{  color:#fff;  font-weight:bold;  text-decoration:underline}

Sass扩展

Sass为一些有特殊需求的用户提供了一些高级自定义。要想使用这些特性，就得了解Ruby。

定义自定义Sass函数

用户可以通过使用RubyAPI去定义他们自己的Sass方法。更多信息，请看source documentation。

缓存存储

Sass会缓存文档，因此它们可以被重复使用，而不需要去解析，除非文档被更新了。默认的，Sass会通过指明:cache_location去把文件缓存到文件系统中的一个位置。如果你不可以操作文件系统或不需要去通过Ruby进程或机器去分享这些缓存，你可以通过设置:cache_store option去定义你自己的缓存器。要想知道更多关于缓存器的知识，可以去看source documentation。

自定义入口

Sass的入口是通过@import中的路径去找到适当的Sass代码。默认的，这些代码是从文件系统中加载的，但是入口也可以被添加为加载数据库、HTTP或者使用不同于Sass预期的命名方案。

每一个入口有一个单独的加载路径（或者对于后端是相同概念的），入口可以被放置在:load_paths array旁的普通文件系统路径。

当在解析一个@import时，Sass通过加载路径去查询一个成功引入路径的入口。当一个被发现时，这个被引入的文件会被使用。

用户定义的入口必须继承自SASS:Importers::Base。

推荐web前端群：群名称：html5/css3/js/jq/nodejs/div  群号：339840649   欢迎加入  一起交流~

原标题：关于sass那些事，sass用法。

关键词：