sass安装步骤、概述、基本语法等

SASS

1. sass的安装步骤
   1） 在cmd中输入 sass -v 或 sass --version 只要其中一个有版本号就不需要以下操作了。
   2） 在cmd中输入ruby -v ，查看是否有版本号
   3） 如果有版本号，如ruby 2.5.1等，说明环境中有ruby,直接用 gem install sass 安装。
   如果是mac系统一般情况下自带ruby，使用sudo gem install sass
   安装过程因版本不同可能需要选择，有的话可以选1
   安装完成在cmd中 sass -v 出现版本号就是安装成功了
   4） 在cmd中输入ruby -v ，如果没有ruby版本号，则使用npm安装。
   先检查是否有npm -v，有版本号出现，执行命令 npm install -g sass
   安装过程因为版本不同可能需要选择，有的话可以选1
   5） 安装完sass之后，在cmd中输入 sass --version检查是否有版本号，有就是安装成功
   6） 如果 npm install -g sass安装失败，可以尝试先安装ruby
   安装包是FTP中day21目录下的 rubyinstaller-devkit-2.4.10-1-x64.zip
   7） ruby软件安装完成后，在cmd中输入 ruby -v 查看版本号，有的话ruby就安装成功了
   8） 安装ruby后，在cmd输入： gem install sass 安装sass
   总结：能用npm装sass就用npm装，装不上就先装ruby,用ruby来装sass
2. 如何证明安装成功了？
   命令1 sass -v
   命令2 sass --version
   使用以上任意一个命令，出现以下几种情况任意一种都是装好SASS了
   1.52.1 complied with dart2js 2.17.1
   ruby 1.52.1
   Ruby Sass 3.7.4
   版本有细微差别没关系
3. sass简介
   我们平时写样式使用的是CSS，sass是CSS"预处理器"，是一种专门的CSS编程语言
   增加了变量、函数、计算、嵌套关系等等的语法
   可以让CSS编写更便捷，清晰
   预处理器，除了sass还有其他的，比如less、stylus,使用方法大同小异
   sass不能直接使用，需要进一步编译过程
   比如我有一个1.sass文件，这个文件需要通过编译过程变为1.css文件
   然后这个编译好的1.css文件再被index.html引入渲染效果
4. 编译
   sass的语法和版本
   npm install sass -g 是安装sass的命令
   .sass是文件后缀名 3.0版本之前一直使用的是它，文件编辑语法严格
   3.0版本后，后缀名改成了.scss 这种后缀使用的是CSS语法，学习成本大大降低
   所以软件的名字不可以改，还是sass,但是文件后缀名改成了.scss
   步骤
   1. 在day22code下创建项目文件夹test
   2. 在test文件夹中创建预处理文件夹scss,用于存放我们编写的.scss文件
   3. 在test文件夹中创建css文件夹，用于存放编译后生成的.css文件
   4. 在scss文件夹下创建1.scss文件，写一句代码 body { background-color:#f00; }
   5. 打开test目录对应的cmd窗口
   6. 在test目录下的cmd窗口输入命令 sass scss/1.scss:css/1.css后回车
      执行sass命令 scss/1.scss源文件 :表示生成 css/1.css编译后生成的目标文件
   7. 查看css文件夹下是否有内容生成，且内容包含1.scss文件中的css代码
      注意：执行命令后在css文件夹下生成的文件可能有多个，没有关系，只要有1.css且内容有可以了
      监听整个文件夹进行编译
      sass -w scss:css
      -w 表示watch监听的含义，也就是说，只要scss文件夹有变动，就立即编译到css文件夹中，这样就实现了半自动化
      那这样我们修改scss文件的内容就可以同步生成到css文件中
      注意：如果当时没有编译成功，按一下Ctrl+C
      按两次Ctrl+C就是退出监听，重新执行上面的命令才能再次监听

3 sass规则
5. 注释规则
因为大家安装的版本不一样，所以有的同学写中文注释可能会报错或者乱码
在这里不要出现中文，容易有坑！
/**/ CSS的注释方式，sass中是可以使用的，并且可以编译到CSS文件中
6. 嵌套规则
要按照HTML结构的嵌套关系，在scss文件中使用{ }嵌套着来写选择器
这样编译的时候就会按照嵌套的结果编译生成对应的CSS
好处：结构非常清晰，不用写很多选择器，还不用计算权重值的问题
易错点：
7. 编译路径是否是scss与css文件的上层文件夹test
8. 出现的路径中不要出现中文
9. 编译的过程受电脑性能的影响，有的电脑编译的比较快，有的慢，这个很正常
10. 如果两次测试不行，建议把cmd窗口关闭，重新再监听一次

4 sass的基本语法

• 变量的使用

为什么要用变量？有什么作用？
比如企业需要设置主题色，比如京东红，假设改版时需要将企业色更换，这时只需要改一个颜色的变量值就可以改掉全局的颜色，无需大量更改了
全局变量与局部变量
全局变量是直接写在scss文件中的，而局部变量是写在某个选择器{}中的
注意：变量在哪里声明，就在哪里使用，局部变量不可以被其它的外部选择器使用
变量的加载和读取顺序
必须要先定义变量，才能使用变量，否则会编译报错:
Undefined Variable未定义的变量

• 计算功能【了解】

  注意：虽然sass提供了变量计算的功能，但是由于系统I/O调用顺序，导致有的电脑可以快速计算并编译，有的报错或者直接不编译
  所以我们尽量不要使用sass来进行变量的计算，如需计算，推荐使用JS

• 父选择器

  在sass源码中，使用&就代表它的上一层父级选择器
  在嵌套写法使用中，我们经常使用&来给父选择器进行占位
  这样写就可以搭配伪类、伪元素一起使用，确保生成的选择器结构是正确的

/*.box>ul>li>a*/
.box {
	border: 1px solid #000;
	ul {
		list-style: none;
		li {
			height: 30px;
			a {
				text-decoration: none;
			}
              //方案2：使用&号，&就表示父级li,表示给父选择器占一个位置
              //注意：不加&是不行的，因为:hover前会多生成一个空格，伪类无效
			&:hover {
				background-color: #00f;
			}
		}
		/*方案1*/ 
		// li:hover {
		// 	background-color: #f00;
		// }
	}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

• 插值语句

上面我们学习到，变量可以保存css的值，但是我们不可以直接使用变量名作为选择器的名字，如果想要在CSS中使用SASS变量，就需要用#{ }包裹变量名，才可以使用，否则会报错。
格式： #{ 变量名 }

//.nav-item { }
//.list-item { }
//.carousel-item { }
$abc:10px;
$daohang:nav;
$liebiao:list;
//这样写会报错，因为$daohang会被看作是字符串而不是变量名
/*.$daohang-item { }*/
//给$daohang外加一层#{ }作为变量名就不会报错了
.#{$daohang}-item { }
.#{$liebiao}-item { }
1
2
3
4
5
6
7
8
9
10
11

5. 混合指令
   混合指令的语法
   @mixin 指令名 创建混合指令的语法
   @include 指令名 使用混合指令的语法
   注意：指令名是自定义的，但注意不要用数字开头
   注意：如果指令有参数，传参顺序必须与定义顺序一致
6. 继承
   效果：一个元素使用另外一个元素的全部样式，注意：继承不可以选择
   @extend 要继承的选择器名 表示使用继承，注意：选择器要写全
   继承会在编译之后形成群组选择器，更加优化
   如果要继承多个选择器，使用逗号连接即可
7. 占位符选择器%
   如%juxing这是一个选择器，其它元素可以选择继承此选择器的样式
   但注意，拥有%占位符的选择器是不会被编译到css文件中的

%juxing {
	width: 120px;
	height: 40px;
}
.box5 {
	@extend %juxing;
}
1
2
3
4
5
6
7

编译后生成的内容：

.box5 { width: 120px; height: 40px; }
1

8. 高级语法
   条件语句
   @if(判断条件){条件为真时}@else {条件为假}
   @if(判断条件1){条件1为真时}@else if(判断条件2){条件2为真时}@else{以上条件均不满足执行这}
   注意：多条件判断在sass中不能使用& | 要用关键词 and or
   条件判断方式> < >= <= !== ==等等这些都可以用
9. 循环语句
   @for $i from 1 to 5 { }
   @for 表示使用for循环
   $i 表示控制循环的循环变量i
   for循环每循环一次自增1，没有JS的for循环那么丰富，只能自增1
   from 1 to 5 表示1到5 但注意：不包含5
   from 1 through 5 表示1到5 但注意，包含结束值5