sass学习笔记

sass的作用：

• 使开发更高效，减少沉余的代码，使代码结构更清晰，更有力于维护。

1. 变量
2. 规则嵌套
3. 属性嵌套
4. 文件导入
5. @mixin混合器
6. @extend 选择器继承

1. 变量

1. 全局变量

在css规则块外面声音的变量

2. 局部变量

在css规则内声音的变量

• 变量声明

声明方式	应用场景
$color: red;	赋于一个值
$border: 1px solid #ccc;	声明一个border简写属性值，用空格分隔
$font-family: ‘宋体’, ‘微软雅黑’	声音一个字体系列， 用逗号分隔

任何css属性值都可用于变量值

• 变量调用

1. 声明一个颜色为红色的变量：
   $color: red;
2. 调用变量
   body{ color: $color; }

在任何地方有需要使用的变量的地方都可以调用 , 变量中也可以调用已声明的变量

变量默认值（!default）

$link-color: red !default; 的变量声明 优先级 是最低的，不会覆盖同名的变量；（当导入时，用于修改变量默认值，但要在导入前申明）
比如： 当用@import 导入一个scss文件时，如果已经在scss文件中声明这个变量时，而被导入的scss文件中也声音了这个变量默认值，则不会覆盖已经声音的变量；

例 ：

1. var.scss 文件

$link-color: red !default; /* 优先级低于一般变量 */
a:link{
	color:$link-color;
}

2. demo.scss 文件

$link-color: skybule;

@import 'var';  /* 导入var.scss文件 */

/*编译结果*/
a:link {
	color: skybule;
}

2.规则嵌套

• 普通嵌套(后代选择器)

body {
	color: red;
	h1 {
		font-size: 12px;
	}
	h2 {
		font-weight: 700;
		color: blue;
	}
}

/* 编译结果 */
body{
	color: red;
}
body h1{
	font-size: 12px;
}
body h2{
	font-weight: 700;
	color: blue;
}

• 特别嵌套

1. 父选择器 & （普通、交集、伪类、伪元素）

/* 一、普通应用场景 */
.box {
	body & {color: red;}
}

/* 编译结果 */
body .box {color:red;}

/* 二、交集应用场景 */
.box {
	&.box1{
		border: 1px solid red;
	}
}

/* 编译结果 */
.box.box1 {border: 1px solid red;}

/* 三、伪类应用场景 */

a {
	&:link { color: #999; }
	&:visited {color: #000;}
	&:hover {color:#c00;}
	&:active{color: blue;}
}

/*编译结果*/
a:link{color: #999;}
a:visited{color: #000;}
a:hover{color: #c00;}
a:active{color: blue;}

/* 四、伪元素应用场景 */
.clearfix{
	&::after,
	&::before{
		content: '';
		display: table;
	}
	&::after{
		clear: both;
	}
}

/* 编译结果 */
.clearfix::after,
.clearfix::before{
	content: '';
	display: table;
}
.clearfix::after {
	clear: both;
}

2. 子元素选择器 >、兄弟选择器 ~ 、相邻选择器 +

.box {
   > div {
   	float: left;
   	width: 100px;
   	height: 40px;
   }
   ~ section {
   	font-size: 14px;
   	background-color: #ccc;
   }
   + aside{
   	font-size: 16px;
   	height: 1em;
   	line-height: 1em;
   }
}

/* 编译结果 */
/*选择.box元素下的直接是div标签元素*/
.box > div {float:left; width: 100px; height: 100px;}
/*选择与.box元素同级的section元素*/
.box ~ section {font-size: 14px; background-color: #ccc;}
/*选择紧根.box元素相邻的aside元素*/
.box + aside {font-size: 16px; height: 1em; line-height: 1em;}

嵌套的优点：

1. 阅读性强，便于维护理解
2. 可节省多余的书写代码
3. 加快开发效率，节省时间

3.属性嵌套

div{
	width: 100px;
	height: 100px;
	/* 属性嵌套 */
	border: 1px solid blue {
		left: 2px dotted red;
		top: {
			color: green;
		}
	};
	margin: {
		left: 20px;
		top: 30px;
	}
}

/* 编译结果 */
div {
    width: 100px;
    height: 100px;
    border: 1px solid blue;
    border-left: 2px dotted red;
    border-top-color: green;
    margin-left: 20px;
    margin-top: 30px;
}

4.文件导入

• 局部文件导入

局部文件是以下划线 _ 开头命名的文件， 编译时不会生成css文件
导入时，可以直接省略下划线

• 一般文件导入

两者都是采用 @import 语法导入， 可以省略_开头、.scss后缀

• 嵌套导入（规则中导入）

1. var.scss 文件

$link-color: red !default;
a:link{
	color: $link-color;
}

2. demo.scss 文件
/* 导入var文件 */

h1 {
 @import 'var';
}

/* 编译结果 */
h1 a:link{
	color: red;
}

在被导入的文件中，申明的变量只在规则内有效，属于局部变量

@mixin混合器
当只是简单的要设置共同的颜色、字体或边框等这些一条样式时， 可以采用默认变量值的方式。
而当有大量的规则或属性相同的时候，这个时候混合器上场的时候了。

那什么时候用类，什么时候用混合器呢？
当是为了体现标签语义化的时候，这个时候采用类。
当是为了表现效果与外观时，而应该用到混合器。
tip: 不因该强制的去对大断相同样式采用混合器，而当能更好的用有效的名字的时候，才因该去用。

• 普通混合器

/* 只包含属于的混合器 */
@mixin rounded {
	width: 100px;
	height: 100px;
	background-color: red;
	border-radius: 50%;
}
/* 既包含规则也包含属性的混合器， 当只有规则时，可以在最外层直接用 @include 调用  */
@mixin setColor {
	color: #fff;
	
	.box {
		color: red;
	}
}

/* 调用  */

.header {
	@include setColor();
}

/* 编译结果 */
.header {
	color: #fff;
}

.header .box {
	color: red;
}

1. 当混合器中只有规则，而没有属性时，可以直接在最外层调用
2. 混合器中也能用 父选择器 &, 生成css时，&直接用在所调用的层级的中的选择器替代

• 带参数的混合器
  而有些时候，要适应灵活变化的不同属性值时，这个时候参数就是其发挥作用的时候了。

@mixin link-colors($normal, $visited, $hover) {
	color: $normal;
	&:visited {
		color: $visited;
	}
	&:hover {
		color: $hover;
	}
}

a {
	@include link-colors($normal: #666, $hover: red; $visited: #333); /* 参数名，可以直接省略，这样写是为了更醒目而已 */
}

/* 编译结果 */
a {color: #666;}
a:visited {color: #333;}
a:hover {color: red;}

• 混合器 - 默认参数值
  @mixin link-colors ($normal: #666, $visited: $normal, $hover: red){ … }

和es6函数参数默认值效果一样

6. @extend 选择器继承

1. 使用继承，会继承被选择器自身的样式
2. 且还会继承与被选择器有关的复合选择器的所有样式，也就是任何地方有这个被选择器的都会被继承

本质： 就是相当于将与被选择器有关的样式规则拷贝一份，再将被选择器替换成要继承的选择器，并用并级选择器连接起来

.error {
	border: 1px solid red;
	background-color: #ddd;

	a {
		color: red;
		font-size: 12px;
	}
}

h1.error {
	font-weight: 700;
	font-size: 24px;
}

.seriousError{
	@extend .error;
	border-width: 3px;
}

/* 编译结果 */

.error, .seriousError {
	border: 1px solid red;
	background-color: #ddd;
}

.error a, .seriousError a {
	color: red;
	font-size: 12px;
}

h1.error, h1.seriousError {
	font-weight: 700;
	font-size: 24px;
}