# Sass

//未编译样式
.box {
	width: 300px;
	height: 400px;
	&-title {
		height: 30px;
		line-height: 30px;
	}
}

/*命令行内容*/
sass style.scss:style.css --style nested

/*编译过后样式*/
.box {
	width: 300px;
	height: 400px;
}
.box-title {
	height: 30px;
	line-height: 30px;
}

/*命令行内容*/
sass style.scss:style.css --style expanded

/*编译过后样式*/
.box {
	width: 300px;
	height: 400px;
}
.box-title {
	height: 30px;
	line-height: 30px;
}

/*命令行内容*/
sass style.scss:style.css --style compact

/*编译过后样式*/
.box {
	width: 300px;
	height: 400px;
}
.box-title {
	height: 30px;
	line-height: 30px;
}

/*命令行内容*/
sass style.scss:style.css --style compressed

/*编译过后样式*/
.box {
	width: 300px;
	height: 400px;
}
.box-title {
	height: 30px;
	line-height: 30px;
}

// sass 允许样式可以和页面布局一样嵌套
ul {
	list-style: none;
	li {
		width: 200px;
		height: 40px;
		border: 1px solid red;
		span {
			color: red;
		}
		// sass 的嵌套格式中 & 表示父选择器
		&:hover {
			border-color: green;
		}
		&.act {
			text-align: center;
		}
	}
}
// sass 允许使用属性嵌套
.box {
	font: {
		family: "Arial, sans-serif";
		size: 18px;
		weight: border;
	}
	border: 5px solid red {
		left: 0;
		right: 0;
	}
}

// sass允许声明一个变量
$bgColor: #9000ff;
$border: 1px solid $bgColor;

.box {
	width: 300px;
	height: 300px;
	background-color: $baseSize;
}
.inner {
	border: $border;
}

/* 语法
@mixin 名字(参数1,参数2...){
	...
}*/
@mixin base {
	width: 200px;
	height: 200px;
	color: green;
	// 可以在公共样式中使用嵌套
	a {
		color: #ccc;
	}
}
@mixin text($text-color, $font-size) {
	color: $text-color;
	font-size: $font-size;
}

.box {
	@include base;
}
.inner {
	@include text(red, 18px);
	// 有时候可能会很难区分每个参数是什么意思，参数之间是一个什么样的顺序,sass允许通过语法$name: value的形式指定每个参数的值
	// @include text($font-size: 18px,$text-color: red);
}

// 为了在@include混合器时不必传入所有的参数，我们可以给参数指定一个默认值
@mixin default($color, $hover: $color, $act: $color) {
	color: $color;
	&:hover {
		color: $hover;
	}
	&.act {
		color: $act;
	}
}
.use {
	@include default(red);
	// $hover 和 $act 也会被自动赋值为 red
}

// sass 使用@extend 选择器 来继承样式，选择器相关的样式都会继承
.box {
	padding: 15px;
	span {
		color: green;
	}
}

.inner {
	@extend .box;
	background-color: red;
}

// css @import 引入其它css文件会让浏览器发出请求引入其它css文件。sass中的 @import 可以将其它scss文件中的样式导入到自身文件中
// 文件 init.scss
* {
	margin: 0;
	padding: 0;
}
// 文件 style.scss
@import "init";
.box {
	width: 200px;
}

在sass中使用这样的多行注释会在压缩输出的css中被去掉
/**
 * 天街小雨润如酥
 * 草色遥看近却无
 */
 sass 编译的css中 单行注释不会显示
 在多行注释的开头加上！号表示强制注释，编译的时候不会被去掉 /*! */

// adjust-hue(要调整的颜色值,要调整的度数)
// lighten(要处理的颜色,要增加的亮度)  让一个颜色变亮
// darken(要处理的颜色,要减小的亮度)  让一个颜色变暗
// saturate(要处理的颜色,要增加的饱和度)
// desaturate(要处理的颜色,要减少的饱和度)
// opacify(要处理的颜色,要增加的不透明度)
// transparentize(要处理的颜色,要增加的透明度)
$base-color: #ff0000;
.box {
	color: lighten($base-color, 10%);
	background-color: adjust-hue($base-color, 137deg);
}

// 语法： $map: (key1: value1, key2: value2, key3: value3 ...)
// map-keys($colors) 拿到所有的key值
// map-values($colors) 拿到所有的value值
// map-has-key($colors, light) 检测key值是否存在
// map-merge($colors. (grey: $eee)) 合并项目
// map-remove($colors, light) 删除其中的项
$colors: (
	light: #fff,
	dark: #000,
);
.box {
	// map-get 获取map中的某个值
	color: map-get($colors, dark);
}

/*
type-of()	可以判断类型
sass 支持布尔值运算 and or 以及 not 运算
sass 支持数学计算	2*8 2+8 除法要加() (8/4) 5px+5px 5px-2 5px*2 (5px*5px) (10px/2px) (40px/2)
sass 支持一些数学函数
	abs()	取绝对值
	round() 取四舍五入的值
	ceil()	向上取整
	floor() 向下取整
	percentage(650px / 1000)	取百分比
	min(8,5,3)	取最小数
	max(8,5,7)	取最大值
字符串 ni + "hao"   wid + th 不能使用*号
字符串函数：
	to-upper-case("width")变大写
	to-lower-case("Width")变小写
	str-length("hello") 求字符串长度
	str-index("hello","h") 求下标
	str-insert("hello","world", 2) 插入
list 列表 如： 1px solid red; 5px 25px 25px 15px;
	length(list) 求长度
	nth(list,1)	根据下标找列表相应位置的值
	index(1px solid red, solid)	根据值找下标
	append(5px 10px, 20px) 添加项
	join(20px 30px, 30px 20px) 合并
	join(20 15, 10 45, common)
*/

$name: "info";
$attr: "border";

.alert-#{$name} {
	#{$attr}-color: #ccc;
}

// 判断
/*
	@if 条件 {
		...
	} @else if 条件 {
		...
	} @else {
		...
	}
*/
$flag: true;
$width: 200;

.box {
	@if $flag {
		border-radius: 50%;
	} @else {
		border-radius: 10px;
	}
}
.inner {
	@if $width == 200 {
		height: 50px;
	}
}
// 循环 $var 表示变量
/*
	@for $var from <开始值> through/to <结束值> {
		...
		through $var可以等于 结束值，to 不会
	}
*/
$columns: 4;
@for $i from 1 through $columns {
	.col-#{$i} {
		width: 100% / $columns * $i;
	}
}

/*
	@while 条件 {
		...
	}
*/
$j: 6;
@while $j > 0 {
	.item-#{$j} {
		width: 5px * $j;
	}
	$j: $j - 2;
}
// 遍历
/*
	@each $var in $list {
		...
	}
*/
$icons: success error warning;
@each $icon in $icons {
	.icon-#{$icon} {
		background-image: url("../imgs/#{$icon}.png");
	}
}

/*
	@function 名称 (参数1,参数2){
		...
	}
*/
$colors: (
	light: #fff,
	dark: #000,
);
@function getColor($key) {
	@return map-get($colors, $key);
}

.box {
	color: getColor(light);
}

@warn "这是一个警告提示信息";
@error "这是一个错误提示信息";