Sass 基本用法

什么是 Sass

Sass 是一种 CSS 的预处理器，可以使用 Sass 支持的规则进行编程，让编写 CSS 变得简单和可维护；
官方地址：Sass中文网

基本用法

1. 变量

Sass 允许使用变量，声明方式和 css 属性声明很相似，注意： 需要使用 $ 符号来标识变量；

$active-color: #00ffff;

.demo {
  color: $active-color;
}

// 编译后(CSS)
.demo {
  color: #00ffff;
}

如果需要镶嵌在字符中，必须写在 #{}中

$prefix: prefix;
$side: left;

.#{$prefix}-border {
  border: 1px solid gray;
  border-#{$side}-radius: 5px;
}

// 编译后(CSS)
.prefix-border {
  border: 1px solid gray;
  border-left-radius: 5px;
}

2. 计算功能

Sass支持在代码中使用算式：

$base-right: 100px;

.demo {
    margin: (14px / 2);
    top: 50px + 100px;
    right: $base-right * 0.1;
}

// 编译后(CSS)
.demo {
  margin: 7px;
  top: 150px;
  right: 10px;
}

3. 嵌套

在 css 中通过各种选择器来定位元素，设置元素式样，比如简单选择器(id, class, tag ...)，分组选择器(h1, h2, h3 ...), 后代选择器(.demo div), 父子选择器(.demo > div)等等，针对各类选择器写一个示例以供理解嵌套；

// 后代选择器
div span {
	color: gray;
}

// sass 写法
div {
	span {
		color: gray;
	}
}

// 父子选择器
.demo > div {
	color: gray;
}

// sass 写法
.demo {
	> span {
		color: gray;
	}
}

// 伪类选择器(&符号可以引用父元素)
a:hover {
	color: gray;
}

// sass 写法
a {
	&:hover {
		corlor: gray;
	}
}

4. 注释

Sass 支持标准的 CSS 多行注释 /* comment */, 多行注释会被完整输出到编译后的 CSS 文件中；也支持单行注释 // comment, 只保留在SASS源文件中，编译后被省略; 重要注释 /*! 重要注释 */, 即使是压缩模式编译，也会保留这行注释，通常可以用于声明版权信息;

代码重用

1. 继承

Sass 支持一个选择器继承另一个选择器。

.public {
	font-size: 14px;
}

// .demo 要继承 .public 选择器，要使用 @extend
.demo {
	@extend .public;
	color: gray;
}

// 编译后
.public, .demo {
  font-size: 14px;
}

.demo {
  color: gray;
}

2. Mixin

Sass 支持代码块重用
使用 @mixin 命令定义一个代码块

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

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

.demo {
	@include marginLeft;
	color: gray;
}

// 编译后
.demo {
  margin-left: 10px;
  color: gray;
}

mixin还可以指定参数和缺省值

@mixin marginLeft($left: 10px){
	margin-left: $left;
}

.demo {
	@include marginLeft(20px);
	color: gray;
}

//编译后
.demo {
  margin-left: 20px;
  color: gray;
}

3. 插入文件

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

@import "../../styles/index.scss";

高级用法

1. 条件语句

使用 @if 和 @else 用来判断

@mixin marginLeft($left: 10px){
	@if $left < 10 {
	    margin-left: 10px;
	} @else {
	    margin-left: $left;
	}
}

.demo1 {
	@include marginLeft(5px);
	color: gray;
}

.demo2 {
	@include marginLeft(20px);
	color: gray;
}

// 编译后
.demo1 {
  margin-left: 10px;
  color: gray;
}

.demo2 {
  margin-left: 20px;
  color: gray;
}

2. 循环语句

以下列举 for 循环示例，除 for 循环， Sass 还支持 while循环 和 each；

@for $index from 1 to 3 {
  .border-#{$index} {
	border: #{$index}px solid gray;
	}
}

// 编译后
.border-1 {
	border: 1px solid gray;
}

.border-2 {
	border: 2px solid gray;
}

3. 自定义函数

Sass 支持编写自己的函数

@function add ($n1, $n2) {
    @return $n1 + $n2;
}

.demo {
    width: add(10px, 20px);
}

// 编译后
.demo {
  width: 30px;
}