认识Sass

 sass中文文档:

Sass: Sass 文档

1.     sass的安装步骤

   

1.      卸载冲突的Node.js

   

(1)    win+R输入control,找到电脑上的卸载软件,找到Node.js,右键”卸载”

   

(2)    win+R输入cmd,输入命令:node -v查看结果。

   

如果提示: 'node' 不是内部或外部命令,也不是可运行的程序,说明【卸载成功】

   

如果提示版本号,说明没有卸载成功,需要继续卸载

   

2.      安装插件:

   

(1)    确保自己的电脑是联网状态

   

(2)    打开HBuilder,点击”工具”->”插件安装”->”安装新插件”->”前往插件市场安装(P)”

   

(3)    在打开的页面中,找到Sass插件,点击”下载”

   

(4)    在打开的页面中,选中”使用HBuilderX导入插件”

   

(5)    此时提示需要登录,如果没有账号,可以先注册一个账号再登录

   

(6)    登录后,继续选择页面上的”使用HBuilderX导入插件”

   

(7)    提示需要安装HBuilder新版本,点击”继续”

   

(8)    弹窗提示”是否打开HBuilder”选择”打开”

   

(9)    HBuilder提示”是否安装sass插件?”点击”是”等待安装成功即可

   

(10) 可以在”工具”->“插件安装”->”已安装插件”中找到sass,说明安装成功

   

2.     sass的简介

   

平时写样式使用的是CSS,sass可以看作是CSS的“预处理器”,是一种专门的CSS编程语言

   

增加了变量、函数、嵌套、判断、循环等等的用法,让CSS编写更便捷,清晰

   

   

sass的语法和版本

   

.sass是早期sass技术文件的后缀名,3.0版本之前一直使用的是它,文件编辑语法严格

   

3.0版本之后,后缀名改成了.scss,这种后缀使用的就是CSS语法,学习成本大大降低

   

   

.scss文件必须通过编译,生成同名的.css文件,才可以被html使用

   

3.     入门案例

   

步骤:

   

1.      在目录下创建scss文件夹

   

2.      在scss文件夹下创建01.scss文件,代码: body{ background-color:#f00; }

   

3.      选择“工具”->“外部命令”->“scss/sass编译”->“编译scss/sass”

   

4.      会在scss文件夹下看到生成了一个同名的01.css文件,里面的内容与scss文件内容一致

   

4.     HBuilder中配置sass插件自动编译效果

   

1.      选择“工具”->“外部命令”->“scss/sass编译”->“插件配置”

   

2.      在打开的package.json文件中,修改第25行和27行的内容

   

"key":  "ctrl+s" 表示通过保存快捷键触发                                                                                                     
    

   

"onDidSaveExecution":  true 表示开启自动编译

   

3.      保存修改后的配置文件,重启HBuilder即可

   

4.      可能有的同学重启后自动编译未生效,那么需要再自己手动编译1~2次,就可以自动编译了

   

5.  sass规则

1.     注释规则

   

//comment注释  sass的注释方式,这种方式只能在scss文件中使用,不会编译到CSS文件中

   

/*comment注释*/ CSS的注释方式,sass中可以使用,并且可以编译到CSS文件中

   

2.     sass变量

   

为什么要使用变量?

   

比如企业要设置主题色,改版时需要将所有的企业色改掉,如果我们使用了变量,那么只需要修改变量的颜色就可以改掉出现的所有色值,无需大量更改了

   

所以,变量用于保存需要重复出现的值,方便代码的后期维护

   

   

变量的加载和读取顺序

   

必须先创建变量,再使用变量,否则报错

   

   

全局变量和局部变量

   

全局变量是直接写在scss文件中的

   

局部变量是写在某个选择器的{}中的,只有在作用域内才能使用,出了此选择器就用不了了

   

3.     父选择器

   

使用&就代表它的上一层选择器,在嵌套写法中,使用父选择器&进行站位

   

搭配伪类、伪元素一起使用,保证选择器的结构正确

   

   

.box {

&:hover { }

&>span{ }

}

   

等价于: .box:hover{}   .box>span{}

   

4.     插值语句

   

格式: #{变量名}

   

上面我们学习到,变量可以保存css的值,但是我们不能直接在css选择器中直接使用变量

   

如果需要在css选择器中通过变量名插入变量的值,就需要用#{ }包裹变量名,才可以使用,否则报错

   

$daohang:nav;

$liebiao:list;

.#{$daohang}-item { color:#f00;}

.#{$liebiao}-item { color: #f00;}

   

5.     混合指令

   

混合指令的语法:

   

@mixin 创建混合指令的语法,指令的名称自定义,但注意不能用数字开头

   

@include 使用混合指令的语法

   

   

注意:混合指令可以定义参数,使用时要按照定义的顺序依次传参

   

6.     继承

   

格式:@extend 被继承的选择器

   

继承:一个元素想要使用另一个元素的全部样式

   

继承后会编译形成群组选择器,更加优化

   

我们还可以同时继承多个选择器的样式,使用逗号隔开

   

注意:写的是完整的选择器,不是只有名字!  如:@extend .box2,.box4;

   

7.     占位符选择器%

   

如:%juxing这是一个选择器,这个选择器的样式可以被继承走

   

但注意:使用占位符的选择器的样式不会被编译

   

%juxing {

    width: 120px;

    height: 40px;

}  这个样式只在scss文件中有,不会编译到css中!

.box5 {

    @extend  %juxing;

}

   

  • 23
    点赞
  • 14
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值