[Sass]声明变量
[Sass]声明变量
定义变量的语法:
在有些编程语言中(如,JavaScript)声明变量都是使用关键词“var”开头,但是在 Sass 不使用这个关键词,而是使用大家都喜欢的美元符号“$”开头。我想用一张图来解释,我一直坚信,一图胜千言万语:
上图非常清楚告诉了大家,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;
如果值后面加上!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]声明变量的更多相关文章
- Mysql 声明变量
Mysql 声明变量 Mysql中声明变量有两种方式 第一种: set @num=1; 或set @num:=1; //这里要使用变量来保存数据,直接使用@num变量 第二种: select @num ...
- IOS OC声明变量在@interface括号中与使用@property的区别
方式一:直接在@interface中的大括号中声明. @interface MyTest : NSObject{ NSString *mystr; } 方式二:在@interface中声明,然后再在@ ...
- 关于Let和var声明变量的区别
Let是ES6中添加进来的一个关键字,用于声明变量,其法与var声明变量相同,不同点在于其作用域(块级). 举例可以看出其具体差别 for(var i=0;i<5;i++){ console.l ...
- zendstudio 声明变量类型,让变量自动方法提示
zendstudio 行内注释, 显式声明变量类型,让变量自动方法提示 $out = []; /* @var $row \xxyy\SizeEntity */ foreach ($rows[ 'lis ...
- oracle存储过程、声明变量、for循环|转|
oracle存储过程.声明变量.for循环 1.创建存储过程 create or replace procedure test(var_name_1 in type,var_name_2 out ty ...
- IOS OC声明变量在@interface括号中与使用@property的区别(转载)
刚开始接触OC再看别人写的代码的时候,常常困惑于人家在声明属性时的写法,总结出来有三中方式,不知道哪一种比较规范化,现在我把三种方式贴出来,然后再一一探讨每个方式声明属性的区别. 方式一:直接在@in ...
- 【学习总结】声明变量在@interface括号中与使用@property的区别
方式一:直接在.h文件@interface中的大括号中声明. @interface Test : NSObject { NSString *str; // 私有变量 , 其他类无法访问,只能够该类内部 ...
- freemarker声明变量
freemarker声明变量 1.使用assign创建和替换变量 (1)新建声明变量的ftl variable.ftl: <html> <head> <meta http ...
- Javascript声明变量类型
声明变量类型 当您声明新变量时,可以使用关键词 "new" 来声明其类型: var carname=new String; var x= new Number; var y= ne ...
随机推荐
- 递推 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; ...
- 读取TDrawGrid之获取博易数据
朋友叫我帮忙写个从博易读取数据的工具,可无奈数据所在控件并不是Windows标准控件,也就是说没办法通过发送系统消息来获取 相关数据,于是乎试了一下从内存直接读取,可最后并不能达到预期目的,原因是笔者 ...
- typedef
第一.四个用途 用途一: 定义一种类型的别名,而不只是简单的宏替换.可以用作同时声明指针型的多个对象.比如:char* pa, pb; // 这多数不符合我们的意图,它只声明了一个指向字符变量的指针, ...
- WebAPI IIS PUT和DELETE请求失败 405
IIS拒绝PUT和DELETE请求是由于IIS为网站默认注册的一个名为WebDAVModule的自定义HttpModule导致的,如果我们的站点不需要提供针对WebDAV的支持,解决这个问题最为直接的 ...
- 为什么FFT时域补0后,经FFT变换就是频域进行内插?
应该这样来理解这个问题: 补0后的DFT(FFT是DFT的快速算法),实际上公式并没变,变化的只是频域项(如:补0前FFT计算得到的是m*2*pi/M处的频域值, 而补0后得到的是n*2*pi/N处的 ...
- Beta阶段测试报告
前端测试计划 具体测试项如下: 注册测试 登录测试 忘记密码测试 一次登录后自动登录测试 退出登录测试 编辑资料测试 查看好友测试 搜索好友测试 添加好友测试 获取当前正在游戏的房间测试 创建房间测试 ...
- 定位框一闪而过 iOS Swift
需求:获取经纬度. 方案:我自定义了一个类模块CLLocationModule.swift 备注以下代码里 let IS_IOS8 = (UIDevice.currentDevice().system ...
- sql 注入问题
1. 关于使用intval强制转换成数字的问题.数字大于2147483647会出现溢出出现负数.使用个方法来替代这个吧$n="\n";$a=2147483648.05555;ech ...
- 使用ASP.NET Web API Help Pages 创建在线接口文档
操作步骤 1.新建Web API项目 2.在项目Areas文件夹下找到以下文件,取消注释图中代码. 3.右键解决方案,属性,如图设置. 4.运行程序,点击右上角API 接口列表: 详情-无参数: 详情 ...
- Mysql字符集设置
转 基本概念 • 字符(Character)是指人类语言中最小的表义符号.例如’A'.’B'等:• 给定一系列字符,对每个字符赋予一个数值,用数值来代表对应的字符,这一数值就是字符的编码(Encodi ...