在线客服
扫描二维码
下载博学谷APP扫描二维码
关注博学谷微信公众号
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生成时,变量会被它们的值所替代。之后,如果需要一个不同的值只需要改变这个变量的值,那么所有引用此变量的地方生成的值都会随之改变。
— 申请免费试学名额 —
在职想转行提升,担心学不会?根据个人情况规划学习路线,闯关式自适应学习模式保证学习效果
讲师一对一辅导,在线答疑解惑,指导就业!
相关推荐 更多
Java基础学习:面向过程与面向对象
刚开始学编程的时候都会遇到一个思维转变的过程,从原来人类思维模式转变成机器可以接受的思维模式。这个过程是非常难的,这也是为什么互联网人才能够获得高薪的原因。对于Java学习,面向过程可能更接近人的正常思维,而面向对象思维就是一个巨大的挑战了。本文就和大家聊一聊关于面向过程和面向对象的优劣。
7297
2019-06-24 18:35:01
折半插入排序讲解 干货教程
相信大家都了解折半插入排序的定义,即对插入排序算法的一种改进,所谓排序算法过程,就是不断的依次将元素插入前面已排好序的序列中。本文将从插入排序思想介绍、算法说明、折半插入排序的代码实现这些方面讲解折半插入排序讲解 ,感兴趣的小伙伴就接着看下去吧!
9691
2019-07-30 11:10:06
架构和框架的区别是什么?对比分析
架构和框架的区别是什么?相信问这个问题的一定是新手小白。确实会有人在刚刚入门编程的时候,架构和框架的傻傻分不清。本文就框架和架构的定义、使用、特点等等方面,进行对比分析。
14926
2019-08-14 10:19:24
什么是微服务?微服务优缺点分析
微服务是近些年流行起来的热门概念,与传统的的IT架构相比,它有许多的优势。那么到底什么是微服务呢?本文将对微服务优缺点进行分析,让大家全面的了解微服务。
8033
2019-08-13 09:59:51
微服务和分布式的联系与区别什么?
微服务和分布式的联系与区别什么?分布式只是一种手段把不同的机器分散在不同的地方,然后这些机器间相互协助完成业务,而微服务是一种特殊的分布式。分布式将一个大的系统划分为多个业务模块,业务模块分别部署到不同的机器上,各个业务模块之间通过接口进行数据交互,微服务与分布式的细微差别是微服务的应用不一定是分散在多个服务器上也可以是同一个服务器。
5986
2021-03-26 11:29:43