sass变量

AlexTuan 发布于2019-04-23 13:23 / 1824人阅读

摘要：普通变量的普通变量定义之后可以在全局范围内使用。目前的变量范围饱受诟病，所以才有了这个全局变量。目前变量机制在选择器中声明的变量会覆盖外面全局声明的变量。

sass变量用法

1、sass变量必须以$符开头，后面紧跟着变量名

2、变量值和变量名之间就需要使用冒号(:)分隔开（就像CSS属性设置一样）

3、如果值后面加上!default则表示默认值

默认变量

sass的默认变量：仅需要在值后面加上!default即可。

scss.style

css.style

默认变量解说：

sass的默认变量：

一般是用来设置默认值，然后根据需求来覆盖的

覆盖方式：

只需要在默认变量之前重新声明下变量即可

编译后的line-height为2，而不是我们默认的1.5。

普通变量

sass的普通变量：定义之后可以在全局范围内使用。

scss.style

css.style

特殊变量

定义的变量都为属性值，可直接使用，但是如果变量作为属性或在某些特殊情况下等则必须要以#{$variables}形式使用。

scss.style

css.style

多值变量

多值变量分为list类型和map类型:

list类型有点像js中的数组

map类型有点像js中的对象

list

list数据可通过空格，逗号或小括号分隔多个值，可用nth($var,$index)取值。关于list数据操作还有很多其他函数如length($list)，join($list1,$list2,[$separator])，append($list,$value,[$separator])等，具体可参考sass Functions（搜索List Functions即可）

定义

scss.style

css.style

map

map数据以key和value成对出现，其中value又可以是list。

格式为：$map: (key1: value1, key2: value2, key3: value3);。

可通过map-get($map,$key)取值。

关于map数据还有很多其他函数如map-merge($map1,$map2)，map-keys($map)，map-values($map)等，具体可参考sass Functions（搜索Map Functions即可）

定义

scss.style

css.style

全局变量

在变量值后面加上!global即为全局变量。

这个目前还用不上，不过将会在sass 3.4后的版本中正式应用。目前的sass变量范围饱受诟病，所以才有了这个全局变量。

目前变量机制

在选择器中声明的变量会覆盖外面全局声明的变量。(这也就人们常说的sass没有局部变量)

scss.style

css.style

启用global之后的机制

请注意，这个目前还无法使用，所以样式不是真实解析出来的。

scss.style

css.style

云服务器私有云 sass 多云管理 sass sass 混合云部署 iaas paas sass

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/1802.html

Sass

摘要：同样的在下安装有多种方法。这样的文件，命名规范是以下划线开头的，这样的文件不会被编译成文件。这个特性现在正被众多开发者滥用。就是取值的一种特殊形式，符合特殊用法。函数名称参数列表数据处理继承允许一个选择器，继承另一个选择器。 sass介绍 • SASS是一种CSS的开发工具，提供了许多便利的写法，大大节省了设计者的时间，使得CSS的开发，变得简单且可维护。 • SASS的本...

StonePanda 2019-08-30 14:04 评论0 收藏0
Sass

摘要：同样的在下安装有多种方法。这样的文件，命名规范是以下划线开头的，这样的文件不会被编译成文件。这个特性现在正被众多开发者滥用。就是取值的一种特殊形式，符合特殊用法。函数名称参数列表数据处理继承允许一个选择器，继承另一个选择器。 sass介绍 • SASS是一种CSS的开发工具，提供了许多便利的写法，大大节省了设计者的时间，使得CSS的开发，变得简单且可维护。 • SASS的本...

pcChao 2019-08-22 15:01 评论0 收藏0
Sass

摘要：同样的在下安装有多种方法。这样的文件，命名规范是以下划线开头的，这样的文件不会被编译成文件。这个特性现在正被众多开发者滥用。就是取值的一种特殊形式，符合特殊用法。函数名称参数列表数据处理继承允许一个选择器，继承另一个选择器。 sass介绍 • SASS是一种CSS的开发工具，提供了许多便利的写法，大大节省了设计者的时间，使得CSS的开发，变得简单且可维护。 • SASS的本...

alexnevsky 2019-08-01 18:40 评论0 收藏0
细谈sass和less中的变量及其作用域

摘要：如果存在一个同名的全局变量，这个全局变量也不会被重写，除非同名的局部变量被声明时使用关键字。博客原文地址：Claiyre的个人博客 https://claiyre.github.io/博客园地址：http://www.cnblogs.com/nuannuan7362/如需转载，请在文章开头注明原文地址------------------------------------------...

wslongchen 2019-08-29 13:08 评论0 收藏0
vue入门文章

摘要：本来想自己写一篇关于入门的文章。后面可能在这篇文章基础上，有所内容的增加。预处理器定义了一种新的专门的编程语言，编译后成正常的文件。本来想自己写一篇关于vue入门的文章。但是看到链接的文章后，觉得写得太详细了，实在有保存下来的必要。后面可能在这篇文章基础上，有所内容的增加。 CSS预处理器定义了一种新的专门的编程语言，编译后成正常的CSS文件。为CSS增加一些编程的特性，无需考虑浏...

seanHai 2019-08-29 17:06 评论0 收藏0
[Sass]-Sass入门

摘要：未编译样式多继承链式继承占位选择器编译后样式中使用声明混合，可以传递参数，参数名以符号开始，多个参数以逗号分开，也可以给参数设置默认值。初识Sass SASS简介 sass是一种css预处理器，用专门的编程语言，进行网页样式设计，然后再编译成正常的CSS文件。Sass是CSS3的扩展，它增加了嵌套规则，变量，mixins，选择器继承等等。Sass生成格式良好的CSS，使样式表更易于组...

godiscoder 2019-08-29 13:27 评论0 收藏0