在线客服
扫描二维码
下载博学谷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基础 Jvm如何加载类?如何分配空间?
Java基础 Jvm如何加载类?如何分配空间?指的是将 class 文件的二进制数据读入到运行时数据区(JVM在内存中划分的)中,并在方法区内创建一个 class 对象JVM 运行起来时就给内存划分空间,这块空间就称为运行时数据区。
8098
2019-06-03 15:41:22
自学Java可以找到工作吗?要学到什么程度?
Java作为备受程序员喜爱的编程语言,在各行各业都被广泛使用,导致当下越来越来多的自学者想通过自己的努力,自学Java从而找到一份高薪可以改变自己职业前途的工作。那么自学Java可以找到工作吗?要学到什么程度?其实对大多数学习者来说,自学Java都不是一个最好的选择,一方面是因为Java语言自身学习的难度比较高,另一方面是自学效率低,对自学者能力要求高。
6424
2019-10-26 11:33:24
Java基础语法之if语句学习笔记
众所周知,流程控制语句可以分为三类,分别是顺序结构、分支结构和循环结构,而分支结构又可以分为if语句和switch语句。顺序结构可以说是程序中最简单最基本的流程控制,这里就不展开详细讲解了。本文重点要讲解分析的是分支结构的if语句,内容包括了if语句的格式、执行流程和具体示例。想要学习Java基础语法的小伙伴,可以看看下面整理的if语句的笔记,希望对大家入门Java能够有所帮助。
7154
2019-12-06 12:40:32
Lombok安装和使用介绍
在Java开发的过程中,当我们想减少重复工作提高生产效率的时候,不妨考虑一下Lombok。本文将手把手带大家下载安装Lombok,要知道使用lombok必须先安装,不然IDE则无法解析。除此之外,本文还将向大家详细介绍Lombok的定义和使用。希望帮助大家更好的掌握Lombok,提高Java开发工作的效率。
4617
2020-03-31 17:51:52
30条实用MySQL优化法则
30条实用MySQL优化法则, 应尽量避免在 where 子句中使用!=或<>操作符,否则引擎将放弃使用索引而进行全表扫描。对查询进行优化,应尽量避免全表扫描,首先应考虑在 where 及 order by 涉及的列上建立索引。
2803
2022-06-30 10:53:44