SASS 用法总结

简介

Sass是一种基于CSS的预处理语言，在CSS的基础上将代码抽象和简单化。

简单来说就是，Sass可以运用逻辑和变量去写样式，提供很多便利的写法，大大节省设计者的时间，让CSS的开发变得简单，易维护。

SASS写完之后需要编译为css方可使用

安装

安装sass之前，要先安装Ruby ，安装好Ruby之后，在命令行输入

gem install sass

就可以使用sass了。

基本用法

变量

SASS允许使用变量，所有变量以 $ 开头。这样就可以设定共同颜色，宽度等等，便于维护。

$red : #f20000;
div{
  color:$red;
}

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

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

计算功能

SASS允许在代码中使用算式：

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

嵌套

SASS允许选择器嵌套。

div{
  width:100px;
}
div h1{
  color:red;
}

可以写成

div{
  width:100px;
  
  h1{
    color:red;
  }
}

属性也可以嵌套，例如border-color属性，可以写成：

$width:100px;
div{
  width:$width;
  h1{
    height:$width;
    border:2px silid{
      color:red;
    }
  }
}

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

a{
  color:white;
  &:hover{
    color:red;
  }
}

注释

SASS共有两种注释风格。

标准的CSS注释/*comment*/ ，会保留到编译后的文件。

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

在/*后面加一个感叹号，表示这是“重要注释”。即使是压缩模式编译，也会保留这行注释，通常可用于声明版权信息。

代码重用

继承

SASS允许一个选择器，继承另一个选择器。比如，现在class1：

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

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

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

mixin

使用@mixin命令，定义一个代码块。

@mixin left{
  float:left;
  margin-left:10px;
}

使用@include命令，调用这个mixin。

div{
  @include left;
}

mixin的强大之处，在于可以指定参数的缺省值。下面一个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(bottom,right,5px);
}

颜色函数

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

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

插入外部文件

@import命令，用来插入外部文件。

@import "path/filename.scss";

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

@import "filename.css"

高级用法

条件语句

@if可以用来判断，常常结合mixin使用

$width:100px;
p{
width:$width;
  @if $width == 100px{border: 1px solid};
  @if $width > 100px{border: 10px solid};
}

循环语句

SASS支持for循环：

@for $i from 1 to 10 {
  .border-#{$i} {
    border:#{$i}px solid blue;
  }
}

也支持while循环

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

each命令，作用与for类似：

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

自定义函数

@function double($n) {
    @return $n * 2;
}

#sidebar {
    width: double(5px);
}