文档章节

sass揭秘之变量

小致dad
 小致dad
发布于 2016/12/04 16:20
字数 2639
阅读 12
收藏 0
点赞 0
评论 0

刚开始sass的人,也许其最大的抱怨就是sass的变量了,尤其是那些了解less变量的,更是会说sass的变量做得不如less的变量好,less中有明显的全局变量和局部变量之分,但是到sass这边来,好像有点乱了,分不清了。其实不管sass的变量还是less变量都是有其设计的原理的,有着不一样的科学性,下面我们简单来了解下。

全局变量和局部变量

要了解sass或less的变量,有必要先了解下js的变量定义,先来一段js的代码:

var a = 1;
(function(){
    a = 5;
})();
console.log(a);//5

上面这段代码,匿名函数里面的a因为没有使用var关键字来定义,所以当我们在函数外打印a的时候,得到的是5,改变了一开始定义的1

var a = 1;
(function(){
    var a = 5;
})();
console.log(a);//1

而这段代码,匿名函数里面的a使用了var关键字来定义,所以当我们在函数外打印a的时候,得到的是1,一开始定义的值。

如果你明白了上面两个的区别,那下面就好办了,如果你还没有明白,那么建议先去看下js的变量申明。 也许你现在已经看出眉目了,其实sass的变量设计用的是上面两段代码中的第一段思想,即在局部不使用var来申明,而less用的是第二段思想,即局部使用var来申明,这就是很多人所说的为什么sass没有局部变量。我们来两段代码测试下:

sass版

$color:red;
p{
    $color:blue;
    color:$color;//blue
}
a{
    color:$color;//blue
}

less版

@color:red;
p{
    @color:blue;
    color:@color;//blue
}
a{
    color:@color;//red
}

简单总结下:如果全局申明了一个变量a,sass中如果使用到局部中是属于改变a的值,所以后来所有的都是改变之后的值;而less中使用到局部变量则属于在局部重新定义a的值,不影响其他地方。说到底,其实sass和less的变量其实都是js变量的表现形式,两者都有其科学性,只是设计思路不同而已。

当然说到这里,可能有人会说了,那sass就没有局部变量喽。其实不然,正确的说法应该是:在有全局变量的情况下,sass是没有局部变量的。意思是如果要看到sass的局部变量,请不要设置全局变量。代码为证:

p{
    $color:blue;
    color:$color;//blue
}
a{
    color:$color;//$color未定义
}

这是一个没有定义全局变量$color的例子,上面的p元素的color为blue,而a里面就会报错因为$color没定义,它没有获取到p元素里面定义的那个$color变量,这证明了其实sass同样存在局部变量,只是这个前提是得没有全局变量。

相信到这里,大家应该对sass的变量有所了解,不至于那么迷惑吧。下面我们再来两段代码:

p{
    $color:blue;
    color:$color;//blue

    a{
        color:$color;//blue
    }   
}

这一段代码中,a嵌套在p中,然后在p元素中定义了$color这个变量,a里面是可以访问到$color变量的。

p{
    $color:blue;
    color:$color;//blue

    a{
        $color:red;         
        color:$color;//red
    }

    background-color:$color;//red

    span{
        color:$color;//red
    }
}
div{
    color:$color;//$color未定义
}

估计这里有人迷惑了,我们来分析下吧:因为sass的代码是从上到下解析的,所以这段代码执行到p的color值的时候颜色是上面的blue色,然后由于我们在a中又改变了$color的值为红色,所以后面所有p元素范围内用到$color这个变量的都为红色,这反应到我们后来的bgcolor和span的color上面,而p元素之外还是未定义。

这里吐个槽吧,其实个人觉得正是由于这个,使得开发sass的小心定义变量,以避免污染;而less呢却刚好相反,估计到时候就是全局局部满天飞的情况,代码一团糟。你想选择哪种呢?

关于sass的全部变量和局部变量就说到这,既然这篇文章的标题说了是sass变量揭秘,光这全局变量和局部变量肯定是满足不了大家的胃口的,下面我们继续说下sass变量的另一个创新点,变量默认值。

变量默认值!default

可能很多人对这个不是很熟悉,或者觉得这个其实就是个幌子,挂羊头卖狗肉的家伙。其实不然,它的来头可不小,而且是非常的科学,我是佩服的五体投地,因为它从根本上解决了困扰我多年的css组件化开发。简单来两段比较的代码:

无!default

$color:red;
$color:blue;
p{
    color:$color;//blue
}

有!default

$color:red;
$color:blue !default;
p{
    color:$color;//red
}

上面说了,sass编译css是从上到下的,后面会覆盖前面的,所以第一段无!default的解析的是blue,而第二段代码由于有了!default,打破了这个规则,使用了前面定义的red。有意思吧,当然这样的使用是体现不了它伟大的价值的。

简单介绍下它的作用吧:假设变量申明带有!default,那么如果在此申明之前没有这个变量的申明,则用这个值,反之如果之前有申明,则用申明的值。当然如果你先!default申明,然后再申明一次,那就没什么意思了,这就是基本的变量覆盖,第一次申明的有无!default都一样。所以你要区分这两种情况:

//第一种,使用默认值 
//变量申明带有!default,但是之前没有这个变量的申明 
$color:blue !default; 
p{ color:$color;//blue }
//第二种,使用前面定义的值
$color:red; 
//变量申明带有!default,但是前面还有这个变量的申明
$color:blue !default;
p{
    color:$color;//red
}

//第三种错误的用法,先!default申明
$color:red !default;
$color:blue;

上面的第三种错误用法其实和下面的这个覆盖写法是一样一样的:

//覆盖写法
$color:red;
$color:blue;

能一口气看到这里的,应该有点时间,建议简单活动下,摇摇脑袋,伸伸懒腰,因为下面的更加精彩。

其实长久以来,css之所以不能组件化开发,有两大原因:第一个是@import的样式不能合并在一个文件中(这里排除使用压缩工具来合并);第二个问题就是这里说到的变量问题了。感谢sass帮我们全解决了,大笑三声。

现在假设我们有个scss文件,这里暂且叫做_imgstyle.scss,代码如下:

// 变量
//---------------------------------
$imgStyleBorder:         1px solid #ccc !default;
$imgStylePadding:        2px !default;
$imgStyleRadius:         8px !default;

// mixin
//---------------------------------
@mixin img-border($border:$imgStyleBorder,$padding:$imgStylePadding){
    border: $border;
    padding: $padding;
}

@mixin img-rounded($radius:$imgStyleRadius){
    border-radius:$radius;  
}

//样式
//---------------------------------
.img-border{
    @include img-border;
}

.img-rounded{
    @include img-rounded;
}

接下来我们要在style.scss这个文件里面调用_imgstyle.scss,代码如下:

//导入_imgstyle.scss
@import 'imgstyle';

现在问题来了,如果我们对默认的padding为2px不满意,要改为5px,我们有如下方法:

方法一:重新覆写

//导入_imgstyle.scss
@import 'imgstyle';

.img-border{
    padding:5px;
}

解析成的css:

.img-border {
  border: 1px solid #cccccc;
  padding: 2px;
}
.img-rounded {
  border-radius: 8px;
}
.img-border {
  padding: 5px;
}

方法二:改变@include的参数

//导入_imgstyle.scss
@import 'imgstyle';

.img-border{
    @include img-border($imgStyleBorder,5px);
}

解析成的css:

.img-border {
  border: 1px solid #cccccc;
  padding: 2px;
}
.img-rounded {
  border-radius: 8px;
}

.img-border {
  border: 1px solid #cccccc;
  padding: 5px;
}

显而易见,上面的方法都会产生重复的代码,不科学啊。当然这时候可能有人会说了,你脑子浸水了呗,直接在_imgstyle.scss文件中,修改$imgStyleBorder为5px不就得了。当然如果你要的是每个项目使用这个样式的时候都拷贝一份这个,然后打开把变量修改成你要的值,那么我只好承认我脑子浸水了,不仅脑子浸水,还得吐血了。

现在请上面那些山寨土鳖方法闪一边去,该我们的!default出场了,废话少说,上代码:

//申明$imgStylePadding为5px
$imgStylePadding:  5px;

//导入_imgstyle.scss
@import 'imgstyle';

解析成的css:

.img-border {
  border: 1px solid #cccccc;
  padding: 5px;
}

.img-rounded {
  border-radius: 8px;
}

无须去源文件中修改,且解析出来无重复代码,完美!这才是!default的价值,这为组件式开发,更改调用组件里面的变量的值带来了彻底的变化。如果less真没有这个变量的默认值的话,那less的同学们估计得伤心死了。

重量级的都介绍完了,下面把其他的一些小罗罗也简单介绍下吧。

变量后面加...

在css3出现以前,你是绝对没有看到过的,因为它就是为css3而设计的。css3在给css带来翻天覆地的变化之外,也给sass的@mixin传递参数带来纠结了。一般来说我们的@mixin传递的参数是以,来分隔的,但是css3的一些属性可以设置多个值,并且多个值以,分开,如box-shadow:0 0 3px rgba(0,0,0,0.3),inset 0 0 3px rgba(255,255,255,0.3);这让@mixin如何给box-shadow传递参数啊。所以这种变量后面加...的变量就出现了。

@mixin box-shadow($shadow...){
    -webkit-box-shadow:$shadow;
    -moz-box-shadow:$shadow;
    box-shadow:$shadow;
}

这样就完美解决了这个需求了,漂亮吧哈哈。注意这种变量加...的方式只出现在传递参数中,你可以看到上面的大括号里面的变量都是没有...。除了box-shadow,gradient也可以用,反正能使用多个值的属性里面都可以用。

变量用#{}包裹

一般来说,我们设置的变量都是用于属性值的,而如果用在属性或者选择器上,就得以#{}包裹起来了。

$btnClass: btn !default;
$borderDirection:  top !default;

.#{$btnClass}{
    border-#{$borderDirection}:1px solid #ccc;
}

解析成的css:

.btn{
    border-top:1px solid #ccc;
}

多个变量一起申明

其实这个还是很实用的,把多个相关的值写在一个变量里,然后通过nth($var,index)来获取第几个值。

$linkColor: red blue !default;

a{
    color:nth($linkColor,1);

    &:hover{
        color:nth($linkColor,2);
    }
}

解析成的css:

a {
    color: red; 
}
a:hover {
    color: blue; 
}

关于sass变量揭秘到此为止。如果你对sass比较感兴趣但是还不会,可以试试我们的sassGuide教程,如果已经开始使用sass了,欢迎试用sassCore这个库。

本文转载自:http://www.w3cplus.com/preprocessor/sass-basic-variable.html

共有 人打赏支持
小致dad
粉丝 112
博文 496
码字总数 549917
作品 0
济南
技术主管
Sass新手指南

本文根据Andrew Chalkley的《The Absolute Beginner’s Guide to Sass》所译,整个译文带有我们自己的理解与思想,如果译得不好或不对之处还请同行朋友指点。如需转载此译文,需注明英文出处...

xihun ⋅ 2014/02/26 ⋅ 0

sass笔记-2|Sass基础语法之让样式表更具条理性和可读性

这一篇主要详述保持sass条理性和可读性的3个最基本方法——嵌套、导入和注释。 零. 变量 变量本身的作用是为了保持属性值的可维护性,把所有需要维护的属性值放在同一个地方,快速更改,处处...

Stinson_Zhao ⋅ 2016/12/02 ⋅ 0

SASS/SCSS入门笔记

什么是SASS? SASS(Syntactically Awesome Stylesheets)是一种动态样式语言,为CSS融入了编程元素,提供了很多便利的写法,使得CSS的开发变得简单、可维护。先来回顾一下CSS,接触过WEB开发的...

桂圆_noble ⋅ 2016/08/02 ⋅ 0

sass 快速入门学习

什么是css预处理器   众所周知css并不能算是一们真正意义上的“编程”语言,它本身无法未完成像其它编程语言一样的嵌套、继承、设置变量等工作。   在程序员眼里,CSS是一件很麻烦的东西...

笔阁 ⋅ 2015/12/11 ⋅ 0

Sass 快速入门学习

什么是css预处理器   众所周知css并不能算是一们真正意义上的“编程”语言,它本身无法未完成像其它编程语言一样的嵌套、继承、设置变量等工作。   在程序员眼里,CSS是一件很麻烦的东西...

笔阁 ⋅ 2015/12/11 ⋅ 2

使用LESS或Sass重构CSS代码

作者 Werner Schuster 译者 杨晨 发布于 2009年7月28日 上午5时56分 在Web开发中,CSS的使用是非常普遍的,但滥用的情况也是屡见不鲜。LESS 和Sass 都是用Ruby实现的工具,可以帮助开发者写出...

晨曦之光 ⋅ 2012/03/09 ⋅ 0

Sass的基础姿势

SASS是什么 传统的CSS是一种单纯的描述性样式文件,然而SASS可以对CSS进行预编译处理。在SASS源码中可以使用变量、函数、继承等动态语言的特性,并且可以编译成CSS文件。 安装与使用 安装 由...

Mllitch ⋅ 2016/10/13 ⋅ 1

SASS入门教程及用法指南

作为前端开发人员,你肯定对css很熟悉,但是你知道css可以自定义吗?大家都知道,js中可以自定义变量,css仅仅是一个标记语言,不是编程语言,因此不可以自定义变量,不可以引用等等。面对这...

进步的蜗牛 ⋅ 2016/02/26 ⋅ 0

Sass入门介绍

CSS预处理器,用一种专门的语言进行页面Web样式设计,编译生成正常的CSS文件以供使用,可以让CSS更加简洁、适应性更强、可读性更佳、更易于代码的维护。 优秀的CSS预处理器语言包括Sass、LES...

刘尐六 ⋅ 2017/05/26 ⋅ 0

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

声明变量 定义变量的语法: 在有些编程语言中(如,JavaScript)声明变量都是使用关键词“var”开头,但是在 Sass 不使用这个关键词,而是使用大家都喜欢的美元符号“$”开头。 上图非常清楚...

GeCoder ⋅ 04/27 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Sqoop

1.Sqoop: 《=》 SQL to Hadoop 背景 1)场景:数据在RDBMS中,我们如何使用Hive或者Hadoop来进行数据分析呢? 1) RDBMS ==> Hadoop(广义) 2) Hadoop ==> RDBMS 2)原来可以通过MapReduce I...

GordonNemo ⋅ 49分钟前 ⋅ 0

全量构建和增量构建的区别

1.全量构建每次更新时都需要更新整个数据集,增量构建只对需要更新的时间范围进行更新,所以计算量会较小。 2.全量构建查询时不需要合并不同Segment,增量构建查询时需要合并不同Segment的结...

无精疯 ⋅ 59分钟前 ⋅ 0

如何将S/4HANA系统存储的图片文件用Java程序保存到本地

我在S/4HANA的事务码MM02里为Material维护图片文件作为附件: 通过如下简单的ABAP代码即可将图片文件的二进制内容读取出来: REPORT zgos_api.DATA ls_appl_object TYPE gos_s_obj.DA...

JerryWang_SAP ⋅ 今天 ⋅ 0

云计算的选择悖论如何对待?

导读 人们都希望在工作和生活中有所选择。但心理学家的调查研究表明,在多种选项中进行选择并不一定会使人们更快乐,甚至不会产生更好的决策。心理学家Barry Schwartz称之为“选择悖论”。云...

问题终结者 ⋅ 今天 ⋅ 0

637. Average of Levels in Binary Tree - LeetCode

Question 637. Average of Levels in Binary Tree Solution 思路:定义一个map,层数作为key,value保存每层的元素个数和所有元素的和,遍历这个树,把map里面填值,遍历结束后,再遍历这个map,把每...

yysue ⋅ 今天 ⋅ 0

IDEA配置和使用

版本控制 svn IDEA版本控制工具不能使用 VCS-->Enable Version Control Integration File-->Settings-->Plugins 搜索Subversion,勾选SVN和Git插件 删除.idea文件夹重新生成项目 安装SVN客户......

bithup ⋅ 今天 ⋅ 0

PE格式第三讲扩展,VA,RVA,FA的概念

作者:IBinary 出处:http://www.cnblogs.com/iBinary/ 版权所有,欢迎保留原文链接进行转载:) 一丶VA概念 VA (virtual Address) 虚拟地址的意思 ,比如随便打开一个PE,找下它的虚拟地址 这边...

simpower ⋅ 今天 ⋅ 0

180623-SpringBoot之logback配置文件

SpringBoot配置logback 项目的日志配置属于比较常见的case了,之前接触和使用的都是Spring结合xml的方式,引入几个依赖,然后写个 logback.xml 配置文件即可,那么在SpringBoot中可以怎么做?...

小灰灰Blog ⋅ 今天 ⋅ 0

冒泡排序

原理:比较两个相邻的元素,将值大的元素交换至右端。 思路:依次比较相邻的两个数,将小数放在前面,大数放在后面。即在第一趟:首先比较第1个和第2个数,将小数放前,大数放后。然后比较第...

人觉非常君 ⋅ 今天 ⋅ 0

Vagrant setup

安装软件 brew cask install virtualboxbrew cask install vagrant 创建project mkdir -p mst/vmcd mst/vmvagrant init hashicorp/precise64vagrant up hashicorp/precise64是一个box......

遥借东风 ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部