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

时间:2022-09-25 09:31:52

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

全局变量的影子

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

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

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

什么时候声明变量?

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

  1. 该值至少重复出现了两次;
  2. 该值至少可能会被更新一次;
  3. 该值所有的表现都与变量有关(非巧合)。

基本上,没有理由声明一个永远不需要更新或者只在单一地方使用变量。

[Sass]局部变量和全局变量的更多相关文章

  1. js方法入参或局部变量和全局变量重名,用来赋值全局变量会失败

    今天遇到个bug,最后终于知道原因了,js方法入参和全局变量重名,用入参赋值全局变量失败,就是说方法入参不能和全局变量重名. 现在下面的例子也说明,局部变量和全局变量不可以同名不光是入参,只要同名赋值 ...

  2. JavaScript局部变量和全局变量的理解

    原文链接:http://www.cnblogs.com/eric-qin/p/4166552.html JavaScript局部变量和全局变量的理解   1 2 3 4 5 6 7 8 9 10 &l ...

  3. 【C语言】C语言局部变量和全局变量

    目录: [局部变量] · 定义 · 作用域 · 生命周期 · 用static修饰局部变量 [全局变量] · 定义 · 作用域 · 生命周期 1.局部变量 · 定义 在函数(代码块)内部定义的变量称为局 ...

  4. JavaScript中局部变量与全局变量的不同

    JavaScript中局部变量与全局变量 我们知道,JavaScript的变量是松散型的变量,也就是说,其变量只需用var声明,其赋值的类型是不限定的.比如: var person=18; perso ...

  5. 理解LoadRunner中的局部变量和全局变量

    在C语言中,变量有效性的范围称变量的作用域.不仅对于形参变量,C语言中所有的量都有自己的作用域,按作用域范围不同,可分为局部变量和全局变量两种变量类型. 在LoadRunner中应用全局变量和局部变量 ...

  6. C语言局部变量和全局变量问题汇总

    1.局部变量能否和全局变量重名? 答:能,局部会屏蔽全局.要用全局变量,需要使用"::" 局部变量可以与全局变量同名,在函数内引用这个变量时,会用到同名的局部变量,而不会用到全局变 ...

  7. C语言入门(9)——局部变量与全局变量

    变量有效性的范围称变量的作用域.C语言中所有的量都有自己的作用域.变量说明的方式不同,其作用域也不同. C语言中的变量,按作用域范围可分为两种,即局部变量和全局变量.   局部变量 局部变量也称为内部 ...

  8. javascript 局部变量和全局变量

    刚开始学js,遇到了一个奇怪的问题,查找之后知道了答案 需要记住两句话 1 Javascript的变量的scope是根据方法块来划分的(也就是说以function的一对大括号{ }来划分).切记,是f ...

  9. python的局部变量,全局变量,类变量,实例变量

    定义: a.全局变量:在模块内.在所有函数外面.在class外面,这就是全局变量. b.局部变量:在函数内.在class的方法内(未加self修饰的),这就是局部变量. c. 静态变量:在class内 ...

随机推荐

  1. C#[Win32&WinCE&WM]应用程序只能运行一个实例:MutexHelper

    前言 在开发应用程序时,通常只让程序运行一个实例.所以,就要判断程序是否已经运行. 下面是我自己在项目中使用到,封装好的帮助类.有 普通的 C# 应用程序 和 Windows CE 和 Windows ...

  2. iptables之LOG目标 被拦截包分析

    iptables之LOG目标 问题 在iptables的INPUT链中发现有大量未知包被拦截,这种情况就有两种可能,一是自己的某个服务的iptables端口没有打开,二是服务器正在遭受攻击 分析 这就 ...

  3. poj3349 哈希

    这题目写了一上午,一直错,然后自己测试数据还都对.为什么呢,为什么呢,后来我才发现代码里有一行free(tmp)...在55行那里... #include <stdio.h> #inclu ...

  4. AUPE学习第八章------进程控制

    每个进程都有一个非负整形表示的唯一进程ID. init进程是一号进程,是第一个用户态的进程.它负责内核启动以后启动一个unix系统, 它读取的配置文件一般在/etc/rc*./etc/inittab. ...

  5. DataTable转换为Model实体对象

    记得在学校的时候,接触得最多的就是SqlHelper,每次在读取的时候不管是DataTable还是DataReader转换为实体对象的时候是最恼火的,因为要写很多代码,而且没有什么意义.后面接触到了反 ...

  6. HW3&period;9

    import java.util.Scanner; public class Solution { public static void main(String[] args) { Scanner i ...

  7. 20160314 Servlet 入门

    一.Servlet 1.sun提供的一种动态web资源开发技术.本质上就是一段java小程序.可以将Servlet加入到Servlet容器中运行. *Servlet容器 -- 能够运行Servlet的 ...

  8. Sql Server使用正则表达式

    近日因项目需求,需要在sql server中用到正则表达式,因Sql Server本身并不支持正则表达式,需要用到Clr函数. 在此记录一下步骤,与大家共享,虽然写的是原创,但有参考网上的文章. 1. ...

  9. 我的Python成长之路---第八天---Python基础(25)---2016年3月5日(晴)

    多进程 multiprocessing模块 multiprocessing模块提供了一个Process类来代表一个进程对象 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 ...

  10. gnome配置

    1.gome-tweak-tool    gnome调校工具 2.gnome-shell插件(在gome-tweak-tool中) 可在https://extensions.gnome.org/中下载 ...