您的位置:58脚本 > 变量 声明 1-1. 变量声明

变量 声明 1-1. 变量声明

2023-04-01 16:32 Sass教程

变量 声明 1-1. 变量声明

变量 声明 1-1. 变量声明

变量 声明

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这两个变量,接下来我们将进一步探讨变量的使用方法。


阅读全文
以上是58脚本为你收集整理的变量 声明 1-1. 变量声明全部内容。
声明:本站所有文章资源内容,如无特殊说明或标注,均为采集网络资源。如若本站内容侵犯了原著者的合法权益,可联系本站删除。
相关文章
© 2024 58脚本 58jiaoben.com 版权所有 联系我们
桂ICP备12005667号-28 Powered by CMS