Sass | 语法

可从官网了解：http://sass-lang.com/documentation/file.SASS_REFERENCE.html

目录结构：

test.scss

//变量
$blue : #bdc4fd;

div {
	coloe: $blue;
}


//变量(镶嵌在字符串之中)
$side : left;

.router {
	border-#{$side}-radius: 10px;
}


//计算
body {
	margin: (14px/2);
	top: 100px;
	left: 200px;
}


//嵌套
div h1 {
	color: #666;
}

div {
	h1 {
		color: aquamarine;
	}
}


//继承
.class {
	border: 10px;
}

.class2 {
	@extend .class;
	font-size: 10px;
}


/*!
注意：要使用这个解析才能再css文件里面显示出来，否则识别出来是scss文件的解析
*/

//Mixin有点像C语言的宏（macro），是可以重用的代码块。
@mixin left {
	float: left;
	display: inline;
}

.div2 {
	@include left;
}

//Mixin传参
@mixin left2($value : 20px) {
	float: left;
	top: $value;
}

.div3 {
	@include left2(30px)
}


//颜色函数
.foooter {
	color: lighten(#cc3, 10%);
}

.foooter2 {
	color: lighten(#cc3, 10%); // #d6d65c
}

.foooter3 {
	color: darken(#cc3, 10%); // #a3a329
}

.foooter4 {
	color: grayscale(#cc3); // #808080
}

.foooter5 {
	color: complement(#cc3); // #33c
}

//插入文件
@import './scss/index.scss';
@import "foo.css";



//条件语句
p {
	@if 1+1==2 {
		background: #1231;
	}

	@if 1+1>2 {
		border: #666;
	}

	@else {
		background: #ffffff;
	}
}

//循环语句
@for $i from 1 to 10 {
	.border-#{$i} {
		border: #{$i} solid blue;
	}
}

$i: 6;

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

	$i: $i - 2;
}

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

//自定义函数
@function double($n){
	@return $n * 2; 
}

#siderbar{
	width: double(10)px;	
}

./scss/index.css

$index : 100px;
.vick{
    backdrop-filter: $index;
}

编译结果

test.css

@charset "UTF-8";
@import url(foo.css);
div {
  coloe: #bdc4fd; }

.router {
  border-left-radius: 10px; }

body {
  margin: 7px;
  top: 100px;
  left: 200px; }

div h1 {
  color: #666; }

div h1 {
  color: aquamarine; }

.class, .class2 {
  border: 10px; }

.class2 {
  font-size: 10px; }

/*!
注意：要使用这个解析才能再css文件里面显示出来，否则识别出来是scss文件的解析
*/
.div2 {
  float: left;
  display: inline; }

.div3 {
  float: left;
  top: 30px; }

.foooter {
  color: #d6d65c; }

.foooter2 {
  color: #d6d65c; }

.foooter3 {
  color: #a3a329; }

.foooter4 {
  color: gray; }

.foooter5 {
  color: #3333cc; }

.vick {
  backdrop-filter: 100px; }

p {
  background: #1231;
  background: #ffffff; }

.border-1 {
  border: 1 solid blue; }

.border-2 {
  border: 2 solid blue; }

.border-3 {
  border: 3 solid blue; }

.border-4 {
  border: 4 solid blue; }

.border-5 {
  border: 5 solid blue; }

.border-6 {
  border: 6 solid blue; }

.border-7 {
  border: 7 solid blue; }

.border-8 {
  border: 8 solid blue; }

.border-9 {
  border: 9 solid blue; }

.item-6 {
  width: 12em; }

.item-4 {
  width: 8em; }

.item-2 {
  width: 4em; }

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

#siderbar {
  width: 20 px; }

/*# sourceMappingURL=test.css.map */

• 安装

SASS是Ruby语言写的，但是两者的语法没有关系。不懂Ruby，照样使用。只是必须先安装Ruby，然后再安装SASS。

假定你已经安装好了Ruby，接着在命令行输入下面的命令：

gem install sass

然后，就可以使用了。

• 使用

SASS文件就是普通的文本文件，里面可以直接使用CSS语法。文件后缀名是.scss，意思为Sassy CSS。

下面的命令，可以在屏幕上显示.scss文件转化的css代码。（假设文件名为test。）

sass test.scss

如果要将显示结果保存成文件，后面再跟一个.css文件名。

sass test.scss test.css

SASS提供四个编译风格的选项：

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

生产环境当中，一般使用最后一个选项。

sass --style compressed test.sass test.css

你也可以让SASS监听某个文件或目录，一旦源文件有变动，就自动生成编译后的版本。

// watch a file

sass --watch input.scss:output.css

// watch a directory

sass --watch app/sass:public/stylesheets

SASS的官方网站，提供了一个在线转换器。你可以在那里，试运行下面的各种例子。