Sass学习

原文链接：http://www.w3cplus.com/sassguide/syntax.html

Sass能完成的内容包括：

1、变量的定义和使用

变量包括普通变量，默认变量，全局变量，特殊变量（需要使用#{$variable}），多值变量（map和list）。

2、嵌套和跳出嵌套

嵌套：选择器嵌套（{}/&）／属性嵌套({}/:)
跳出嵌套：@at-root(with…) @at-root(without…)

3、混合和引用混合

混合：@mixin
引用混合：@include
根据传参的形式和对少可以分为：无参数的混合／单参数混合／多参数混合／多组值参数混合
@content可以指定从mixin的指定位置插入代码段

4、继承

使用@extend可以实现选择器样式的继承，一般用于不传递参数的情况。
%使用%定义的选择器样式，如果没有被继承的话，将不会在css文件中编译。继承的时候使用@extend %variable

5、函数／判断／循环

函数：@function
判断：@if/@else/if($condition,$if_true,$if_else)
循环： @for $j from 1 to n @for $j from 1 through n @each $var in <list or map>

详细说明

文件后缀名

支持两种后缀

.sass

不使用大括号和分号

.scss

使用大括号和分号
sass

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

scss

body{
    background:#eee;
    font-size:12px;
}

导入（@import）

sass编译时会讲@import的scss文件合并起来只生成一个css文件，但是在sass中引入的css文件，导入的css文件不会合并到编译后的文件中，而是以import的方式存在。
基础文件的命名：_mixin.scss 在导入文件的时候可以不写下划线，可写成@import “mixin”

注释

sass支持两种注释方式：/**/和//
对于单行注释，不会转义到css文件中

变量

sass中的变量以$符号开始后面紧跟变量名，变量名和变量值之间使用冒号隔开。

默认变量

值后面加上!default表示默认值。

全局变量

值后面加上!global即为全局变量

特殊变量

变量在以下情况下使用时需要以#{$variables}形式使用。

应用于class和属性

$borderDirection:top !default
$baseFontSize:12px !default
$baseLineHeight:1.5 !default
.border-#{$borderDirection}{
    border-#{$borderDirection}:1px solid #ccc;
}

应用于复杂的属性值

body{
    font:#{$baseFontSize}/#{$baseLineHeight};
}

多值变量

多值变量分为list类型和map类型

list

list类型可以使用空格，逗号和小括号分隔多个值

//一维数组
$px: 5px 10px 20px 30px;
//二维数组
$px: 5px 10px , 20px 30px;
$px: (5px 10px) (20px 30px);

可用nth($var,$index)取值

$linkColor: #08c #333 !default;
a{
    color : nth($linkColor,1);
    &:hover{
        color : nth($linkColor,2);
    }
}

map

map数据以key和value成对出现，其中value又可以是list。
格式为:

$map:(key1:value1,key2:value2,key3:value3);
$heading:(h1 : 2em , h2 : 1.5em , h3 : 1.2em);

可通过map-get($map,$key)取值。
使用

@each $header,$size in $headings{
    #{$header}{
        font-size:$size;
    }
}

嵌套

sass的嵌套分为两种：

选择器的嵌套

使用大括号套用大括号的形式进行嵌套，&符号表示父选择器

a{
    display:block;
    padding:0 10px;
    color:#fff;
    &:hover{
        color:#ddd;
    }
}

属性的嵌套

属性的嵌套使用大括号套用大括号(并加冒号–因为是属性)的形式进行嵌套。

.fakeshadow{
    border:{
        style:solid;
        left:{
            width:4px;
            color:#888;
        }
        right:{
            width:2px;
            color:#ccc;
        }
    }
}

跳出选择器嵌套

@at-root

可选择单个跳出和多个跳出
单个跳出在选择器前面加上@at-root即可，多个需要添加@at-root并使用大括号括起来。

.parent-1{
    color:#f00;
    .child{
        width:100px;
    }
}
//单个选择器跳出嵌套
.parent-2{
    color:#f00;
    @at-root .child{
        width:200px;
    }
}
//多个选择器跳出
.parent-3{
    background:#f00;
    @at-root{
        .child1{
            width:300px;
        }
        .child2{
            width:400px;
        }
    }
}
//css style
//-------------------------------
.parent-1 {
  color: #f00;
}
.parent-1 .child {
  width: 100px;
}

.parent-2 {
  color: #f00;
}
.child {
  width: 200px;
}

.parent-3 {
  background: #f00;
}
.child1 {
  width: 300px;
}
.child2 {
  width: 400px;
}

@at-root(without: …)和@at-root(with: …)

默认@at-root只能跳出选择器嵌套，而不能跳出@media或@support，如果需要跳出这两种，则需使用@at-root(without:media)，@at-root(without:support)。
还可选取的参数有：all(表示所有)／rule(表示常规css)/media(表示media)／support(表示support)
默认情况下的@at-root即是@at-root(without:rule)

混合(mixin)

混合相当于一个css代码块，可通过@include引入该代码块。

无参数的mixin

@mixin center-block{
    margin-left:auto;
    margin-right:auto;
}
.demo{
    @include center-block;
}
//css style
.demo{
    margin-left:auto;
    margin-right:auto;
}

传递参数的mixin

@mixin opacity($opacity:50){
    opacity:$opacity / 100;
    filter:alpha(opacity=$opacity);
}
.opacity{
    @include opacity;//使用默认参数
}
.opacity-80{
    @include opacity(80);//添加参数
}

多参数的mixin

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

//css style
//-------------------------------
.imgtext-h li {
    border-bottom: 1px solid #cccccc;
    padding-top: 10px;
    padding-bottom: 10px;
}
.imgtext-h--product li {
    border-bottom: 1px dashed #cccccc;
    padding-top: 15px;
    padding-bottom: 15px;
}

多组值参数mixin

多组值参数，可以一个参数传入多组值，此时参数要写成$variable…

//box-shadow可以有多组值，所以在变量参数后面添加...
@mixin box-shadow($shadow...) {
  -webkit-box-shadow:$shadow;
  box-shadow:$shadow;
}
.box{
  border:1px solid #ccc;
  @include box-shadow(0 2px 2px rgba(0,0,0,.3),0 3px 3px rgba(0,0,0,.3),0 4px 4px rgba(0,0,0,.3));
}

//css style
//-------------------------------
.box{
  border:1px solid #ccc;
  -webkit-box-shadow:0 2px 2px rgba(0,0,0,.3),0 3px 3px rgba(0,0,0,.3),0 4px 4px rgba(0,0,0,.3);
  box-shadow:0 2px 2px rgba(0,0,0,.3),0 3px 3px rgba(0,0,0,.3),0 4px 4px rgba(0,0,0,.3);
}

@content

@content用于指定@mixin从什么位置开始接收一整块的样式，接收的位置从@content开始。（用来解决css3的@media等带来的问题）

//sass style
//-------------------------------                     
@mixin max-screen($res){
  @media only screen and ( max-width: $res )
  {
    @content;
  }
}

@include max-screen(480px) {
  body { color: red }
}

//css style
//-------------------------------
@media only screen and (max-width: 480px) {
  body { color: red }
}                     

继承

继承可以继承另一个选择器的所有样式，并联合声明。一般有参数传递时使用mixin，无参数传递时使用继承。

//sass style
//-------------------------------
h1{
  border: 4px solid #ff9aa9;
}
.speaker{
  @extend h1;
  border-width: 2px;
}

//css style
//-------------------------------
h1,.speaker{
  border: 4px solid #ff9aa9;
}
.speaker{
  border-width: 2px;
}

占位选择符%

使用%定义的选择器样式，如果没有其他选择器继承它（@extend）的话，将不会把其编译到css文件中。

函数

@function可以用来定义函数

//sass style
//-------------------------------                     
$baseFontSize:      10px !default;
$gray:              #ccc !defualt;        

// pixels to rems 
@function pxToRem($px) {
  @return $px / $baseFontSize * 1rem;
}

body{
  font-size:$baseFontSize;
  color:lighten($gray,10%);
}
.test{
  font-size:pxToRem(16px);
  color:darken($gray,10%);
}

//css style
//-------------------------------
body{
  font-size:10px;
  color:#E6E6E6;
}
.test{
  font-size:1.6rem;
  color:#B3B3B3;
}

运算

sass提供运算的特性，可以对数值型的value进行加减乘除size运算，但需注意运算符前后需要多留一个空格。

条件循环和判断

@if判断

可以和@else配合

三目判断

if($condition,$if_true,$if_else)

if(true,1px,2px) =>结果为1px

for循环

@for $var from <start> through <end>

@for $var from <start> to <end>

两者的区别在于through包括end这个数，而to不包括end这个数。

each循环

语法为：@each $var in <list or map>
单字段list

$animal-list: puma, sea-slug, egret, salamander;
@each $animal in $animal-list{

}

多字段list

$animal-data: (puma, black, default),(sea-slug, blue, pointer),(egret, white, move);
@each $animal, $color, $cursor in $animal-data {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
    border: 2px solid $color;
    cursor: $cursor;
  }
}

多字段map

//sass style
//-------------------------------
$headings: (h1: 2em, h2: 1.5em, h3: 1.2em);
@each $header, $size in $headings {
  #{$header} {
    font-size: $size;
  }
}

//css style
//-------------------------------
h1 {
  font-size: 2em; 
}
h2 {
  font-size: 1.5em; 
}
h3 {
  font-size: 1.2em; 
}