sass 基本语法

sass语法

文件后缀名

sass有两种后缀名文件：一种后缀名为sass，不使用大括号和分号；另一种就是我们这里使用的scss文件，这种和我们平时写的css文件格式差不多，使用大括号和分号。

而本教程中所说的所有sass文件都指后缀名为scss的文件。在此也建议使用后缀名为scss的文件，以避免sass后缀名的严格格式要求报错。

//文件后缀名为sass的语法
body
  background: #eee
  font-size:12px
p
  background: #0982c1

//文件后缀名为scss的语法  
body {
  background: #eee;
  font-size:12px;
}
p{
  background: #0982c1;
} 

1 变量

sass允许使用变量，所有变量使用$开头,而变量值和变量名之间就需要使用冒号(:)分隔开

$blue：blue;

.demo{

color:$blue;

}

如果变量使用在字符串中，需要使用#{}来调用

$side:left;

.demo1{

border-#{$side}:1px soild $blue;

}

全局变量

在变量值后面加上!global即为全局变量。这个目前还用不上，不过将会在sass 3.4后的版本中正式应用。目前的sass变量范围饱受诟病，所以才有了这个全局变量。

2 计算功能

sass允许在代码中使用算式

$height:200px;

.demo2{

margin:100px+20px;

font-size:14px/2;

width:200px*3;

height:$height*3;

}

3 嵌套

sass允许选择器嵌套

例如：

.demo4 span{ float:left;}

可以写成这样

.demo4{
　　span{
　　　　float:left;
　　}
}

属性也可以嵌套     所谓属性嵌套指的是有些属性拥有同一个开始单词，如border-width，border-color都是以border开头：

例如

p{

　　border:{

　　　　color:red;
　　}

}

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

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

注意，border后面必须加上冒号。

在嵌套代码块中可以是&引用父元素，比如a:hover伪元素可以写成：

a{

　　&:hover{

　　　　color:red;

　　}

}

@at-root 跳出嵌套

sass3.3.0中新增的功能，用来跳出选择器嵌套的。默认所有的嵌套，继承所有上级选择器，但有了这个就可以跳出所有上级选择器。

@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，因为@support目前还无法广泛使用，所以在此不表）。我们默认的@at-root其实就是@at-root (without:rule)。

//没有跳出循环
.parent-1{
  color:red;
  .child-1{
    border:1px solid red;
  }
}

//编译后的css
.parent-1{
  color:red;
}
.parent-1 .child-1 {
  border: 1px solid red;
}
//普通跳出嵌套
.parent-2{
  color:red;
  @at-root .child-2{
    border:1px solid red;
  }
}

//编译后的css
.parent-1{
  color:red;
}
.child-2 {
  border: 1px solid red;
}

//跳出media嵌套，父元素的嵌套保留
@media print{
  .parent-3{
    color:red;
    @at-root(without:media){
      .child-3{
        border:1px solid red;
      }
    }
  }
}

//编译后的css
@media print {
  .parent-3 {
    color: red;
  }
}

.parent-3 .child-3 {
  border: 1px solid red;
}
/*跳出media和父元素的嵌套*/
@media print{
  .parent-3{
    color:red;
    @at-root(without:all){
      .child-3{
        border:1px solid red;
      }
    }
  }
}


//编译后的css
@media print {
  .parent-3 {
    color: red;
  }
}

.child-3 {
  border: 1px solid red;
}

@at-root与&配合使用

//sass style
//-------------------------------
.child{
    @at-root .parent &{
        color:#f00;
    }
}

//css style
//-------------------------------
.parent .child {
  color: #f00;
}

应用于@keyframe

//sass style
//-------------------------------
.demo {
    ...
    animation: motion 3s infinite;

    @at-root {
        @keyframes motion {
          ...
        }
    }
}

//css style
//-------------------------------   
.demo {
    ...   
    animation: motion 3s infinite;
}
@keyframes motion {
    ...
}

4 注释

一共有三种注释方式：

　　1 标准的css注释

　　　　/* comment*/   会保留到编译后的文件中

　　2 单行注释//comment  只保留在sass源文件中，编译后会被省略

　　3 重要注释 在/*后加一个!号  ------即使是压缩编译模式也会保留这行注释，通常用于声明版权信息

　　　　/*!*/

五 代码的重用

5.1 继承性

sass允许一个选择器继承另一个选择器@extend

例如：

.class1{ border:1px solid red;}

.class2{

　　@extend .class1;

　　color:blue;

}

占位选择器 % 

在sass3.2.0之后就可以定义占位选择器%，这种选择器的优势在于：如果不调用，则不会有任何多余的css产生，避免了之前在一些基础文件中预定义了很多基础的样式，

在实际使用中，不管是否使用@extend继承这个样式，在编译时都会解析出所有的样式，占位选择符使用%标示定义，通过@extend调用

demo

%style1{
  border:1px solid red;
  color:red;
  font-size:20px;
}
%style2{
  border:1px solid blue;
  color:blue;
  font-size:10px;
}
.demo10{
  @extend %style1;
}

编译后的代码：

.demo10 {
  border: 1px solid red;
  color: red;
  font-size: 20px;
}

ps：在@media中暂时不能@extend @media外的代码片段，以后将会可以。

5.2 Mixin 是可以重用的代码块

使用@mixin定义一个代码块

@mixin left{

　　border-left:1px solid red;

　　color:blue;

}

使用@include调用这个代码块

.demo5{

　　@include left;

}

mixin的强大之处在与可以指定参数和缺省值

@mixin border($borderWidth:10px){

　　　　border:$borderWidth solid red;
}

.demo6{

　　@include border(20px);

}

@content 可以用来解决css3的@media等带来的问题。它可以使@mixin接受一整块样式，接受的样式从@content开始。（就时当定义一个mixin，并定义了@content，在@include mixin时，可以传入相应的内容到mixin中，特别是在@media中起作用）

demo：

@mixin max-screen($color){
  @media only screen and(max-width:1000px)
  {
    @content
  }
}
$color: red;
@include max-screen(blue){
  body{
    color:$color
  }
}

编译后

@media only screen and (max- 1000px) {
  body {
    color: red; 
　　} 
}

demo2:

@mixin color($color){
  border:1px solid $color;
  background-color: $color;
  @content;
}
$color:red;
    .demo10{
      @include color(blue){
        color:$color;
      }
  }

编译后

.demo10 {
  border: 1px solid blue;
  background-color: blue;
  color: red; 
}

5.3 颜色函数

SASS提供了一些内置的颜色函数，以便生成系列颜色。

颜色函数中又以lighten减淡和darken加深为最，其调用方法为lighten($color,$amount)和darken($color,$amount)，它们的第一个参数都是颜色值，第二个参数都是百分比。

　lighten(#cc3, 10%) // #d6d65c
　darken(#cc3, 10%) // #a3a329
　grayscale(#cc3) // #808080
　complement(#cc3) // #33c

5.4 插入文件@import

　@import "path/filename.scss";   可以简写为@import "path/filename";

如果插入的是.css文件，则等同于css的import命令。

@import "filename.css";

所有的sass导入文件都可以忽略后缀名.scss。一般来说基础的文件命名方法以_开头，如_mixin.scss。这种文件在导入的时候可以不写下划线，可写成@import "mixin"。

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

5.5 运算

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

$baseFontSize:          14px !default;
$baseLineHeight:        1.5 !default;
$baseGap:               $baseFontSize * $baseLineHeight !default;
$halfBaseGap:           $baseGap / 2  !default;
$samllFontSize:         $baseFontSize - 2px  !default;

//grid 
$_columns:                     12 !default;      // Total number of columns
$_column-                60px !default;   // Width of a single column
$_gutter:                      20px !default;     // Width of the gutter
$_gridsystem-            $_columns * ($_column-width + $_gutter); //grid system width

6 高级用法

6.1 条件语句

@if 用来判断：

.demo{

　　@if 3+5==8{

　　　　border:1px solid red;
　　}

　　@if  2+3>6{

　　　　border:2px solid blue;

　　}

}

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

@if lightness($color)>30%{

　　background-color:red;

　　}@else{

　　background-color:blue;

　　}

6.2 循环语句@for（语法：@for $var from <start> through <end>和@for $var from <start> to <end>）

@for $ifor 0 to 10{

　　border#{$i}{

　　　　border:#{$i}px solid red;
　　}

}

@while:

$i:7;

@while $i>0{

　　.item#{$i}{

　　　　width:100px*$i;
　　　　$i: $i - 2;(要有空格，否则报错)
　　}

}

@each（语法为：@each $var in <list or map>） 作用与@for类似：

@each $number in a,b,c,d{

　　.#{$number}{

　　　　border:1px solid red;
　　}

}

单个字段list数据循环

$animal-list: puma, sea-slug, egret, salamander;
@each $animal in $animal-list {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
  }
}

编译后

.puma-icon {
  background-image: url('/images/puma.png'); 
}
.sea-slug-icon {
  background-image: url('/images/sea-slug.png'); 
}
.egret-icon {
  background-image: url('/images/egret.png'); 
}
.salamander-icon {
  background-image: url('/images/salamander.png'); 
}

多个字段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;
  }
}

编译后

.puma-icon {
  background-image: url('/images/puma.png');
  border: 2px solid black;
  cursor: default; 
}
.sea-slug-icon {
  background-image: url('/images/sea-slug.png');
  border: 2px solid blue;
  cursor: pointer; 
}
.egret-icon {
  background-image: url('/images/egret.png');
  border: 2px solid white;
  cursor: move; 
}

多个字段map数据循环

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

编译后

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

6.3 三目判断

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

if(1+1>2,2,3)=======>>1+1>2为假，所以结果为
if(2+2==4,2,3)======>>2+2==4为真，所以结果是2

if(1+1>2,2,3)=======>>1+1>2为假，所以结果为3（条件是1+1>2,为真的值是2,为假的值是3）

if(2+2==4,2,3)======>>2+2==4为真，所以结果是2（条件是2+2==4,为真的值是2,为假的值是3）

6.4 自定义函数

@function sum($n,$m){

@return $n+$m;

}

.double{

　　width:sum(100px,200px);

}

编译后：

.double{

width:300px;

}