SASS学习笔记2 —— 语法 - Joanna Qian

sass有两种后缀名文件：一种后缀名为sass，不使用大括号和分号；另一种是scss文件，这种和我们平时写的css文件格式差不多，使用大括号和分号。在此也建议使用后缀名为scss的文件，以避免sass后缀名的严格格式要求报错。

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

被导入sass文件a.scss：

body {  background: #eee; }

需要导入样式的sass文件b.scss：

@import "reset.css";
@import "a";
p{  background: #0982c1; }

转译出来的b.css样式：
```
@import "reset.css";
body {  background: #eee;}
p{  background: #0982c1;}
```
根据上面的代码可以看出，b.scss编译后，reset.css继续保持import的方式，而a.scss则被整合进来了。

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

一、变量

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

1.1普通变量——定义之后可以在全局范围内使用

$blue : #1875e7;　
//使用
div {color : $blue;}

如果变量需要镶嵌在字符串之中，就必须需要写在#{}之中。

$side : left;
//
.rounded { border-#{$side}-radius: 5px; }

1.2 默认变量---sass的默认变量仅需要在值后面加上!default即可。

$baseLineHeight: 1.5 !default;
body{
    line-height: $baseLineHeight; 
}

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

//sass style
//-------------------------------
$baseLineHeight:2;
$baseLineHeight:1.5 !default;
body{
    line-height: $baseLineHeight; 
}
//css style
//-------------------------------
body{
    line-height:2;
}

可以看出现在编译后的line-height为2，而不是我们默认的1.5。默认变量的价值在进行组件化开发的时候会非常有用。

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

$borderDirection:       top !default; 
$baseFontSize:          12px !default;
$baseLineHeight:        1.5 !default;
//应用于class和属性
.border-#{$borderDirection}{
  border-#{$borderDirection}:1px solid #ccc;
}
//应用于复杂的属性值
body{
    font:#{$baseFontSize}/#{$baseLineHeight};
}

1.4 多值变量

多值变量分为list类型和map类型，简单来说list类型有点像js中的数组，而map类型有点像js中的对象。

1）list

list数据可通过空格，逗号或小括号分隔多个值，可用nth($var,$index)取值。关于list数据操作还有很多其他函数如length($list)，join($list1,$list2,[$separator])，append($list,$value,[$separator])等，具体可参考sass Functions（搜索List Functions即可）

//一维数据
$px: 5px 10px 20px 30px;
//二维数据，相当于js中的二维数组
$px: 5px 10px, 20px 30px;
$px: (5px 10px) (20px 30px);
//使用
$linkColor:#08c #333 !default;  //第一个值为默认值，第二个鼠标滑过值
a{
  color:nth($linkColor,1);
  &:hover{
    color:nth($linkColor,2);
  }
}

2) map

map数据以key和value成对出现，其中value又可以是list。格式为：$map: (key1: value1, key2: value2, key3: value3);。可通过map-get($map,$key)取值。关于map数据还有很多其他函数如map-merge($map1,$map2)，map-keys($map)，map-values($map)等，具体可参考sass Functions（搜索Map Functions即可）

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

1.5 全局变量

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

1) 目前变量机制

在选择器中声明的变量会覆盖外面全局声明的变量。(这也就人们常说的sass没有局部变量)

$fontSize:      12px;
body{
    $fontSize: 14px;        
    font-size:$fontSize;
}
p{
    font-size:$fontSize;
}
//css style
body{    font-size:14px;}
p{  font-size:14px;}

2) 启用global之后的机制---请注意，这个目前还无法使用。

关于变量的详细分析请查阅sass揭秘之变量

计算功能---SASS允许在代码中使用算式：

body {
　　　　margin: (14px/2);
　　　　top: 50px + 100px;
　　　　right: $var * 10%;
　　}

二、嵌套Neating

sass的嵌套包括两种：一种是选择器的嵌套；另一种是属性的嵌套。我们一般说起或用到的都是选择器的嵌套。

2.1 选择器嵌套

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

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

div {
　　　　hi {color:red;}
　　}

a {
　　&:hover { color: #ffb3ff; }
}

2.2 属性嵌套

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

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

2.3 @at-root

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

1) 普通跳出嵌套

//没有跳出
.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;    }
  }
}

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

2) @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)。

//跳出父级元素嵌套
@media print {
    .parent1{
      color:#f00;
      @at-root .child1 { width:200px;}
    }
}
//跳出media嵌套，父级有效
@media print {
  .parent2{
    color:#f00;
    @at-root (without: media) {
      .child2 { width:200px;} 
    }
  }
}
//跳出media和父级
@media print {
  .parent3{
    color:#f00;
    @at-root (without: all) {
      .child3 {  width:200px;    } 
    }
  }
}
//sass style
@media print {
  .parent1 {    color: #f00;  }
  .child1 {    width: 200px;  }
}
@media print {
  .parent2 {    color: #f00;  }
}
.parent2 .child2 {  width: 200px;}
@media print {
  .parent3 {    color: #f00;  }
}
.child3 {  width: 200px;}

3) @at-root与&配合使用

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

4) 应用于@keyframe

.demo {
    ...
    animation: motion 3s infinite;

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

三、混合Mixin

Mixin有点像C语言的宏（macro），是可以重用的代码块。使用@mixin声明混合，可以传递参数，参数名以$符号开始，多个参数以逗号分开，也可以给参数设置默认值。声明的@mixin通过@include来调用。

3.1 无参数mixin

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

3.2 有参数mixin

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

3.3 多个参数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); }

3.4 多组值参数mixin

如果一个参数可以有多组值，如box-shadow、transition等，那么参数则需要在变量后加三个点表示，如$variables...。

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

3.5 @content

@content在sass3.2.0中引入，可以用来解决css3的@media等带来的问题。它可以使@mixin接受一整块样式，接受的样式从@content开始。

@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的实例，用来生成浏览器前缀。

@mixin rounded($vert, $horz, $radius: 10px) {
　　　　border-#{$vert}-#{$horz}-radius: $radius;
　　　　-moz-border-radius-#{$vert}#{$horz}: $radius;
　　　　-webkit-border-#{$vert}-#{$horz}-radius: $radius;
　　}
//调用：
#navbar li { @include rounded(top, left); }
#footer { @include rounded(top, left, 5px); }

PS：@mixin通过@include调用后解析出来的样式是以拷贝形式存在的，而下面的继承则是以联合声明的方式存在的，所以从3.2.0版本以后，建议传递参数的用@mixin，而非传递参数类的使用下面的继承。

四、继承

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

.class1 {　border: 1px solid #ddd;　}

class2要继承class1，就要使用@extend命令：

.class2 {
　　　　@extend .class1;
　　　　font-size:120%;
　　}

占位选择器%

从sass 3.2.0以后就可以定义占位选择器%。这种选择器的优势在于：如果不调用则不会有任何多余的css文件，避免了以前在一些基础的文件中预定义了很多基础的样式，然后实际应用中不管是否使用了@extend去继承相应的样式，都会解析出来所有的样式。占位选择器以%标识定义，通过@extend调用。

%ir{
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
}
%clearfix{
  @if $lte7 { *zoom: 1;  }
  &:before,&:after {
    content: "";
    display: table;
    font: 0/0 a;
  }
  &:after { clear: both;}
}
#header{
  h1{
    @extend %ir;
    width:300px;
  }
}
.ir{ @extend %ir;}
//调用
#header h1,
.ir{
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
}
#header h1{  width:300px; }

如上代码，定义了两个占位选择器%ir和%clearfix，其中%clearfix这个没有调用，所以解析出来的css样式也就没有clearfix部分。占位选择器的出现，使css文件更加简练可控，没有多余。所以可以用其定义一些基础的样式文件，然后根据需要调用产生相应的css。

ps：

在@media中暂时不能@extend @media外的代码片段，以后将会可以。
关于@mixin，%，@function更多说明可参阅：sass揭秘之@mixin，%，@function

五、函数

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

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

六、高级用法

6.1 运算

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-width: 60px !default;   // Width of a single column
$_gutter:  20px !default;     // Width of the gutter
$_gridsystem-width: $_columns * ($_column-width + $_gutter); //grid system width

6.2 条件语句

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

$lte7: true;
$type: monster;
.ib{
    display:inline-block;
    @if $lte7 {
        *display:inline;
        *zoom:1;
    }
}
p {
  @if $type == ocean {
    color: blue;
  } @else if $type == matador {
    color: red;
  } @else if $type == monster {
    color: green;
  } @else {
    color: black;
  }
}

6.4 三目判断

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

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

6.5 循环

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

while循环

$i: 6;
@while $i > 0 {
　　.item-#{$i} { width: 2em * $i; }
　　$i: $i - 2;
}

@each循环

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

单个字段list数据循环

@each $member in a, b, c, d {
　　　　.#{$member} {
　　　　　　background-image: url("/image/#{$member}.jpg");
　　　　}
　　}

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

多个字段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数据循环

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

关于循环判断详细分析请查阅：sass揭秘之@if，@for，@each

6.6 自定义函数

SASS允许用户编写自己的函数。

@function double($n) {
　@return $n * 2;
}
//
#sidebar {width: double(5px);}

posted on 2014-09-23 03:33 Joanna Qian 阅读(494) 评论(0) 编辑收藏举报

刷新页面返回顶部