原创 Sass语言声明和引用变量知识点分享

发布时间:2021-05-17 10:27:32 浏览 722 来源:博学谷 作者:诺诺

    Sass语言声明和引用变量知识点分享,Sass拥有比其他任何CSS扩展语言更多的功能和特性。Sass几乎可以完全兼容所有版本的CSS。且有无数的框架使用Sass构建,如Compass、Bourbon和Susy。

    Sass语言声明和引用变量

    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开发中Netty线程模型原理解析 下一篇: Java开发在线学习网推荐

相关推荐 更多

热门文章

  • 创建表并给某个字段添加数据的SQL语句怎么写
  • 如何使用连接更新表中某个字段数据?
  • MySQL数据库应用之如何将查询结果插入到其它表中?
  • 分组和聚合函数的组合怎么使用?代码怎么写?
  • 外键SQL语句的编写怎么用?
  • 数据库设计之三范式是什么?有什么作用?
  • 子查询的SQL语句怎么写?如何使用?
  • 连接查询自连接的SQL语句怎么写?
  • 连接查询右连接的SQL语句怎么写?
  • 连接查询左连接的SQL语句怎么写?
  • 查看更多

扫描二维码,了解更多信息

博学谷二维码