sass使用

 

安装：npm install sass

引入：import ‘...sass||...scss’

一．介绍：sass是对css的扩展，让css语言更加强大，优雅。它在css语法的基础上增加了变量，嵌套、混合、导入等高级功能。

二．功能介绍：

1.定义变量

1>变量的使用:变量以美元符号$开头，赋值方法与css属性的写法一样（如下）

 

 

  2>全局变量，局部变量（如图）

（图1全局变量）

 

（图2局部变量）

 

注：1.当全局变量遇到局部变量的时候，局部变量会覆盖全局变量

2.sass对于中划线与下划线是不强制识别的

 

2.数字运算

1>加法运算+

 

2>乘法运算*

 

3>除法运算/

 

注：一下三种情况被视为除法运算符号：

（1）如果值，或值的一部分，是变量或者函数的返回值。

（2）如果值被圆括号包裹

（3）如果值是算数表达式的一部分

 

3.嵌套

1>嵌套规则：sass允许将一套css样式嵌套进入另一套样式中，内层的样式将被外层的选择器作为父级选择器。它可以避免重复书写父选择器，使结构更加清晰明了，样式的可读性更高。（如图）

 

2>父选择器&

嵌套应用于:hover的伪类时则benign简单地使用嵌套了，这时候就需要使用父选择器&，父选择器&可以简单地理解为用&来表示父标签。

 

3>属性嵌套

有些css属性遵循相同的命名空间，比如background-color，background-size等，都以background作为属性的命名空间。为了便于管理这样的属性，同事也为了避免了重复输入，sass允许将属性嵌套在命名空间中。

 

4.混合器

1>@mixin混合器可以包含选择器和选择器中的属性，通过@include来传值，这样就可以非常方便的服用需要常用的样式了。

 

 

5.选择器继承

选择器继承是说一个选择器可以继承另一个选择器定义的所有样式。这个通过@extend语法实现，如果页面的header和footer的样式有共同之处，便可以在footer使用@extend来继承header的样式，免去重复书写。

 

 

 

 

 

 

参考文献：http://sass.bootcss.com/docs/sass-reference/

https://www.w3cschool.cn/sass/sass_overview.html

转载于:https://www.cnblogs.com/lixuehong/p/11206866.html