Scss基本用法

变量

scss使用$符号来标识变量。变量有作用域，外部不能引用内部变量。在声明变量时可以引用其他变量。变量名可以与CSS中的属性名和选择器名称相同，推荐使用中划线分隔。

$border-width: 1px;
$border: $width solid  black;
div {
  border: $border;
}

//编译后

div {
  border: 1px solid black;
}

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

$border: border;
div {
    #{$border}-width: 1px;
}

//编译后

div {
    border-width: 1px;
}

计算功能

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

body {
	$height: 100px;
	width: 200px / 2;
	height: $height * 2;
}

嵌套CSS 规则

可以在规则块中嵌套规则块。
可以用>选择一个元素的子元素。
可以用+一个元素后紧跟的某个元素。
可以用~选一个元素后的同层元素。

div {
    p {
        color: black
    }
} 

//编译后

div p {
    color: black;
}

可以用&符号表示父选择器。

div {
    &:hover { 
        color: red 
    }
} 

//编译后

div:hover {
    color: red;
}

除了CSS选择器，属性也可以进行嵌套。

div {
    border: {	//要加冒号
        width: 1px;
    }
} 

//编译后

div {
    border-width: 1px;
}

注释

//单行注释的内容不会出现在生成的CSS文件中。而/* */多行注释出现在原生CSS不允许的地方也会被抹掉。

div {   //这行注释会被移除 
    width/* 这行注释会被移除 */: 1px; 
} /* 这行注释不会被移除 */

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

/*！
    重要注释 
*/

混合器

使用@mixin标识符定义混合器。通过@include来使用这个混合器。

@mixin mixinname {}

div {
    @include mixinname;
}

可以给混合器传参。

@mixin color($color) {
    color: $color;
}

div {
    @include color(red);
}

通过$name: value指定每个参数的值可以忽略参数顺序，只需要保证没有漏掉参数。

@mixin color($color, $width) {
    color: $color;
    width: $width;
}

div {
    @include color(
        $width: 100px,
        $color: red
    );
}

可以给参数指定一个默认值。默认值可以是其他参数的引用。

@mixin color(
    $color: red, 
    $border-color: $color
) {
    color: $color;
    border-color: $border-color;
}

继承

通过@extend语法实现继承。

.parent {
  border: 1px solid red;
}
.child {
  @extend .parent;
}

//编译后

.child {
  border: 1px solid red;
}

任何跟.parent有关的组合选择器样式也会被.child以组合选择器的形式继承。

.parent a{}		//应用到.child a
h1.parent {}	//应用到hl.child

颜色函数

SASS提供了一些内置的颜色函数。

lighten(#cc3, 10%)  // 颜色变深函数
darken(#cc3, 10%)   // 颜色变浅函数
grayscale(#cc3)     // 将该颜色转换为相对应的灰度颜色
complement(#cc3)    // 获取该颜色值旋转180度后相对应的颜色

插入文件

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

@import "path/filename.sass";

条件语句

@if可以用来判断，配套的还有@else命令。

div {
    @if 1 > 2 {
        width: 100px;
    } @else {
        width: 200px;
    }
}

循环语句

SASS支持for循环：

@for $i from 1 to 6 {
    h#{$i} {
        border: #{$i}px solid blue;
    }
}

也支持while循环：

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

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