Sass语言声明和引用变量知识点分享,Sass拥有比其他任何CSS扩展语言更多的功能和特性。Sass几乎可以完全兼容所有版本的CSS。且有无数的框架使用Sass构建,如Compass、Bourbon和Susy。
Sass是一种成熟且稳定的CSS扩展语言,有两种语法格式,一种是最早的Sass语法格式被称为缩进格式(Indented Sass)通常简称“Sass”是一种简化格式。这种格式以“.sass”作为扩展名。
另一种语法格式是SCSS(SassyCSS)这种格式仅在CSS3语法的基础上进行拓展,所有CSS3语法在SCSS中通用,同时加入Sass的特色功能。这种格式以“.scss”作为扩展名。这里基于SCSS格式讲解Sass的变量声明和变量引用。
1、变量声明
Sass使用“$”符号来标识变量,如$highlight-color和$sidebar-width。需要注意的是,老版本的Sass使用“!”来标识变量。使用$符号的好处是更具美感,并且在CSS中并无他用,不会导致与现存或未来的CSS语法冲突。
Sass变量的声明和CSS属性的声明比较相似基本语法如下:
1 $highlight-color: #F90;
上述代码表示变量$highlight-color的值是#F90。任何可以用作CSS属性值的赋值都可以用作Sass的变量值,甚至是以空格或逗号分割多个属性值示例代码如下:
1 $highlight-color: #F90;
上述代码表示变量$highlight-color的值是#F90。任何可以用作CSS属性值的赋值都可以用作Sass的变量值,甚至是以空格或逗号分割多个属性值示例代码如下:
1 $basic-border: 1px solid black;
2 $plain-font: "Myriad Pro","Myriad","Helvetica","Neue","Helvetica";
与CSS属性不同的是,变量可以在CSS规则块定义之外存在。如果变量定义在CSS规则块内,那么该变量只能在此规则块内使用。如果它们出现在任何形式的{...}块中,如@media或者@font-face块中情况也是如此。
2、变量引用
在变量定义完成之后,这时变量还没有生效除非引用这个变量。下面为大家讲解变量的使用方法。示例代码如下:
1 $highlight-color: #F90;
2 .selected {
3 border: 1px solid $highlight-color;
4 }
上述代码中,凡是CSS属性的标准值(如1px或者bold)可存在的地方变量就可以使用。CSS生成时,变量会被它们的值所替代。之后,如果需要一个不同的值只需要改变这个变量的值,那么所有引用此变量的地方生成的值都会随之改变。
— 申请免费试学名额 —
在职想转行提升,担心学不会?根据个人情况规划学习路线,闯关式自适应学习模式保证学习效果
讲师一对一辅导,在线答疑解惑,指导就业!
相关推荐 更多
折半插入排序讲解 干货教程
相信大家都了解折半插入排序的定义,即对插入排序算法的一种改进,所谓排序算法过程,就是不断的依次将元素插入前面已排好序的序列中。本文将从插入排序思想介绍、算法说明、折半插入排序的代码实现这些方面讲解折半插入排序讲解 ,感兴趣的小伙伴就接着看下去吧!
6741
2019-07-30 11:10:06
Java8有什么变化?九大新特性
Java8有什么变化?本文将讲解Java8的九大新特性,它们分别是Java8Lambda 表达式、Java8方法引用、Java8函数式接口、Java8Nashorn JavaScript Java 8 默认方法、Java8Stream、Java8Optional 类、Java8日期时间API、Java8 Base64。
5875
2019-08-12 10:06:17
自学Java需要什么基础?零基础可以学吗?
Java长久以来都是最受开发者和企业欢迎的编程语言。因此目前Java的就业形势一片大好,对于那些想转行高薪有前途的求职者来说,学习Java是个很好的选择。有些人可能要问了:自学Java需要什么基础?零基础可以学吗?答案是肯定的,学习是没有限制的,只要你愿意学习,零基础的小白也不用担心学不好Java。关键在于大家有没有学习的决心和毅力以及科学的学习方法。
3096
2019-10-21 18:10:35
MySQL学习总结之DQL查询语句
DQL查询语句又叫数据库查询语句,这是Java学习者在学习MySQL时,必须了解和掌握的知识点之一。众所周知,DQL查询语句有四种查询方式:排序查询、聚合函数、分组查询和分页查询。下面让我们一一仔细梳理这四种查询方式,有需要学习的小伙伴赶紧来看看MySQL学习总结之DQL查询语句的知识点吧!
2326
2020-02-11 23:24:05
GC垃圾回收学习笔记整理
只要掌握了GC垃圾回收的相关知识点,程序员在工作中就不用担心内存管理了,因为垃圾收集器会自动进行管理。本文为大家整理了GC垃圾回收的学习笔记,主要内容包括了判断回收条件,虚拟机频繁full GC的解决对策以及经典的垃圾回收算法。大家要是对GC垃圾回收的相关学习学习感兴趣,就接着看下去吧!
2634
2020-03-26 22:20:37
热门文章
- 大数据的薪资怎么样?想学大数据了?
- 吐血整理的大数据学习资源大全
- 数据分析行业到底有多卷
- 传智教育在线课程助力职场升级,看IT人才如何破局职业瓶颈
- 传智教育博学谷赋能在职人群,推出系列公开课及大咖1对1聊技术
- 大数据开发的前景和就业如何?该如何去学习它?
- 成为架构师,读书之外什么更重要?
- 如何从Java工程师成长为架构师?
- 比较实用的大数据分析模型有哪些?
- Java原子操作之CAS原子指令学习 查看更多
扫描二维码,了解更多信息
