sass基本语法
sass是一种基于ruby语言开发的CSS预处理器。它可以使用变量，嵌套，混入，继承，运算，函数等编程语言具有的特性进行CSS的开发，使得CSS的开发变得简单粗暴清晰可维护。
sass有两种后缀文件格式：一种是sass后缀形式；一种是scss后缀形式。我选择的后缀是scss
注释
sass有两种注释方式：一种是"/* */"，标准的CSS注释；还有一种是双斜杠形式"//"。
前者在编译之后会作为注释在CSS文件中出现，但是后者不会。
变量(variable)
sass可以像编程一样编写CSS。在sass中可以声明变量，并在整个样式表中调用，是不是很酷？你可以在文件的任意位置声明变量，但是必须先声明才能使用。
变量的声明必须是$开头，后面接着变量名，（就像php一样），而变量名和变量值之间则用：连接（就像写CSS一样）。在值的后面加上!default表示默认值。如果变量需要镶嵌在字符串之中，就必须需要写在#{}之中。
//单行注释，不会被编译在CSS文件上
/*基本样式定义*/
//这里是声明变量
$globalFontSize:1em;
$headerH1:1.5em;
$bodyBgRed:red;
$textColor:#343 !default;//默认值
$SIZE:size;
//这里调用变量，先声明才能调用
body{
font-#{$SIZE}:$globalFontSize;
background:$bodyBgRed;
color:$textColor;
}
------------
//编译后得到的CSS
/*基本样式定义*/
body {
font-size: 1em;
background: red;
color: #334433;
}
也可以在写CSS部分的时候重新定义属性值，这样我们就不用修改引用的文件，只要重新定义需要修改的变量就可以了。
//这里重新定义属性值
body{
font-size:$globalFontSize;
background:$bodyBgRed;
color:#999;//重新定义了color的值
}
------------
//编译后得到的CSS
body {
font-size: 1em;
background: red;
color: #999;
}
一个变量也可以设置多个值，通过nth($variables,index)来调用其中的值,其中index从1开始，不是0。
//声明变量
$textColor:#343434 #f00 #fff #456 !default;
//调用
body{
color:nth($textColor,1);//选择了$textColor的第一个值#343434
}
a{
color:nth($textColor,2);//选择了$textColor的第二个值#f00
}
p{
color:$textColor;
}
----------
//编译后得到的CSS
body {
color: #343434;
}
a {
color: red;
}
p {
color: #343434 red white #445566;
}
//**p部分编译之后color的属性值包括了$textColor所有的值；**
//color:#343434 #f00 #fff #456;
嵌套(nesting)
sass分两种嵌套：一种是选择器嵌套；一种是属性嵌套。
选择器嵌套
通过在一个选择器中嵌套另一个选择器实现继承。在嵌套过程中。可以用&表示父元素选择器。
//sass
$float:left right;
$navBg:#345;
.nav{
padding:10px;
width:960px;
background:$navBg;
li{
float:nth($float,1);
}
a{
display:block;
padding:5px 10px;
color:#fff;
&{
/*写在a的内部第一层*/
font-size:30px;
}
}
&{
/*写在a的外部，.nav的内部第一层*/
font-size:30px;
}
}
--------
//编译后的CSS
.nav {
padding: 10px;
width: 960px;
background: #334455;
}
.nav li {
float: left;
}
.nav a {
display: block;
padding: 5px 10px;
color: #fff;
}
.nav a {
/*写在a的内部第一层*/
font-size: 30px;
}
.nav {
/*写在a的外部，.nav的内部第一层*/
font-size: 30px;
}
属性嵌套
有些CSS属性有相同的单词开头，如background，可以利用属性嵌套来编写。
//sass
body{
background:{
color:#343;
image:url(../images/bg.png);
repeat:repeat;
position:left top;
attachment:scroll;
clip:content-box;
size:50%;
}
}
-------
//编译后的CSS
body {
background-color: #343;
background-image: url(../images/bg.png);
background-repeat: repeat;
background-position: left top;
background-attachment: scroll;
background-clip: content-box;
background-size: 50%;
}
混合(mixin)
估计mixin可以算是sass中最强大的特性，利用mixin可以将一部分CSS从代码中抽出，定义成一个模块重复使用。可以在公用的样式中定义一个mixin模块，需要的时候直接调用就好了。同时，mixin还可以传递参数，尼玛越来越向编程了……
声明一个mixin模块
使用@mixin声明一个mixin，后面紧接着mixin的名，可以传递参数，同时给参数设定一个默认值。 但是要注意，参数也是要用\(开始，而且参数名和参数值是用**冒号**分开。如果一个属性有多个值，比如box-shadow等，那参数就用变量名加上三个点表示" **\)variable...** " 。
//声明一个mixin模块
//boxRect
@mixin boxRect($W:20px,$H:20px){
width:$W;
height:$H;
}
//box-shadow
@mixin shadow($shadow...){
-webkit-box-shadow:$shadow;
-moz-box-shadow:$shadow;
-o-box-shadow:$shadow;
box-shadow:$shadow;
}
上述代码简单的声明了两个mixin模块。
调用声明的mixin模块
用@include调用已经声明的模块。
在@include之后紧接着mixin模块名，就像调用函数一样（尼玛简直就是在编程啊），如果模块有默认参数。模块后面的括号可以省略。
//sass
.boxRect400{
@include boxRect();//不加参数，使用默认参数，可以省略括号,也可以留着
}
.boxRect200{
/*调用了boxRect模块*/
@include boxRect(20px,10px);
}
.shadow{
/*调用了shadow模块*/
@include shadow(0 1px 1px rgba(0,0,0,0.5));
}
.nav{
@include boxRect(10px,10px);
@include shadow(0 1px 1px rgba(0,0,0,0.5));
&:hover{
@include shadow(0 2px 3px rgba(0,0,0,0.7));
}
}
-------
//编译后的CSS
.boxRect400 {
width: 20px;
height: 20px;
}
.boxRect200 {
/*调用了boxRect模块*/
width: 20px;
height: 10px;
}
.shadow {
/*调用了shadow模块*/
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
-o-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
}
.nav {
width: 10px;
height: 10px;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
-o-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
}
.nav:hover {
-webkit-box-shadow: 0 2px 3px rgba(0, 0, 0, 0.7);
-moz-box-shadow: 0 2px 3px rgba(0, 0, 0, 0.7);
-o-box-shadow: 0 2px 3px rgba(0, 0, 0, 0.7);
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.7);
}
@content的诞生
为了解决CSS3中@media带来的麻烦，sass引入了@content使得mixin可以接受一整块的样式。
//声明模块
//这个模块包含了要定义的属性，和前面的讲到的使用是一样的
@mixin mediaContent(){
width:200px;
height:100px;
color:#345;
font-size:20px;
}
//使用@content来引入一整块样式
@mixin max-screen($max){
@media screen and (max-width:$max){
@content;//接受的样式块从这里开始
}
}
//调用模块
@include max-screen(720px){
body{
@include mediaContent();
}
}
-------
//编译后的CSS
@media screen and (max-width: 720px) {
body {
width: 200px;
height: 100px;
color: #345;
font-size: 20px;
}
}
继承(extend)
@extend可以复制一个class或者ID中的属性，然后将它们添加到另一个class或者ID的属性列中。
//sass
//sass
.blue_button{
background:#336699;
font-weight:bold;
color:white;
padding:5px;
}
.org_button{
border-color:orange;
}
//对比一下@include
@mixin red_button(){
background:#f00;
font-weight:bold;
color:white;
padding:5px;
}
@mixin org_button(){
border-color:orange;
}
.checkout_button{
//继承了两个class
@extend .blue_button;
@extend .org_button;
//引用了两个模块
@include red_button();
@include org_button();
}
-------
//编译之后的CSS
.blue_button, .checkout_button {
background: #336699;
font-weight: bold;
color: white;
padding: 5px;
}
.checkout_button {
background: #f00;
font-weight: bold;
color: white;
padding: 5px;
}
可以看到，使用@include即引用模块时，其实是以复制的形式添加目标的属性，而使用@extend即
继承时，则是将被继承的对象和自身联合，在文件中一起声明一次，大家都叫“联合声明”。
占位选择器
从3.2。0之后可以定义占位选择器%。
假设在基础文件中定义了很多基础的样式，然后实际上不管是否使用@extend继承相应的样式，所有的代码都会编译解析成CSS，这样一来就会有很多多余的CSS。占位选择器的诞生很好的解决了这个问题。添加了占位选择器之后，只有被继承了的部分才会被解析出来。
//sass
%bgRed{
background:red;
}
bgBlue{
background:blue;
}
%bgYellow{
background:yellow;
}
body{
@extend %bgRed;
}
-------
//编译之后的CSS
body {
background: red;
}
.bgBlue {
background: blue;
}
定义了两个占位选择器%bgRed和%bgYellow，但是%bgYellow没有调用，所以在解析的时候便不会包含bgYellow部分。
占位选择器可以使CSS文件更加精炼简洁。一般用在定义基础的样式定义上。
运算
sass可以对数值进行加减乘除四则运算。注意运算符前面要加上一个空格。
$baseFontSize:14px;
$baseWidth:200;
//
$baseHeight:($baseFontSize *$baseWidth)/2+30;
body{
height:$baseHeight;
}
-------
//编译之后的CSS
body {
height: 1430px;
}
值得注意的是：在运算表达式中，如果有多个变量，最好保证只有一个带单位的变量，不然很有可能报错。上述的代码中，如果将$baaeWidth中的"200"改成"200px",就有多个单位，将会报错，无法通过编译。
函数
sass定义了一些很多函数可以使用，同时也可以自己定义函数，@function。
使用函数的方法也很简单，使用函数名加上括号就可以了，有参数的话就带上参数。
//sass
@function pxToRem($px){
@return $px / $baseFontSize *1rem;
}
sass几个常见用的颜色函数
Lighten/Darken函数，修改亮度
#page{
color:lighten(#336699,20%);
}
//编译后的CSS
#page{
color:#6699cc;
}
Saturate/Desaturate函数，修改饱和度
$main_color:#336699;
#page{
color:saturate($main_color,30%);
}
//编译后的CSS
#page{
color:#1466b8;
}
adjust-hue函数，修改色度
$main_color:#336699;
#page{
color:adjust-hue($main_color,180);
}
#page{
color:adjust-hue(desaturate($main_color,10%),90);
}
//编译之后的CSS
#page {
color: #996633; }
#page {
color: #8f3d8f;
}
grayscale函数，100%\降低饱和度，这个方法与下面代码是一样的效果。
desaturate(#336699,100%);
Mix函数，混合颜色
#page{
color:mix(#336699,#993266);
}
//编译后的CSS
#page {
color: #664c7f;
}
选择和循环
条件判断
sass真的就是将CSS当成编程语言来折腾了。提供判断和循环来编写CSS。
选择
@if可可以和@else结合多条件使用，就像写程序一样。
//sass
$type: monster;
p {
@if $type == ocean {
color: blue;
} @else if $type == matador {
color: red;
} @else if $type == monster {
color: green;
} @else {
color: black;
}
}
-------
//编译之后的CSS
p {
color: green;
}
for循环
for循环有两种形式，分别为：
@for $var from <start> through <end>
和
@for $var from <start> to <end>。
$i表示变量，start表示起始值，end表示结束值，这两个的区别是关键字through表示包括end这个数，而to则不包括end这个数。
//sass
@for $i from 1 through 3 {
.item-#{$i} { width: 2em * $i; }
}
-------
//编译之后的CSS
.item-1 {
width: 2em;
}
.item-2 {
width: 4em;
}
.item-3 {
width: 6em;
}
sass中的三目运算
if($condition, $if_true, $if_false) 。
三个参数分别表示条件，条件为真的值，条件为假的值。
if(true, 1px, 2px) => 1px
if(false, 1px, 2px) => 2px
基本语法结束，在学习过程中感觉到了sass的魅力。编写CSS变得有趣，而且简单粗暴！！！！！
