阳光博文 你的空间 知识的容器

SASS用法指南

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

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

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


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

变量
sass的变量必须是$开头,后面紧跟变量名,而变量值和变量名之间就需要使用冒号(:)分隔开(就像CSS属性设置一样),如果值后面加上!default则表示默认值。
sass的默认变量一般是用来设置默认值,然后根据需求来覆盖的,覆盖的方式也很简单,只需要在默认变量之前重新声明下变量即可

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

特殊变量
[一般我们定义的变量都为属性值,可直接使用,但是如果变量作为属性或在某些特殊情况下等则必须要以#{$variables}形式使用。]
//sass style
//-------------------------------
$borderDirection:       top !default;
$baseFontSize:          12px !default;
$baseLineHeight:        1.5 !default;
//应用于class和属性
.border-#{$borderDirection}{
  border-#{$borderDirection}:1px solid #ccc;
}
//应用于复杂的属性值
body{
    font:#{$baseFontSize}/#{$baseLineHeight};
}
//css style
//-------------------------------
.border-top{
  border-top:1px solid #ccc;
}
body {
  font: 12px/1.5;
}

多值变量
多值变量分为list类型和map类型,简单来说list类型有点像js中的数组,而map类型有点像js中的对象。
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);
使用
//sass style
//-------------------------------
$linkColor:         #08c #333 !default;//第一个值为默认值,第二个鼠标滑过值
a{
  color:nth($linkColor,1);
  &:hover{
    color:nth($linkColor,2);
  }
}
//css style
//-------------------------------
a{
  color:#08c;
}
a:hover{
  color:#333;
}
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即可)

定义

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

使用

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

全局变量

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

目前变量机制

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

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

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

启用global之后的机制

请注意,这个目前还无法使用,所以样式不是真实解析出来的。

//sass style
//-------------------------------
$fontSize:      12px;
$color:         #333;
body{
    $fontSize: 14px;        
    $color:   #fff !global;
    font-size:$fontSize;
    color:$color;
}
p{
    font-size:$fontSize;
    color:$color;
}

//css style
//-------------------------------
body{
    font-size:14px;
    color:#fff;
}
p{
    font-size:12px;
    color:#fff;
}

这里设置了两个变量,然后在body里面重新设置了下,有点不同的是对于$color变量,我们设置了!global。通过编译后的css可以看到font-size取值不同,而color取值相同。与上面的机制对比就会发现默认在选择器里面的变量为局部变量,而只有设置了!global之后才会成为全局变量。



嵌套

SASS允许选择器嵌套。比如,下面的CSS代码:
div {
    hi {
      color:red;
    }
  }

属性也可以嵌套,比如border-color属性,可以写成
注意,border后面必须加上冒号。
 p {
    border: {
      color: red;
    }
  }


继承
SASS允许一个选择器,继承另一个选择器。比如,现有class1:
    .class1 {
        border: 1px solid #ddd;
      }

class2要继承class1,就要使用@extend命令:
      .class2 {
        @extend .class1;
        font-size:120%;
      }
    
Mixin
Mixin有点像C语言的宏(macro),是可以重用的代码块。
使用@mixin命令,定义一个代码块。
      @mixin left {
        float: left;
        margin-left: 10px;
      }

使用@include命令,调用这个mixin。
      div {
        @include left;
      }

mixin的强大之处,在于可以指定参数和缺省值。
      @mixin left($value: 10px) {
        float: left;
        margin-right: $value;
      }
使用的时候,根据需要加入参数:
      div {
        @include left(20px);
      }
下面是一个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); }

颜色函数
SASS提供了一些内置的颜色函数,以便生成系列颜色。
      lighten(#cc3, 10%) // #d6d65c
      darken(#cc3, 10%) // #a3a329
      grayscale(#cc3) // #808080
      complement(#cc3) // #33c
    
高级用法

5.1 条件语句

@if可以用来判断:
      p {
        @if 1 + 1 == 2 { border: 1px solid; }
        @if 5 < 3 { border: 2px dotted; }
      }
配套的还有@else命令:
      @if lightness($color) > 30% {
        background-color: #000;
      } @else {
        background-color: #fff;
      }
     循环语句

SASS支持for循环:
      @for $i from 1 to 10 {
        .border-#{$i} {
          border: #{$i}px solid blue;
        }
      }

也支持while循环:

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

each命令,作用与for类似:
      @each $member in a, b, c, d {
        .#{$member} {
          background-image: url("/image/#{$member}.jpg");
        }
      }
    
    自定义函数

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

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




在线咨询