Sass

# 注意事项

1.运行"编译"用cmd千万不要用powershell 在使用终端时 注意选择cmd(在第二页)

2.文件夹一定不要中文,中文会出现编译失败

3.文件夹不要放在桌面上(mac可以)

# sass

1.作用css预处理器,css其实是一门语言,但不具备编程的特性.增加了编程功能让css编写更快捷

2.特点 有变量按照dom结构(html结构)嵌套式的写css 有助于选择器的权重值.

3.重要的内容,嵌套写法,混合指令 变量等

4.不能直接用,需要编译成Css之后再使用css

5.下载时sass 编译时文件时scss 最早sass因为语法规则特殊和css差别很大,因此很多人觉得学习成本高.3.0版本进行更新 语法与css基本一致,新名字就成了文件的后缀名,老版本没有弃用 .npm install sass 虽然下载还是sass 但文件可以使用新版本

# 编译

1.编译打开方式

- cmd 在当前文件夹的目录直接输入cmd

- 在vscode中找到项目文件夹右键点击在集成终端打开

- 进入某个文件夹cd 文件夹目录 进入该文件夹

2.创建文件夹

创建一个scss 写scss用的(用的编辑样式).css文件夹作用，写的scss文件夹，编译后存到css文件夹中

3.编译

使用scss 命令 -w 监听scss 文件夹 ：编译到css文件夹

sass -w scss:css

4.编译错误

- scss 语法错误

- 编译时间过长

- 有中文字符

四、规则

1.编码集，如果在scss文件中有中文注释等，需要在第一行写 注意分号

@charset"utf-8";

2.注释规则

/**/css多行注释，在编译时会直接编译

//单行注释在scss

3.嵌套规则

按照html标签的嵌套书写，按照html包裹关系写scss的包裹

把后代元素直接写在父元素的{}中

4.导入规则

当一个scss文件需要另外一个或多个scss文件的支持时，可以使用导入其他scss文件的方式，同样也可以一起进行编辑，大大节省了时间

@import "01.scss";

# 变量的使用

1.语法 $变量名:值;变量名不允许数字开头和中文，允许 英文字符+数字.连接符下划线、中横线都可以

2.值可以是关键字、数值、数字、颜色等等

3.分号必须写

4.局部变量，是指在某个选择器{}中创建的变量,与js相同 全局变量谁都可以用局部变量只能在该选择器的{}内使用

# 父选择器&

父选择器&代表使用父选择器作用域下{}以上的所有选择器集合 选择的是当前{}的元素.

如果使用伪类，必须前面加&占位

# 计算功能

计算功能在scss中可以应用的 但不完美再乘除方面需要进行变量的，单位转换

2.运算时，需要保证单位统一.如:5px-1% 报错

3.插值语句#{变量}通过插值 把任何可变值，变成字符串

4.当变量作为选择器名字使用时 不可以直接写变量的名字需要将整个变量名用差值包裹变为字符串后在当作选择器名称使用.#{$xzq}

# 混合指令

1.定义的混合指令 @mixin 指令名(){样式列表}

2.引用混合指令，就是通过@include指令名()使用定义好的混合指令样式

3.传递参数 引用混合指令和定义混合指令如同调用函数和定义函数引用时可加入实参定义时可接受形参

如:@mixin box($color) {

   width: 100px;

   height: 100px;

   

}

.a {

  @include box(orange);

}

.b {@include box(black)}

# 继承

1.在页面元素中，可能有多个元素使用相同的样式，这时可以只写一个元素样式，让其他元素继承，已经写好的元素样式 在css展现中 使用的是群组选择器

2.@extend 需要继承的选择器;

3.可以继承多个选择器 @extend 选择器1,选择器2;

4.占位符选择器 %名字 如%wh 他不会代表任何元素也不会出现在css上 可以使用继承选择器完成某些元素部分相同效果

# sass 的语句

1.@if 语句

- 语法@if 条件{}

- @if 条件{}@else{}

- @if 条件{}@else if{}@else

- 条件判断语句

$x>200px

$x>=200px

$x<200px

$x<=200px

$x==200px

$x!=200px

并且and

或者or

2.@for语句

// 语法1 从1开始到5结束(不包含5)

@for $i from 1 to 5 {

 

}

// 语法2 从1开始到5结束(包含5)

@for $i from 1 through 5 {

 

}

- 案例 ，利用循环让元素改变元素

- @for $i from 1 through 5 {

  ul >li:nth-child(#{$i}){

    }

}

# 函数