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下创建项目文件夹test2. 在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;
        // }}}

• 插值语句

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

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

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

%juxing{width: 120px;height: 40px;}.box5{@extend %juxing;}

编译后生成的内容：

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

1. 高级语法 条件语句 @if(判断条件){条件为真时}@else {条件为假} @if(判断条件1){条件1为真时}@else if(判断条件2){条件2为真时}@else{以上条件均不满足执行这} 注意：多条件判断在sass中不能使用& | 要用关键词 and or 条件判断方式> < >= <= !== ==等等这些都可以用
2. 循环语句 @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