嵌套属性
嵌套属性是指我们在进行开发过程中,往往一个属性会有多种设置,在开发过程中我们可以使用嵌套属性的方式令样式设置简单化,语法样式是属性:{不同的样式值;},编译之后的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->最大值。
字符串
字符串可以用“+”、“-”“/”来进行字符串的连接,但是使用“*”则会报错。
Sass基础学习(二)
最新推荐文章于 2023-09-11 16:28:28 发布