发表于： 2018-12-05 21:05:19

1 820

今天完成的事情：

1、今天对sass有了一定的了解，也试着着手制作，感觉有的地方还是有些不熟练，还是要多多练习。

2、今天完成了禅道的拆分，跟着禅道进行任务，效率还是很高的。

明天计划的事情：

1、明天开始继续做任务，争取早日完成。

遇到的问题：

1、今天主要还是学习理论知识多一点，没有遇到什么实质性的问题。

收获：

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

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

全局变量与局部变量

先来看一下代码例子：

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

随笔- 62 文章- 0 评论- 0

[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 对于定义变量都是很有帮助的。

全局变量的影子

当在局部范围（选择器内、函数内、混合宏内...）声明一个已经存在于全局范围内的变量时，局部变量就成为了全局变量的影子。基本上，局部变量只会在局部范围内覆盖全局变量。

上面例子中的 em 选择器内的变量 $color 就是一个全局变量的影子。

//SCSS $color: orange !default;//定义全局变量 .block {   color: $color;//调用全局变量 } em {   $color: red;//定义局部变量（全局变量 $color 的影子）   a {     color: $color;//调用局部变量   } }

什么时候声明变量？

我的建议，创建变量只适用于感觉确有必要的情况下。不要为了某些骇客行为而声明新变量，这丝毫没有作用。只有满足所有下述标准时方可创建新变量：