# One thousand front against the war classes, the next punch #
sass css is pre-compiled languages, faster and stronger than css higher
Sass written in the language suffix .sass or .scss files inside.
.Scss difference .sass files and documents
在.scss文件里面和写css语法基本一致
在.sass文件里面就没有大括号和分号，全部依靠缩进来维持关系
这两个文件被编译成css文件以后是一样的sass tools and .scss files compiled .sass
1.sass单文件编译
+ 先写好一个.scss 或者 .sass后缀的文件
+ 打开命令行，切换到文件的目录
+ 输入指令
-> sass 要编译的文件 编译后的文件名
+ 每次修改scss文件都需要从新编译一下
2. sass 单文件实时编译
=> 你先写好一个 .sass 或者 .scss 后缀的文件
=> 打开命令行, 切换到文件的目录
=> 输入指令
-> sass --watch 要编译的文件:编译后的文件名
=> 一个终端只能监控一个文件, 你要是想监控多个文件, 需要开启很多终端
3. sass 文件夹实时编译
=> 把一个文件夹里面的 sass 文件全部编译到另一个文件夹里面
=> 先准备好一个文件夹, 这个文件夹是专门来写 sass 文件的
=> 代开命令行, 切换到这个文件夹的目录
=> 输入指令
-> sass --watch 要编译的文件夹:生成的文件夹
=> 实时编译的时候黑窗口要一致开着
4. 生成的 map 文件的作用
映射生成代码的位置到源文件代码位置
=> 我在写代码的时候, 调试出现问题了
=> 我要修改 sass 文件的代码, 让他重新编译出 css 文件来
=> 再浏览器控制台的时候, 直接把样式后面的信息给你映射到 sass 文件的指定行sass variables
/* 在 sass 里面定义一个变量 ，一次定义多次使用
=> 语法: $名字: 值;
注意:你的变量名是 $名字 ,值不需要引号
使用: 直接使用变量名就可以了
只要变量的值修改了,那么所有使用这个变量的位置就都修改了*/
$color: green;// 定义了一个叫做 $color 的变量, 值是 green
$fs: 30px;
$border: 10px solid #333;
p {background-color: $color;font-size: $fs;border: $border;}//使用变量
a {color: $color;font-size: $fs;}sass comments
// 1. 单行注释, 再编译的时候不进行编译
/**/ 2. 多行注释
=> 再编译的时候会保留
=> 再使用 gulp 打包的时候不会保留
/*! */ 3. 强力注释
=> 再编译的时候会保留
=> 再使用 gulp 打包的时候也会保留sass conditional branch statement
依赖于变量使用
=> if 语句
-> 语法: @if 变量 == 值 { 样式 }
=> if else 语句
-> 语法: @if 变量 == 值 { 样式 } @else { 样式 }
=> if else if 语句
-> 语法: @if 变量 == 值 { 样式 } @else if 变量 == 值 { 样式 }
$type: c;// 准备一个变量
h1 {
width: 100px; height: 100px;
@if $type == a {
color: red;
} @else if $type == b {
color: green;
}
}sass of the loop
for 循环
=> 依赖变量使用
=> 语法: 有两种
1. @for 变量 from 数字 to 数字 { 代码 }
-> 包含开始数字, 不包含结束数字
-> 在循环里面使用变量
=> 再选择器中使用 #{变量}
=> 再样式里面使用 变量
2. @for 变量 from 数字 through 数字 { 代码 }
-> 包含结束数字
-> 在循环里面使用变量
=> 再选择器中使用 #{变量}
=> 再样式里面使用 变量
each 循环
=> 依赖一个 sass 数组使用
=> 写一个 sass 数组
-> 语法: 变量: (), (), (), (), ...
=> each 的使用
-> 语法: @each 变量1, 变量2, ... in 数组
/* for 循环 */
//这个循环的数字变化是 1 2, 不包含 3
@for $i from 1 to 3 { li:nth-child(#{$i}) {
width: 10px*$i; }}
$colorArr: (1, red), (2, green), (3, skyblue), (4, purple), (5, orange), (6, yellow);//定义一个数组
//each循环
@each $index, $color in $colorArr {
li:nth-child(#{$index}) {
background-color: $color;
}
}sass nested selector
/* 和 html 一样让选择器也有一个上下级的关系
1. 后代选择器嵌套
=> 语法: 父级 { 子级 {} }
2. 子代选择器嵌套
=> 语法: 父级 { > 子级 {} }
3. 连字符选择器嵌套
=> 伪类选择器和伪元素选择器嵌套
=> 当你需要的伪类和伪元素和选择器连接再一起的时候
=> 使用 & 连接符操作
=> 语法: 选择器 { &:hover {} }
4. 群组选择器的嵌套(使用太少)
=> 语法: 群组选择器 { 子级 {} }
=> 语法: 选择器 { 群组选择器 {} }
=> 语法: 群组选择器 { 群组选择器 {} }*/Nested property of sass
属性嵌套
+ 前提: 可以嵌套的属性才能使用
+ => 就是属性中带有中划线的属性
+ => 如 border-left ，margin-left
p { border: 10px solid #333{
left: 10px dashed pink;
};
}## sass mixed (mixer / function) a mixin
/* 混合器, 就是类似于 js 里面的函数
+ js 的函数 function 函数名(形参) {}
+ + sass 的混合器
+ => 语法: @mixin 混合器名称 {}
+ => 语法: @mixin 混合器名称(形参) {}
+ => 语法: @mixin 混合器名称(形参默认值) {}
+ + sass 的混合器的使用
+ => 语法: @include 混合器名称;
+ => 语法: @include 混合器名称(实参);*/
// 再定义混合器的时候可以传递一个参数默认值
// 你如果传递了实参, 就用你传递的
// 如果你没有传递实参, 那么就是用默认值
@mixin transition($t: 1s, $p: all, $d: 0s, $tf: linear) {
-webkit-transition: $p $t $d $tf;
-moz-transition: $p $t $d $tf;
-ms-transition: $p $t $d $tf;
-o-transition: $p $t $d $tf;
transition: $p $t $d $tf;}
//将参数去掉就是不传参，也可以将参数默认值去掉，此函数不使用的时候是不会被编译的
h1 { width: 100px;height: 100px;// 使用这个带有参数默认值的混合器
@include transition(3s, height);// 传递两个参数, 剩余的使用默认值}
}sass inheritance
Inheritance syntax sass inside: @extend another selector;
div {width: 100px;height: 100px;padding: 10px;margin: 20px；}
p { @extend div; // 继承了 div 里面的所有样式
padding: 20px; border: 10px solid #333;//p自己的样式
}sass import
Import syntax: => syntax: @import "You want to import the file name";
Trying to do anything, hard to move yourself, Wuhan Come on! Go China!
