[Sass] Variable
variable Sass
2023-09-14 09:00:56 时间
Variable Declaration +Use
$base: #777777; /*Define a variable name*/ .sidebar{ border:1px solid $base; p { color: $base; } }
Default flag:
Vairable can be any type:
color, string (with or without quotes), list (10px 0 10px 100px), null
Scope:
Variable set inside a declaration (within {}) aren't usable outside that block.
Setting new values to variables set outside a declaration changes future instances.
/** OK */
$color-base: #464646; .sidebar{ $color-base: #222222; background: $color-base; } p{ color: $color-base }
/** Wrong **/ p{ $border: #ccc; border-top: 1px solid $border; } h1{ border-top: 1px solid $border; }
Interpolation:
Use the Ruby-esque #{$variable} to shim variables into selectors, property names, and strings:
$side: top; sup{ position: relative; #{$side}: -0.5em; } .callout-#{$side}{ background: #777; }
Assembly Tip:
Be considerate of variable naming. $color-base gets a lot more mileage than $color-blue.
相关文章
- ORA-25466: data not specified for variable name: string ORACLE 报错 故障修复 远程处理
- ORA-25470: duplicate attribute value for variable: string ORACLE 报错 故障修复 远程处理
- MySQL Error number: 3637; Symbol: ER_NOT_HINT_UPDATABLE_VARIABLE; SQLSTATE: HY000 报错 故障修复 远程处理
- ORA-06577: output parameter not a bind variable ORACLE 报错 故障修复 远程处理
- C++并发编程 条件变量 condition_variable,线程安全队列示例详解编程语言
- jquery$("#variable")循环改变variable的值示例