Sass笔记SASS的官方网站，提供了一个在线转换器。你可以在那里，试运行下面的各种例子也可以去（Sass中文文档）试试

第一天笔记

什么是SASS

Sass 是一款强化 CSS 的辅助工具，它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能，这些拓展令 CSS 更加强大与优雅。使用 Sass 以及 Sass 的样式库（如 Compass）有助于更好地组织管理样式文件，以及更高效地开发项目。

SASS的官方网站，提供了一个在线转换器。你可以在那里，试运行下面的各种例子也可以去（Sass中文文档）试试都是在线转换器。

sass相关学习教程：

一.权重

权重: 比重，在css里面指的是样式的优先级

如果对同一个标签有多种样式设置，那么选择权重高的设置

等级	标签
10000	`!important`
1000	内联样式 `style=""`
100	id选择器
10	类选择器，伪类
1	标签选择器，伪元素
0	通用选择器`(*)`,子选择器`(>)`,相邻选择器`(+)`,兄弟选择器 `(空格)`

二.SASS定义变量

1.定义变量:

$变量名:属性值;

选择器{
	属性名:$变量名;
}

2.直接的层次结构最后会转为父代结构
选择器1{
	属性:属性值;
	选择器2{
		属性:属性值;
	}
}

编译后：
选择器1{
	属性:属性值;
}

选择器1 选择器2{
	属性:属性值;
}

3. & （this/父类）

第二天的笔记

一.混合器

1.定义了多个属性的混合器
定义
@mixin 混合器名字{
	属性1:值1;
	属性2:值2;
}

引用
选择器{
	属性:值;
	@include 混合器名字;
}

编译:
选择器{
	属性:值;
	属性1:值1;
	属性2:值2;
}

2.定义了多个属性及其他选择器的混合器
定义
@mixin 混合器名字{
	属性1:值1;
	属性2:值2;
	选择器{
		属性3:值3;
	}
}

引用
选择器A{
	属性:值;
	@include 混合器名字;
}

编译:
选择器A{
	属性:值;
	属性1:值1;
	属性2:值2;
}

选择器A 选择器{
	属性3:值3;
}

3.传参的混合器
定义:
@mixin 混合器名字($参数1,$参数2,$参数3){
	属性1:$参数1;	
	属性2:$参数2;	
	属性3:$参数3;	
}

调用1：
选择器{
	@include 混合器名字(实参1,实参2,实参3);
}

调用2：
选择器{
	@include 混合器名字(
		$参数1:实参1,
		$参数3:实参3,
		$参数2:实参2);
}

1.定义一个混合器，设置背景颜色，边框效果，字体颜色然后引入一个div样式中。div本身设置大小。

2.修改渐变背景色的混合器，改为传参版参数1：方向（实参：top,right,to right,to left ,to bottom,30deg）参数2、3：颜色1，2

二.引入sass文件

定义+引入--> 1.定义一个sass文件(_名字.scss),写好样式 2.通过 @import "路径/名字"; 引入到另一个sass中，然后编译该文件，并在html中引入编译后的css

在选择器也可以引入--> 产生的效果是：外层的选择器和引入sass文件中的选择器会全部构成父子结构。

default--> 如果被引入的sass定义了该变量，则用它的如果没定义，则使用当前定义的。

三.继承

定义-->：

选择器A{
	属性1:值1;
}

选择器B{
	属性2:值2;
	@extend 选择器A;
}

编译-->：

选择器A,选择器B{
	属性1:值1;
}
选择器B{
	属性2:值2;
}

注意: 继承不仅会使自身属性被继承，连相同的结构组合选择器也会被继承

四.使用外部字体

1.定义

@font-face{
	font-family:名字;//为你的外部字体在当前项目中取名字
	src:url(路径);	//指定外部字体的路径
}

2.引用

#txt{
	font-family:名字;
}

五.2D效果的变化 tranform

效果	实例
平移	`translate`两个参数，分别代表`x、y方向上的偏移量(单位：px)`
伸缩	`scale`两个参数，分别代表`x、y`方向上的伸缩倍数
旋转	`rotate` 一个参数，代表旋转的角度，(单位：deg)
平行四边形	`skew`两个参数，分别代表`x、y`方向上的旋转角度（单位：deg）

tranform:变化类型(实参列表);

第三天的笔记

一.过渡 `transition`

语法：

transition:过渡属性1 时间1,过渡属性2 时间2,过渡属性3 时间3

动画:animation

二.定义动画:

@keyframes{
	时间节点1{
		属性1:值1_1;A
		属性2:值2_1;
	}
	时间节点2{
		属性1:值1_2;
		属性2:值2_2;
	}
	时间节点3{
		属性1:值1_3;
		属性2:值2_3;
	}
}

时间节点：from(0%)/to(100%)   ,  百分比(0%~100%)

三.绑定动画:

选择器{
	其他属性设置.....
	animation:动画名称 持续时间 速度类型 播放次数 播放方向;
}
速度类型：linear
播放次数：次数/infinite
播放方向：normal(正常从头到尾，默认)/alternate(从头到尾，从尾到头)

Sass笔记