在线客服
扫描二维码
下载博学谷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、Python、JavaScript、PHP、C/C++编程语言介绍
Java、Python、JavaScript、PHP、C/C++编程语言介绍,用任何编程语言来开发程序都是为编写程序让计算机按照程序工作,尽管不同的计算机编程语言差异极大,最后都得“翻译”成CPU可以执行的机器指令。理论上任何语言干任何事情几乎都可以, 但是主要的侧重点就不一样了。
6855
2019-05-21 16:15:40
零基础Java在线学习方式有哪些?
零基础Java在线学习方式有哪些?总结起来,基本上就是四种方式,即多阅读相关书籍,观看学习视频,实战练习敲代码,与在线老师交流沟通。无论是在线自学也好,还是报线上的培训班,最有效的Java学习方式,也就是以上这些。下面小编来详细为大家讲解Java在线学习具体要怎么做。
5306
2019-09-29 10:31:58
JavaWeb开发学习路线及学习目标
JavaWeb开发学习路线及学习目标,JavaWeb阶段主要学习Linux系统、HTML5&CSS&Nginx、Web服务器基础、Servlet、Cookie&Session、JSP、EL、JSTL、Filter&Listener、文件上传和下载、MySQL、JDBC、MyBatis、JavaScript、jQuery、Ajax、VUE、ElementUI+案例、Redis、Maven基础等知识。
5221
2020-04-16 16:05:55
Java基础语法需要学习哪些知识?
Java基础语法内容包含java运行环境、HelloWorld案例、关键字&标识符、常量&变量、数据类型转换、运算符、方法入门、JDK9新特性-Jshell、选择结构-if语句-switch语句、循环结构-for-while-do..while、开发工具-IDEA、方法复习、方法重载、数组、描述类介绍与使用等内容。
3371
2020-12-01 14:53:05
Java语言的特点有哪些?Java编程入门知识分享
Java编程具有用户友好性和灵活性,是web应用程序开发人员和程序管理专家的选择较多的编程语言。Java源代码编辑器是集成开发环境,不仅使程序员能够更快、更容易地编写代码,还提供了自动化的内建调试器特性。
3768
2021-02-21 11:57:12