Sass基础学习(二)

嵌套属性
嵌套属性是指我们在进行开发过程中,往往一个属性会有多种设置,在开发过程中我们可以使用嵌套属性的方式令样式设置简单化,语法样式是属性:{不同的样式值;},编译之后的css样式会分解出来,得到我们易懂易看的样式,提高了开发效率。
在这里插入图片描述
混合-Mixins
1、 Mixin相当于是定义好的样式,可以在任何地方重复使用它。
2、 在定义mixin时的语法样式是: @mixin 名字 (参数1,参数2……){…… }
3、 定义mixin,重写css样式时用@include (mixin定义的名字)即可调用,编译之后的css样式如右边显示。在这里插入图片描述
Mixins里的参数
@mixin 名字(参数)中的参数命名是:$属性,在@mixin中设置样式时,属性值可直接引用参数,在样式引用时@index引用,后面的属性引用直接按照参数顺序输入属性值,也可以是属性+属性值的方式,编译之后效果一致。在这里插入图片描述
继承/扩展-inheritance
所谓继承和扩展就是在其他类中可以使用@extend可以继承某些类里面的样式,编译之后,相同样式的会成为群组共同拥有相同样式值,另外设置的则会单独编译展现。扩展则是使用了相同类的扩展之后,也会扩展相应的样式。在这里插入图片描述
Partials与@import
@import我们都熟悉,这是引用文件的函数,在sass之中也不例外,我们可以使用@import来引用当前文件之外的css样式,在sass中引用外部文件就相当于把css文件集合起来,每一个部分形成了一个partials,我们建立一个partials时,用_名字.scss格式,因为他有下划线开头,所以是编译不出来的,在scss文件设置样式,通过引用则可以进行编译,从而达到引用外部css样式效果。在这里插入图片描述
数据类型-data type
注释有三种方式,但是需要注意的是单行注释不会出现在编译之后的css文件,多行注释会出现在编译过后的css样式,但是不会出现在压缩格式的编译css样式,强制注释则是多了一个“!”即使是压缩的css格式,也会出现在编译过后的css样式中。在这里插入图片描述
数字
1、 在命令行工具中输入“sass -i”打开数据类型(data-type)测试,数据类型有很多种:数字、字符串、列表(多个属性值组成)、颜色等。在这里插入图片描述
2、 数字类型就和普通数字一样,在sass之中带有“px\em”等的样式也属于数字类型,可以进行加减乘除运算。在这里插入图片描述
数字函数
数字函数中有abs()->绝对值;round()->四舍五入;ceil()->进位;floor->退位;min->最小值;max->最大值。在这里插入图片描述
字符串
字符串可以用“+”、“-”“/”来进行字符串的连接,但是使用“*”则会报错。在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值