[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. Ajax跨域实现

    Ajax Ajax,Asynchronus JavaScript and XML,字母意思:异步的 JavaScript 和 XML,是指一种创建交互式网页应用的网页开发技术.用于异步地去获取XML作 ...

  2. word中表格加粗某一行

    选中表格后选择线条粗细. 然后重新绘制一遍就行了.

  3. Make 命令教程

    http://www.ruanyifeng.com/blog/2015/02/make.html 作者: 阮一峰 日期: 2015年2月20日 代码变成可执行文件,叫做编译(compile):先编译这 ...

  4. 12月13日上午Smarty模版原理

    模板主要是用来让前端和后端分离的,前台页面只是一个前台页面,后台页面用php代码写逻辑,写完逻辑拿到前台显示. 一.写法 一般需要以下:写3个页面: 1.显示页面aa.html <!DOCTYP ...

  5. PHP读取EXCEL时间

    在使用php读取excel表格中的时间时得到一串数字而不是时间:40359.58333333334 excel 中的时间值是自1900年以来的天数,注意是格林威治时间php 中的时间值是自1970年以 ...

  6. Configuring Autofac to work with the ASP.NET Identity Framework in MVC 5

    https://developingsoftware.com/configuring-autofac-to-work-with-the-aspnet-identity-framework-in-mvc ...

  7. hdu2014青年歌手大赛

    Problem Description 青年歌手大奖赛中,评委会给参赛选手打分.选手得分规则为去掉一个最高分和一个最低分,然后计算平均得分,请编程输出某选手的得分. Input 输入数据有多组,每组占 ...

  8. Oracle函数组的使用

    --1.组函数--COUNT():用来统计记录的条数 如果没有记录,返回 0--COUNT函数可以根据一列或多列进行计算,没有排重功能--统计EMP表一共有多少条记录select count(empn ...

  9. 关于unity如何制作mmo

    昨天去看了下unity的成都openday,还是有很多收获的,之前我对于这类的活动始终提不起来兴趣,不过看来日后还是要多参加下类似的活动长长见识. 公司打算开发3d mmo手游,昨天好玩123恰好也分 ...

  10. MySql简易配置

    选择standard configuration ,然后next Service Name :服务名字 Launch the MySQL Server automatically:是否开机启动mysq ...