Sass用法随记

一、什么是Sass

在开发网页样式时，经常会重复使用大量选择器、样式等，因此有人就开始为CSS加入编程元素，这被叫做"CSS预处理器"（css preprocessor）。它的基本思想是，用一种专门的编程语言，进行网页样式设计，然后再编译成正常的CSS文件。而Sass 就是CSS预处理器的一种，它提供了变量、 嵌套、混合、继承和其它实用的许多功能，大大节省了设计者的时间，使得CSS的开发，变得简单和可维护。

二、用法

1.使用

1.SASS文件就是普通的文本文件，里面可以直接使用CSS语法。文件后缀名是.scss，意思为Sassy CSS。
2.SASS提供四个编译风格的选项：
生产环境当中，一般使用最后一个选项。

   	nested：嵌套缩进的css代码，它是默认值。
	expanded：没有缩进的、扩展的css代码。
	compact：简洁格式的css代码。
	compressed：压缩后的css代码。

2.语法

注释

单行注释 // comment，只保留在SASS源文件中，编译后被省略。
多行注释 /* comment */ ，会保留到编译后的文件，压缩模式编译省略。
在/*后面加一个感叹号，表示这是"重要注释"。即使是压缩模式编译，也会保留这行注释，通常可以用于声明版权信息。

/*! 
	重要注释
 */ 

变量

所有变量以$开头

//base.scss
$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

//base.css
body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}

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

//base.scss
$side : top;
.mt-5 {
　　margin-#{$side}: 5px;
}

//base.css
.mt-5 {
　　margin-top: 5px;
}

嵌套

SASS允许选择器嵌套。

//base.scss
h1{
	a{
		color:red;
	}	
}

//base.css
h1 a{
	color:red;
}

属性也可以嵌套。

//base.scss
p {
	border: {
		color: red;
	};
	padding: {
		left: 10px;
		right: 10px;
	}
}
//注意，border后面必须加上冒号和空格

//base.css
p {
	border-color: red;
	padding-left: 10px;
	padding-right: 10px;
}

在嵌套的代码块内，可以使用&引用父元素。

//base.scss
a {
	&:hover{
		color:red;
	}
}

//base.css
a:hover {
	color: red;
}

作用域

//base.scss
$number:100px;
body {
    $number:200px;
    h2{
        width: $number;
        $number:300px;
    }
    $number:400px;
    width: $number;
}

//base.css
body {
  width: 400px;
}
body h2 {
  width: 200px;
}

Midea查询

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

//base.scss
.container{
    width: 720px;
    @media all and (min-width:992px) {
        width: 960px;
    }
    @media all and (min-width:1100px) {
        width: 1040px;
    }
}

//base.css
.container {
  width: 720px;
}
@media all and (min-width: 992px) {
  .container {
    width: 960px;
  }
}
@media all and (min-width: 1100px) {
  .container {
    width: 1040px;
  }
}

计算

注意，“/” 默认为分割符，需加小括号变为除号。+、-、前后操作数单位必须统一或只有一个操作数有单位。* 有且只有一个操作数有单位。/ 操作数单位相同，结果无单位；可被除数有单位除数无单位。

//base.scss
$var:10;
body {
　　　　margin: (14px/2);
　　　　top: 50px + 100px;
　　　　right: $var * 10%;
　　　　color: #010203 * 2;
}

//base.css
body {
	margin: 7px;
	top: 150px;
	right: 100%;
	color: #020406;
}

MIXIN

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

//base.scss
@mixin show {
    display: block;
}
div{
    @include show;
}

//base.css
div {
  display: block;
}

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

//base.scss
@mixin show($color:red) {
    color: $color;
}
div{
    @include show;
    a:hover{
        @include show(#fff); 
    }
}

//base.css
div {
  color: red;
}

div a:hover {
  color: #fff;
}

继承

SASS允许一个选择器，继承另一个选择器。使用@extend命令调用继承的选择器

//base.scss
.class1 {
	border: 1px solid #ddd;
    text-align: center;
}
.class2 {
	@extend .class1;
    font-size: 12px
}
.class3 {
	@extend .class1;
	font-size:20px;
}

//base.css
.class1, .class2, .class3 {
  border: 1px solid #ddd;
  text-align: center;
}
.class2 {
  font-size: 12px;
}
.class3 {
  font-size: 20px;
}

若.class1只为抽取公共部分，不希望其被编译到css文件中可使用占位符%

//base.scss
%class1 {
	border: 1px solid #ddd;
    text-align: center;
}
.class2 {
	@extend %class1;
    font-size: 12px
}
.class3 {
	@extend %class1;
	font-size:20px;
}

//base.css
.class2, .class3 {
  border: 1px solid #ddd;
  text-align: center;
}
.class2 {
  font-size: 12px;
}
.class3 {
  font-size: 20px;
}

内置函数

SASS提供了一些内置的函数，具体请查阅官方文档

//base.scss
div{
    width: percentage(0.8);
    height: round(6.8px);
    margin: random();
}

//base.css
div {
  width: 80%;
  height: 7px;
  margin: 0.41747;
}

自定义函数

//base.scss
@function sum($n,$m){
    @return $n+$m;
}
p{
   font: {
   	 size:sum(1px,2px);
   } 
}

//base.css
p {
  font-size: 3px;
}

插入外部文件

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

//base.scss
@import "path/filename.scss";

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

@import "foo.css";

条件语句

//base.scss
$count:3;
p{
    @if ($count > 5) {
        width: 100px;
    } @else {
        width: 200px; 
    }
    @if 1 + 1 == 2{
        border: 1px solid #fff;
    }
}

//base.css
p {
  width: 200px;
  border: 1px solid #fff;
}

循环语句

for循环

from n to m 代表 [n,m)
from n through m 代表 [n,m]

//base.scss
@for $i from 1 to 5 {
    .border-#{$i} {
        border: #{$i}px solid blue;
   }
}

//base.css
.border-1 {
  border: 1px solid blue;
}
.border-2 {
  border: 2px solid blue;
}
.border-3 {
  border: 3px solid blue;
}
.border-4 {
  border: 4px solid blue;
}

while循环

//base.scss
$n:4;
@while $n >0 {
    .btn#{$n}{
        height: #{$n}px;
    }
    $n:$n - 2;
}

//base.css
.btn4 {
  height: 4px;
}
.btn2 {
  height: 2px;
}

each命令

作用与for类似：

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

//base.css
.a {
  background-image: url("/image/a.jpg");
}
.b {
  background-image: url("/image/b.jpg");
}
.c {
  background-image: url("/image/c.jpg");
}
.d {
  background-image: url("/image/d.jpg");
}

本文参考 SASS用法指南-阮一峰的网络日志