[Sass]声明变量

定义变量的语法:

在有些编程语言中(如,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则表示默认值。

注:了解 Bootstrap 的 Sass 版本的同学,就一眼能看出,上面的示例代码是 Bootstrap 定义 primarybutton 的颜色。

[Sass]普通变量与默认变量

普通变量

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

$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。默认变量的价值在进行组件化开发的时候会非常有用。

转自:慕课网

(感谢O(∩_∩)O)

[Sass]声明变量的更多相关文章

  1. Mysql 声明变量

    Mysql 声明变量 Mysql中声明变量有两种方式 第一种: set @num=1; 或set @num:=1; //这里要使用变量来保存数据,直接使用@num变量 第二种: select @num ...

  2. IOS OC声明变量在@interface括号中与使用@property的区别

    方式一:直接在@interface中的大括号中声明. @interface MyTest : NSObject{ NSString *mystr; } 方式二:在@interface中声明,然后再在@ ...

  3. 关于Let和var声明变量的区别

    Let是ES6中添加进来的一个关键字,用于声明变量,其法与var声明变量相同,不同点在于其作用域(块级). 举例可以看出其具体差别 for(var i=0;i<5;i++){ console.l ...

  4. zendstudio 声明变量类型,让变量自动方法提示

    zendstudio 行内注释, 显式声明变量类型,让变量自动方法提示 $out = []; /* @var $row \xxyy\SizeEntity */ foreach ($rows[ 'lis ...

  5. oracle存储过程、声明变量、for循环|转|

    oracle存储过程.声明变量.for循环 1.创建存储过程 create or replace procedure test(var_name_1 in type,var_name_2 out ty ...

  6. IOS OC声明变量在@interface括号中与使用@property的区别(转载)

    刚开始接触OC再看别人写的代码的时候,常常困惑于人家在声明属性时的写法,总结出来有三中方式,不知道哪一种比较规范化,现在我把三种方式贴出来,然后再一一探讨每个方式声明属性的区别. 方式一:直接在@in ...

  7. 【学习总结】声明变量在@interface括号中与使用@property的区别

    方式一:直接在.h文件@interface中的大括号中声明. @interface Test : NSObject { NSString *str; // 私有变量 , 其他类无法访问,只能够该类内部 ...

  8. freemarker声明变量

    freemarker声明变量 1.使用assign创建和替换变量 (1)新建声明变量的ftl variable.ftl: <html> <head> <meta http ...

  9. Javascript声明变量类型

    声明变量类型 当您声明新变量时,可以使用关键词 "new" 来声明其类型: var carname=new String; var x= new Number; var y= ne ...

随机推荐

  1. 递推 hdu 1396

    给你边长为n的等边三角形 算有几个三角形 z[1]=1; 第N层 z[n] 1   n-1层 z[n-1] 2   2*n-1 个小的 3   新产生的 正的>1的三角形 n*(n-1)/2; ...

  2. 读取TDrawGrid之获取博易数据

    朋友叫我帮忙写个从博易读取数据的工具,可无奈数据所在控件并不是Windows标准控件,也就是说没办法通过发送系统消息来获取 相关数据,于是乎试了一下从内存直接读取,可最后并不能达到预期目的,原因是笔者 ...

  3. typedef

    第一.四个用途 用途一: 定义一种类型的别名,而不只是简单的宏替换.可以用作同时声明指针型的多个对象.比如:char* pa, pb; // 这多数不符合我们的意图,它只声明了一个指向字符变量的指针, ...

  4. WebAPI IIS PUT和DELETE请求失败 405

    IIS拒绝PUT和DELETE请求是由于IIS为网站默认注册的一个名为WebDAVModule的自定义HttpModule导致的,如果我们的站点不需要提供针对WebDAV的支持,解决这个问题最为直接的 ...

  5. 为什么FFT时域补0后,经FFT变换就是频域进行内插?

    应该这样来理解这个问题: 补0后的DFT(FFT是DFT的快速算法),实际上公式并没变,变化的只是频域项(如:补0前FFT计算得到的是m*2*pi/M处的频域值, 而补0后得到的是n*2*pi/N处的 ...

  6. Beta阶段测试报告

    前端测试计划 具体测试项如下: 注册测试 登录测试 忘记密码测试 一次登录后自动登录测试 退出登录测试 编辑资料测试 查看好友测试 搜索好友测试 添加好友测试 获取当前正在游戏的房间测试 创建房间测试 ...

  7. 定位框一闪而过 iOS Swift

    需求:获取经纬度. 方案:我自定义了一个类模块CLLocationModule.swift 备注以下代码里 let IS_IOS8 = (UIDevice.currentDevice().system ...

  8. sql 注入问题

    1. 关于使用intval强制转换成数字的问题.数字大于2147483647会出现溢出出现负数.使用个方法来替代这个吧$n="\n";$a=2147483648.05555;ech ...

  9. 使用ASP.NET Web API Help Pages 创建在线接口文档

    操作步骤 1.新建Web API项目 2.在项目Areas文件夹下找到以下文件,取消注释图中代码. 3.右键解决方案,属性,如图设置. 4.运行程序,点击右上角API 接口列表: 详情-无参数: 详情 ...

  10. Mysql字符集设置

    转 基本概念 • 字符(Character)是指人类语言中最小的表义符号.例如’A'.’B'等:• 给定一系列字符,对每个字符赋予一个数值,用数值来代表对应的字符,这一数值就是字符的编码(Encodi ...