Sass扩展的安装与基本语法规则

Hbuilder x中的sass扩展安装方法

vue中sass编译扩展安装

SASS的基本语法规则

一: 注释规则

二: 嵌套规则

三: 变量的使用

 四: 父元素选择器

 五: 插值语句

 六: 混合指令@mixin

 七: 继承@extend和占位符%

八: 高级语法 

1.计算功能

2. 条件语句 

3. 循环语句@for

Sass的安装步骤

Hbuilder x中的sass扩展安装方法

1. 确保自己的电脑是联网状态
2. 打开Hbuilder,点击”工具”->”插件安装”->”安装新插件”->”前往插件市场安装”
3. 在打开的页面中，找到Sass插件，点击“下载”
4. 在打开的页面中，选择“使用HBuilderX导入插件”
5. 此时提示需要登录，如果没有账号，可以先注册一个账号登录上去
6. 登录后，继续选择页面中的“使用HBuilderX导入插件”
7. 提示需要安装HBUilder新版本，点击“继续”
8. 弹窗提示“是否打开HBuilderX”,选择“打开”
9. Hbuilder中提示“是否安装Sass插件？”点击“是”等待安装成功即可

可以在“工具”->“插件安装”->“已安装插件”中找到Sass说明安装成功，如下图

 点击安装会请求打开Hbuilder ，同意就可

 安装成功后，可再次点击安装插件查看是否已安装。

进行一些配置方便使用

 也可以手动编译

 1.scss是我们自己创建的     1.css是编译自动生成的，如果生成了同名的css文件，恭喜你一切顺利

vue中sass编译扩展安装

就非常简单了，非常简单

SASS的基本语法规则

注意早期的文件后缀名是（.sass）, 3.0版本后不再使用  改为(.scss)，学习sass需要一定的编程语言基础，变量，继承，条件判断，逻辑运算等知识

一: 注释规则

1. /*  */ css的注释样式,  sass中也可以使用,并且可以编译
2. //  sass的注释方式, 这种方式也能在sass中使用, 但是不会编译到css中

二: 嵌套规则

        按照html结构的嵌套关系,在scss文件中使用{}套鞋选择器

三: 变量的使用

1.  用$声明  比如变量a   $a
2. 变量需要先声明在使用,不存在变量提升
3. 有作用域 {}    在括号里面声明的变量,外部不可使用
4. 如下图,变量不仅只能保存一个值
5. 

 四: 父元素选择器

1. & 代表父元素
2. 通常搭配伪类和伪元素一起使用
3. 
4. 

 五: 插值语句

1. 上面的用$声明的变量不能直接在选择器中使用
2. 如果想在选择器上使用变量需要用到插值语法
3. #{变量名}
4. 

 六: 混合指令@mixin

1. 声明:  @mixin 名字{}    使用:  @include 名字
2. 多个元素样式相同,或者样式属性相同,只是属性值不同的情况可以使用
3. 可以传递变量
4. 

 七: 继承@extend和占位符%

1. 一个元素继承另一个元素的全部属性
2. @extend
3. 

八: 高级语法 

1.计算功能

1. 加减法：数值可以带单位，但是需要运算的单位相同，如果不同就编译不通过。                          注意：减号(-)的前后一定要有空格，否则会以为是变量名，编译不通过。
2. 乘法：只能有一个数值带单位，另外一个数值只能是不带单位的数字，如果两个都带了单位，编译不通过。
3. 除号(/)在CSS中是一个特殊的符号，不能直接写，会不生效，需要在外面加小括号。
4. 如果想要把/看作是除号，可以满足以下任意一个条件：
   • 数值是另外一个数学表达式的一部分
   • 数值存储在一个变量中或者函数的返回值
   • 数值被小括号()包含

不管是加减乘除，都建议在外面加上小括号，这种书写方式简洁明了，方便维护，希望大家也规范一下自己的书写方式（10px + 20px）、（20px * 2）

2. 条件语句 

1.  @if（条件）{}
2.  @if（条件）{}@else{}
3.  @if（条件）{}@else if（条件）{}@else{}
4. 在sass中多条件判断使用关键词   and(与)     or(或)
5. 可以是使用 >  <  >=  <=  ==  !=
6. 

3. 循环语句@for

1. @for $i from 1 to 5 {}                不包含5
2. @for $i from 1 through 5 {}        包含5
3. 

 sass基本的语法规则就这些啦,多去练习练习吧!