政务服务网站 建设方案,长沙旅游攻略必去的十大景点,山东泰安网络科技有限公司,如何做视频会员网站文章目录 前言变量声明变量引用变量名用中划线还是下划线分隔后言 前言 hello world欢迎来到前端的新世界 #x1f61c;当前文章系列专栏#xff1a;Sass和Less #x1f431;#x1f453;博主在前端领域还有很多知识和技术需要掌握#xff0c;正在不断努力填补技术短板。… 文章目录 前言变量声明变量引用变量名用中划线还是下划线分隔后言 前言 hello world欢迎来到前端的新世界 当前文章系列专栏Sass和Less 博主在前端领域还有很多知识和技术需要掌握正在不断努力填补技术短板。(如果出现错误感谢大家指出) 感谢大家支持您的观看就是作者创作的动力 变量声明
sass变量的声明和css属性的声明很像:
$highlight-color: #F90;这意味着变量$highlight-color现在的值是#F90。任何可以用作css属性值的赋值都可以用作sass的变量值甚至是以空格分割的多个属性值如$basic-border: 1px solid black;或以逗号分割的多个属性值如$plain-font: Myriad Pro、Myriad、HelveticaNeue、Helvetica、Liberation Sans、Arial和sans-serif; sans-serif;。这时变量还没有生效除非你引用这个变量——我们很快就会了解如何引用。
与CSS属性不同变量可以在css规则块定义之外存在。当变量定义在css规则块内那么该变量只能在此规则块内使用。如果它们出现在任何形式的{…}块中(如media或者font-face块)情况也是如此:
$nav-color: #F90;
nav {$width: 100px;width: $width;color: $nav-color;
}//编译后nav {width: 100px;color: #F90;
}在这段代码中$nav-color这个变量定义在了规则块外边所以在这个样式表中都可以像nav规则块那样引用它。$width这个变量定义在了nav的{ }规则块内所以它只能在nav规则块内使用。这意味着是你可以在样式表的其他地方定义和使用$width变量不会对这里造成影响。
只声明变量其实没啥用处我们最终的目的还是使用它们。上例已介绍了如何使用$nav-color和$width这两个变量接下来我们将进一步探讨变量的使用方法。
变量引用
凡是css属性的标准值(比如说1px或者bold)可存在的地方变量就可以使用。css生成时变量会被它们的值所替代。之后如果你需要一个不同的值只需要改变这个变量的值则所有引用此变量的地方生成的值都会随之改变。
$highlight-color: #F90;
.selected {border: 1px solid $highlight-color;
}//编译后.selected {border: 1px solid #F90;
}看上边示例中的$highlight-color变量它被直接赋值给border属性当这段代码被编译输出css时$highlight-color会被#F90这一颜色值所替代。产生的效果就是给selected这个类一条1像素宽、实心且颜色值为#F90的边框。
在声明变量时变量值也可以引用其他变量。当你通过粒度区分为不同的值取不同名字时这相当有用。下例在独立的颜色值粒度上定义了一个变量且在另一个更复杂的边框值粒度上也定义了一个变量:
$highlight-color: #F90;
$highlight-border: 1px solid $highlight-color;
.selected {border: $highlight-border;
}//编译后.selected {border: 1px solid #F90;
}这里$highlight-border变量的声明中使用了$highlight-color这个变量。产生的效果就跟你直接为border属性设置了一个1px $highlight-color solid的值是一样的。最后我们来了解一下变量命名的实用技巧以结束关于变量的介绍。
变量名用中划线还是下划线分隔
sass的变量名可以与css中的属性名和选择器名称相同包括中划线和下划线。这完全取决于个人的喜好有些人喜欢使用中划线来分隔变量中的多个词(如$highlight-color)而有些人喜欢使用下划线(如$highlight_color)。使用中划线的方式更为普遍这也是compass和本文都用的方式。
不过sass并不想强迫任何人一定使用中划线或下划线所以这两种用法相互兼容。用中划线声明的变量可以使用下划线的方式引用反之亦然。这意味着即使compass选择用中划线的命名方式这并不影响你在使用compass的样式中用下划线的命名方式进行引用:
$link-color: blue;
a {color: $link_color;
}//编译后a {color: blue;
}在上例中$link-color和$link_color其实指向的是同一个变量。实际上在sass的大多数地方中划线命名的内容和下划线命名的内容是互通的除了变量也包括对混合器和Sass函数的命名。但是在sass中纯css部分不互通比如类名、ID或属性名。
尽管变量自身提供了很多有用的地方但是sass基于变量提供的更为强大的工具才是我们关注的焦点。只有当变量与sass的其他特性一起使用时才能发挥其全部的潜能。接下来我们将探讨其中一个非常重要的特性即规则嵌套。
后言 创作不易要是本文章对广大读者有那么一点点帮助 不妨三连支持一下您的鼓励就是博主创作的动力
