在线客服
扫描二维码
下载博学谷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核心基础知识教程内容
Java语言核心语法和Java核心基础知识教程内容,Java基础精讲课程主要讲解:Java语言核心语法、面向对象程序设计、常用API、集合框架、IO流、多线程、网络编程、反射技术、常用设计模式、JDK新特性等JavaSE各个领域的知识,帮助学习者建立和夯实Java语言基础。
5800
2019-10-15 15:40:38
具备JavaWeb开发能力需要掌握哪些知识?
具备JavaWeb开发能力需要掌握哪些知识?首先Java基础语法是基础,另外大家对于MySQL、JDBC、HTML和CSS、JavaScript、BootStrap、XML、Tomcat、Servlet和HTTP请求协议、Request和Response、Cookie和Session、JSP,EL和JSTL等等知识必须要熟练掌握,这样才能基本具备JavaWeb开发能力。
5337
2019-11-01 14:17:19
优秀的Spring Cloud开源项目整理推荐
无论是对于初学者,还是有一定工作经验的程序员来讲,Spring Cloud开源项目都是一笔宝贵的财富。本文整理了十个优秀的开源项目,分别是spring-cloud-examples、spaascloud-master、spring-cloud-rest-tcc、awesome-spring-cloud、xxpay-master等等,感兴趣的朋友赶紧看下去吧!
6669
2019-12-25 14:35:27
Java程序的开发与运行原理解析
可能刚刚接触编程的初学者会发现,编写一个Java程序其实很简单,但是Java程序的运行过程却是非常复杂的。关于Java程序工作原理这部分知识,虽然不要求编程学习者完全掌握,你但是至少需要了解它的大致过程。下面小编将好好介绍一下Java程序的开发与运行原理,大致分为以下三步:编写源文件、编译以及运行。
5186
2020-08-12 16:59:55
Java学完面向对象可以干什么?
面向对象是软件开发方法一种编程范式。面向对象是Java学习中的一个基础部分,学学面向对象逐步建立起面向对象编程思想,从会使用对象,到内存分析,再到理解为什么封装对象。想成为一名程序员只掌握面向对象的知识是远远不够的。
5513
2020-12-23 10:02:11