SASS - 变量
- SASS – 简介
- SASS – 环境搭建
- SASS – 使用Sass程序
- SASS – 语法
- SASS – 变量
- SASS- 局部文件(Partial)
- SASS – 混合(Mixin)
- SASS – @extend(继承)指令
- SASS – 操作符
- SASS – 函数
- SASS – 输出格式
变量可以让整个网站保持一致性。你可以定义一个变量,然后在其他地方引用它,而不必再重复相同的值。要改这些值,只需在定义变量的那一个地方修改。
下面的Sass代码包含两个变量:$primary-color
,$secondary-color
$primary-color: orange;
$secondary-color: gold;
body {
color: $primary-color;
background: $secondary-color;
}
变量就像存储值的容器。在本例中,我们将值orange、gold存储在变量中。
每次需要使用orange颜色时,可以使用变量名来代替orange颜色。如果需要改一个颜色,只需在定义变量的那一个地方修改。
变量定义
- 变量以美元符号($)开头,后面跟变量名。
- 变量名和赋值之间用冒号(:)分隔。
注意:缩进语法、SCSS语法中,变量定义都是一样的。
连字符和下划线
变量名中连字符和下划线等效,$primary_color
与 $primary-color
是同一个变量。
下面的代码可以正常工作:
$primary_color: orange;
$secondary_color: gold;
body {
color: $primary-color;
background: $secondary-color;
}
局部变量
选择器中定义的变量是局部变量,作用范围是该选择器
示例:
header {
$header-color: orange;
color: $header-color;
}
不能在选择器外面使用局部变量,下面的做法是错误的:
header {
$header-color: orange;
color: $header-color;
}
article {
color: $header-color;
}
如果编译该代码,会报错: error: Undefined variable: "$header-color"
。
!global 标志定义全局变量
可以在选择器中使用 !global
标志定义全局变量。
示例:
header {
$header-color: orange !global;
color: $header-color;
}
article {
color: $header-color;
}
$header-color
使用了全局变量标志,被定义为全局变量,外部就可以使用该变量。这段代码会编译成以下CSS:
header {
color: orange; }
article {
color: orange; }
变量值
变量值除了前面举例的颜色外,可以是任何css值,如字体族、字体权重、边框宽度、背景图像等
多种值类型示例:
$primary-color: orange;
$secondary-color: gold;
$font-stack: 'Open Sans', Helvetica, Sans-Serif;
$border-thick: 10px;
$border-bright: orange;
$border-style: solid;
$article-width: 60%;
$article-padding: 20px;
$article-margin: auto;
body {
color: $primary-color;
background: $secondary-color;
font-family: $font-stack;
}
article {
border: $border-thick $border-style $border-bright;
width: $article-width;
padding: $article-padding;
margin: $article-margin;
}
上面的代码编译输出的CSS:
body {
color: orange;
background: gold;
font-family: "Open Sans", Helvetica, Sans-Serif; }
article {
border: 10px solid orange;
width: 60%;
padding: 20px;
margin: auto; }
/*# sourceMappingURL=styles.css.map */
默认值
变量可以设置默认值。当变量没有赋值时会使用默认值。
默认值使用!default
标志设置。
示例:
$primary-color: orange;
$primary-color: gold !default;
body {
color: $primary-color;
}
编译输出的CSS如下:
body {
color: orange; }
本例中没有使用默认值,因为该变量有赋值:$primary-color: orange;
。
如果去掉赋值,就会使用默认值。如下所示:
$primary-color: gold !default;
body {
color: $primary-color;
}
编译后的CSS如下所示:
body {
color: gold; }
变量数据类型
SASS有七种主要数据类型:
- Numbers (e.g. 15, 3.5, 50px)
- Strings 可带可不带引号 (e.g. "foo", 'foo', foo)
- Colors (e.g. orange, #ffcc00, rgba(105, 255, 0, 0.7))
- Booleans (e.g. true, false)
- Nulls (e.g. null)
- Lists 空格或逗号分隔 (e.g. 2.5px 10px 0 7px, Helvetica, Arial, sans-serif)
- Maps (e.g. (key1: value1, key2: value2))
原文地址:https://www.cnblogs.com/haibianren/p/11589389.html
- phalapi-入门篇4(国际化高可用和自动生成文档)
- 用JavaScript动态输出的JS脚本不能执行
- Dubbo源码解析 —— 服务暴露原理
- [Golang软件推荐] RSA公私钥加解密(解决Golang私钥加密公钥解密问题)
- [喵咪大数据]Hive+Hbase关联
- 再战子域共享Cookie问题
- [喵咪大数据]Presto查询引擎
- 如何在5分钟内做出你的第一个开源贡献
- [喵咪大数据]HUE大数据管理工具
- Dubbo源码解析 —— Zookeeper 订阅
- 注册中心 Eureka 源码解析 —— 项目结构简介
- 【平台】Seldon.io发布新开源平台,用于Kubernetes上的机器学习
- 分布式事务 TCC-Transaction 源码分析 —— TCC 实现
- 了解学习速率以及它如何提高深度学习的表现
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Android编程实现禁止状态栏下拉的方法详解
- Android进度条ProgressBar的实现代码
- Android画画板的制作方法
- Android实现bitmap指定区域滑动截取功能
- Android开发实现应用层面屏蔽状态栏的方法小结
- Android实现实时搜索框功能
- 浅谈Android轻量级的数据缓存框架RxCache
- Android开发实现消除屏幕锁的方法
- Android中js和原生交互的示例代码
- 浅谈android获取设备唯一标识完美解决方案
- Android开发实现长按返回键弹出关机框功能
- Android View 完美实现EditText 在软键盘上边的示例
- Android蓝牙通信之搜索蓝牙设备
- Android listview定位到上次显示的位置的实现方法
- Android开发实现生成excel的方法详解