SASS基本语法

文件名

sass有两种后缀名文件：一种后缀名为sass，不使用大括号和分号；另一种就是我们这里使用的scss文件，这种和我们平时写的css文件格式差不多，使用大括号和分号。而本教程中所说的所有sass文件都指后缀名为scss的文件。建议使用后缀名为scss的文件，以避免sass后缀名的严格格式要求报错。

body {  

background: #eee; font-size:12px;

}

p{ 

background: #0982c1;

}

导入

sass的导入(@import)规则和CSS的有所不同，编译时会将@import的scss文件合并进来只生成一个CSS文件。但是如果你在sass文件中导入css文件如@import 'reset.css'，那效果跟普通CSS导入样式文件一样，导入的css文件不会合并到编译后的文件中，而是以@import方式存在。

注释

sass有两种注释方式，一种是标准的css注释方式/* */，另一种则是//双斜杆形式的单行注释，不过这种单行注释不会被转译出来。

变量

sass的变量必须是$开头，后面紧跟变量名，而变量值和变量名之间就需要使用冒号(:)分隔开（就像CSS属性设置一样），如果值后面加上!default则表示默认值。

普通变量：定义之后可以在全局范围内使用。 $fontSize: 12px;

默认变量：sass的默认变量一般是用来设置默认值，然后根据需求来覆盖的，覆盖的方式也很简单，只需要在默认变量之前重新声明下变量即可

特殊变量：我们定义的变量都为属性值，可直接使用，但是如果变量作为属性或在某些特殊情况下等则必须要以#{$variables}形式使用

多值变量：$px: 5px 10px 20px 30px;

Map：$heading: (h1: 2em, h2: 1.5em, h3: 1.2em);

嵌套

sass的嵌套包括两种：一种是选择器的嵌套；另一种是属性的嵌套

选择器嵌套指的是在一个选择器中嵌套另一个选择器来实现继承，从而增强了sass文件的结构性和可读性。

在选择器嵌套中，可以使用&表示父元素选择器

#top_nav{ 

line-height: 40px;  

text-transform: capitalize; 

background-color:#333; 

li{  

float:left;

} 

a{ 

display: block;  

padding: 0 10px;  

color: #fff;  

&:hover{  

color:#ddd;  

} 

}

}

属性嵌套指的是有些属性拥有同一个开始单词，如border-width，border-color都是以border开头。拿个官网的实例看下

.fakeshadow {  

border: { 

style: solid; 

left: {  

width: 4px;  

color: #888;  

}  

right: {  

width: 2px;  

color: #ccc;  

} }}

混合mixin

sass中使用@mixin声明混合，可以传递参数，参数名以$符号开始，多个参数以逗号分开，也可以给参数设置默认值。声明的@mixin通过@include来调用。

不带参：

@mixin center-block { 

margin-left:auto;  

margin-right:auto;

}

.demo{ 

@include center-block;

}

带参：

@mixin opacity($opacity:50) {  

opacity: $opacity / 100;

filter: alpha(opacity=$opacity);

}

多参数mixin：调用时可直接传入值，如@include传入参数的个数小于@mixin定义参数的个数，则按照顺序表示，后面不足的使用默认值，如不足的没有默认值则报错。除此之外还可以选择性的传入参数，使用参数名与值同时传入。

@mixin horizontal-line($border:1px dashed #ccc, $padding:10px){ 

border-bottom:$border; 

padding-top:$padding;  

padding-bottom:$padding; 

}

.imgtext-h li{ 

@include horizontal-line(1px solid #ccc);

}

.imgtext-h--product li{ 

@include horizontal-line($padding:15px);

}

继承

sass中，选择器继承可以让选择器继承另一个选择器的所有样式，并联合声明。使用选择器的继承，要使用关键词@extend，后面紧跟需要继承的选择器。

h1{  

border: 4px solid #ff9aa9;

}

.speaker{ 

@extend h1; 

border-width: 2px;

}

函数

sass定义了很多函数可供使用，当然你也可以自己定义函数，以@fuction开始。sass的官方函数链接为：sass fuction，实际项目中我们使用最多的应该是颜色函数，而颜色函数中又以lighten减淡和darken加深为最，其调用方法为lighten($color,$amount)和darken($color,$amount)，它们的第一个参数都是颜色值，第二个参数都是百分比。

$baseFontSize: 10px !default;

$gray: #ccc !defualt;

@function pxToRem($px) { 

@return $px / $baseFontSize * 1rem;

}

body{  

font-size:$baseFontSize; 

color:lighten($gray,10%);

}

.test{ 

font-size:pxToRem(16px); 

color:darken($gray,10%);

}

运算

sass具有运算的特性，可以对数值型的Value(如：数字、颜色、变量等)进行加减乘除四则运算。请注意运算符前后请留一个空格，不然会出错。

$halfBaseGap: $baseGap / 2 !default;

$samllFontSize: $baseFontSize - 2px !default;

条件判断及循环

@if可一个条件单独使用，也可以和@else结合多条件使用

p { 

@if $type == ocean { 

color: blue; }

@else if $type == matador { 

color: red; }

@else if $type == monster { 

color: green; } 

@else { color: black; }

}

三目判断

语法为：if($condition, $if_true, $if_false) 。三个参数分别表示：条件，条件为真的值，条件为假的值

if(true, 1px, 2px) => 1px

if(false, 1px, 2px) => 2px

for循环

for循环有两种形式，分别为：@for $var from <start> through <end>和@for $var from <start> to <end>。$i表示变量，start表示起始值，end表示结束值，这两个的区别是关键字through表示包括end这个数，而to则不包括end这个数。

@for $i from 1 through 3 { 

.item-#{$i} { 

width: 2em * $i; 

}

}

@each

语法为：@each $var in <list or map>。其中$var表示变量，而list和map表示list类型数据和map类型数据。sass 3.3.0新加入了多字段循环和map数据循环

$animal-list: puma, sea-slug, egret, salamander;

@each $animal in $animal-list {  

.#{$animal}-icon { 

background-image: url('/images/#{$animal}.png'); 

}

}