首页 > 代码库 > 学习Sass（二）
学习Sass（二）
前面简单介绍了sass的安装，特点和使用方法等，这里记录下sass的基本语法。
一、变量
变量以$开始，像css属性那样赋值，如：
1 $color: #ccc;2 div {3 color: $color;4 }若变量定义在的选择器内，则仅在嵌套层级的范围内可用（可理解为块级作用域）。不在任何选择器内定义的变量则在任何地方可用（可理解为全局变量）。
1 $color: #ccc; /*全局范围内可用*/2 div {3 $width: 200px; /*仅在定义的选择器内可用*/4 width: $width;5 color: $color;6 }7 p {8 color: $color;9 }若在选择器内定义的变量后面加上！global标志，则可“升级”为“全局变量”，在任何地方可用。
1 $color: #ccc; /*全局范围内可用*/ 2 div { 3 $width: 200px; /*仅在定义的选择器内可用*/ 4 width: $width; 5 color: $color; 6 $height: 100px !global;/*全局范围内可用*/ 7 } 8 p { 9 color: $color;10 height: $height;11 }字符串类型变量，有两种类型：带引号（包括单、双引号）和不使用引号。css文件会保留其字符串形式。特殊情况：在字符串中使用#{}引用字符串变量时会去掉引号，这样主要是为了便于使用，比如mixins中的选择器名称。例如：。
1 $name: "peter";2 $job: ‘programmer‘;3 $weight: bold;4 5 body.chrome{6 content:"Hi #{$name},chrome users!My job is #{$job}";7 //也可写成如下形式content:"Hi "+ $name+",chrome users!The job is "+$job; 8 font-weight:$weight;9 }
编译为：
1 body.chrome {2 content: "Hi peter,chrome users!My job is programmer";3 font-weight: bold; 4 }变量值后面加！default，当变量被赋予其他值时引用新值，没有就使用默认的值，换句话说就是个“备胎”啊！
$content: "First content";$content: "Second content?" !default;$new_content: "First time reference" !default;#main { content: $content; /* 引用新值 */}#main:after{ content: $new_content; /* 引用默认值 */}编译为：#main { content: "First content"; }#main:after { content: "First time reference"; }
注：变量中的连字符下划线_和划线-可以互换的，如定义了$body_height，可以使用$body-height访问。
二、运算
SassScript 支持对数字标准的算术运算（加法+，减法 - ，乘法*，除法/和取模%）。数字支持关系运算符(<, >, <=, >=)，并且所有类型支持相等运算符(==, !=)。这里介绍常用的除法和加法。
2.1 除法
原生CSS允许‘/‘ 出现在属性值之间作为分隔数字的方式，sass是CSS属性语法的扩展，所以也必须支持这一点。那么‘/’何时被作为除法预算符呢？
如果该值，或值的任何部分，存储在一个变量中或通过函数返回。
如果该值被括号括起来，作为列表的外部括号除外。
- 如果该值被用作算数表达式的一部分。
例如：
1 p { 2 font: 10px/8px; // 原生的CSS，不作为除法 3 $width: 1000px; 4 width: $width/2; // 使用了变量, 作为除法 5 width: round(1.5)/2; // 使用了函数, 作为除法 6 height: (500px/2); // 使用了括号, 作为除法 7 margin-left: 5px + 8px/2px; // 使用了 +, 作为除法 8 font: (italic bold 10px/8px); // 在一个列表（list）中，括号可以被忽略。 9 }10 11 编译为：12 p {13 font: 10px/8px;14 width: 500px;15 width: 1;16 height: 250px;17 margin-left: 9px;18 font: italic bold 10px/8px; 19 }2.2 加法
加法可用于连接字符串
p { cursor: e + -resize;}
编译为：p { cursor: e-resize; }用作运算表达式
1 p {2 margin: 3px + 4px auto;3 }4 5 编译为：6 p {7 margin: 7px auto;8 }三、嵌套
sass允许选择器嵌套
1 div { 2 h1 { 3 color: red; 4 } 5 } 6 7 编译为： 8 div h1 { 9 color: red;10 }
属性嵌套
div { border: { width: 1px; color: #ccc; style: solid; }}编译为：div { border-width: 1px; border-color: #ccc; border-style: solid; }注意：border必须加上后面的冒号。
在嵌套的代码块内，使用&引用父元素。
1 a { 2 color: #000; 3 &:hover{ 4 color: blue; 5 } 6 } 7 8 编译为： 9 a {10 color: #000;11 }12 a:hover {13 color: blue;14 }如果没有父选择器，&的值将是空。这意味着你可以在一个mixin中使用它来检测父选择是否存在：
1 @mixin does-parent-exist { 2 @if & { 3 &:hover { 4 color: red; 5 } 6 } @else { 7 a { 8 color: red; 9 }10 }11 }
四、代码复用
4.1 @import
@import可以导入css文件也可导入sass文件。通常，@import会寻找 Sass 文件并将其导入，但在以下情况下，@import 仅作为普通的 CSS 语句，不会导入任何 Sass 文件。
- 如果文件的扩展名是
.css。 - 如果文件名以
http://开始。 - 如果文件名是
url()。 - 如果
@import中包含任何的媒体查询（media queries）。
1 //以下代码导入的是css文件2 @import "foo.css";3 @import "foo" screen;4 @import "http://foo.com/bar";5 @import url(foo);@import可同时导入多个文件
1 @import “reset.css”, "style";@import导入的css文件在编译后不会被合并，但sass会被编译合并到css文件中。如果你有一个 SCSS 或 Sass 文件要导入，但不希望将其编译到一个CSS文件中，你可以在文件名的开头添加一个下划线，告诉Sass不要将其编译到一个正常的CSS文件中。但注意，在导入语句中不要添加下划线。例如：要导入的文件为"_main.scss"，导入语句要写成：@import "main.scss";。另外注意，请不要将带下划线与不带下划线的同名文件放置在同一个目录下，因为带下划线的文件将会被忽略。
4.2 @extend
sass允许一个选择器继承另一选择器的样式，这也是工作中常遇到的需求。例如现在有class1
.class1 { border: 1px solid #ccc; background-color: #fff;}
class2要继承class1的样式，可以使用@extend
1 .class1 { 2 border: 1px solid #ccc; 3 background-color: #fff; 4 } 5 .class2 { 6 @extend .class1; 7 font-size: 16px; 8 } 9 10 编译为：11 .class1, .class2 {12 border: 1px solid #ccc;13 background-color: #fff;14 }15 16 .class2 {17 font-size: 16px;18 }4.3 @mixin
混入(mixin)允许您定义可以在整个样式表中重复使用的样式，而避免了使用无语意的选择器。通过@mixin 加名称 就可以定义一个Mixins模块，在模块内你可以添加任何你想重复使用的样式。
@mixin btn { height: 40px; padding: 5px 10px; text-decoration: none;}.btn-block{ @include btn; display: block;}编译为：.btn-block { height: 40px; padding: 5px 10px; text-decoration: none; display: block;}
@mixin也可以包含在任何规则的外部（即，在文档的根），但注意不能被其他父选择器引用。
1 @mixin silly-links { 2 a { 3 color: blue; 4 background-color: red; 5 } 6 } 7 8 @include silly-links; 9 /*以下p选择器会报错*/10 p{11 font-size: 14px;12 @include still-links;13 } 14 15 编译为：16 a {17 color: blue;18 background-color: red;19 }
@mixin另一个重要用处是可以指定参数和缺省值。
@mixin left($value: 10px) { float: left; margin-left: $value;}div { @include left(20px);}编译为：div { float: left; margin-left: 20px;}
利用混入，生成浏览器前缀的实例：
1 @mixin rounded($vert, $horz,$radius: 10px){ 2 border-#{$vert}-#{$horx}-radius: $radius; 3 -moz-border-#{$vert}-#{$horx}radius: $radius; 4 -webkit- border-#{$vert}-#{$horx}-radius: $radius; 5 } 6 #navbar li { @include rounded(top, left); } 7 8 编译为： 9 #navbar li {10 border-top-left-radius: 10px;11 -moz-border-radius-topleft: 10px;12 -webkit-border-top-left-radius: 10px;13 }
五、高级语法
sass支持基本的控制语句和表达式。
5.1 @if...@else
$type: monster; p { @if $type == ocean { color: blue; } @else if $type == matador { color: red; } @else if $type == monster { color: green; } @else { color: black; } }编译为：p { color: green;}
5.2 @for语句
该指令有两种形式：@for $var from <start> through <end> 和 @for $var from <start> to <end>。
@for $var from <start> through <end>：范围包括<start>和<end>的值。
@for $var from <start> to <end>：从<start>开始运行，但不包括<end>的值。
当<start>比<end>大的时候，计数器将递减，而不是增量。$var可以是任何变量名，比如$i。
@for $i from 1 through 3 { .item-#{$i} { border: #{$i}px solid #ccc; } } @for $i from 3 to 1 { .list-#{$i} { border: #{$i}px solid #ccc; } }编译为：.item-1 { border: 1px solid #ccc;}.item-2 { border: 2px solid #ccc;}.item-3 { border: 3px solid #ccc;}.list-3 { border: 3px solid #ccc;}.list-2 { border: 2px solid #ccc;}
5.3 @while语句
1 $i:6; 2 @while $i > 0{ 3 .item-#{$i} { 4 width: #{$i}em; 5 } 6 $i: $i - 2; 7 } 8 9 编译为:10 .item-6 {11 width: 6em;12 }13 14 .item-4 {15 width: 4em;16 }17 18 .item-2 {19 width: 2em;20 }
5.4 @each
@each指令通常格式是@each $var in <list or map>。$var 可以是任何变量名，<list or map>是一个返回列表或map 的 SassScript 表达式。
1 @each $animal in puma, sea-slug, egret, salamander { 2 .#{$animal}-icon { 3 background-image: url(‘/images/#{$animal}.png‘); 4 } 5 } 6 7 编译为： 8 .puma-icon { 9 background-image: url("/images/puma.png");10 }11 12 .sea-slug-icon {13 background-image: url("/images/sea-slug.png");14 }15 16 .egret-icon {17 background-image: url("/images/egret.png");18 }19 20 .salamander-icon {21 background-image: url("/images/salamander.png");22 }
还可以多重赋值
1 @each $animal, $color, $cursor in (puma, black, default),(sea-slug, blue, pointer),(egret, white, move) { 2 .#{$animal}-icon { 3 background-image: url(‘/images/#{$animal}.png‘); 4 border: 2px solid $color; 5 cursor: $cursor; 6 } 7 } 8 9 编译为：10 .puma-icon {11 background-image: url("/images/puma.png");12 border: 2px solid black;13 cursor: default;14 }15 16 .sea-slug-icon {17 background-image: url("/images/sea-slug.png");18 border: 2px solid blue;19 cursor: pointer;20 }21 22 .egret-icon {23 background-image: url("/images/egret.png");24 border: 2px solid white;25 cursor: move;26 }
@each 用在maps键值对中。注意maps用圆括号括起来，而不是大括号。
1 @each $key, $value in (h1:6em, h2:4em, h3:2em){ 2 #{$key}{ 3 height: $value; 4 } 5 } 6 7 编译为： 8 h1 { 9 height: 6em;10 }11 12 h2 {13 height: 4em;14 }15 16 h3 {17 height: 2em;18 }
六、自定义函数
学习Sass（二）