Sass简易指南之基本语法详析：变量大作战

最新推荐文章于 2023-08-02 23:58:16 发布

置顶 GeCoder

最新推荐文章于 2023-08-02 23:58:16 发布

阅读量269

点赞数

分类专栏：程序猿软件开发大数据互联网 java 文章标签： js sass css 全局变量局部变量

本文链接：https://blog.csdn.net/GeCoder/article/details/80110357

版权

java 同时被 3 个专栏收录

11 篇文章 0 订阅

订阅专栏

程序猿

8 篇文章 0 订阅

订阅专栏

软件开发

8 篇文章 0 订阅

订阅专栏

声明变量

定义变量的语法：

在有些编程语言中（如，JavaScript）声明变量都是使用关键词“var”开头，但是在 Sass 不使用这个关键词，而是使用大家都喜欢的美元符号“$”开头。

上图非常清楚告诉了大家，Sass的变量包括三个部分：

1.声明变量的符号“$”

2.变量名称

3.赋予变量的值

来看一个简单的示例，假设你的按钮颜色可以给其声明几个变量：

$brand-primary: darken(#428bca, 6.5%) !default; // #337ab7$btn-primary-color : #fff!default;$btn-primary-bg : $brand-primary !default;$btn-primary-border :darken($btn-primary-bg, 5%) !default;

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

普通变量

定义之后可以在全局范围内使用。

$fontSize:12px; body{ font-size:$fontSize; }

编译后的css代码：

body{font-size:12px; }

默认变量

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

$baseLineHeight:1.5!default; body{ line-height: $baseLineHeight; }

编译后的css代码：

body{line-height:1.5; }

sass的默认变量一般是用来设置默认值，然后根据需求来覆盖的，覆盖的方式也很简单，只需要在默认变量之前重新声明下变量即可。

$baseLineHeight:2; $baseLineHeight: 1.5 !default; body{ line-height: $baseLineHeight; }

编译后的css代码：

body{line-height:2; }

可以看出现在编译后的 line-height 为 2，而不是我们默认的 1.5。默认变量的价值在进行组件化开发的时候会非常有用。

变量的调用

在 Sass 中声明了变量之后，就可以在需要的地方调用变量。调用变量的方法也非常的简单。

比如在定义了变量

$brand-primary: darken(#428bca, 6.5%) !default; // #337ab7$btn-primary-color: #fff!default;$btn-primary-bg : $brand-primary !default;$btn-primary-border :darken($btn-primary-bg, 5%) !default;

在按钮 button 中调用，可以按下面的方式调用

.btn-primary{ background-color: $btn-primary-bg; color: $btn-primary-color; border: 1pxsolid $btn-primary-border; }

编译出来的CSS:

.btn-primary{ background-color: #337ab7; color: #fff; border: 1px solid #2e6da4; }

[Sass]局部变量和全局变量

Sass中变量的作用域在过去几年已经发生了一些改变。直到最近，规则集和其他范围内声明变量的作用域才默认为本地。如果已经存在同名的全局变量，从 3.4 版本开始，Sass 已经可以正确处理作用域的概念，并通过创建一个新的局部变量来代替。

全局变量与局部变量

先来看一下代码例子：

//SCSS$color:orange !default;//定义全局变量(在选择器、函数、混合宏...的外面定义的变量为全局变量) .block { color: $color;//调用全局变量 } em {$color: red;//定义局部变量 a { color: $color;//调用局部变量 } } span { color: $color;//调用全局变量 }

css的结果：

//CSS.block { color: orange; } em a { color: red; } span { color: orange; }

上面的示例演示可以得知，在元素内部定义的变量不会影响其他元素。如此可以简单的理解成，全局变量就是定义在元素外面的变量，如下代码：

$color:orange!default;

$color就是一个全局变量，而定义在元素内部的变量，比如 $color:red; 是一个局部变量。

除此之外，Sass 现在还提供一个 !global 参数。!global 和 !default 对于定义变量都是很有帮助的。我们之后将会详细介绍这两个参数的使用以及其功能。