快速入门
概览
变量(Variables)
混合(Mixins)
嵌套(Nesting)
运算(Operations)
转义(Escaping)
函数(Functions)
命名空间和访问符
映射(Maps)
作用域(Scope)
注释(Comments)
导入(Importing)
Less.js 用法
命令行用法
浏览器使用
Less.js选项
预装插件
程序化使用
API
Contributing to Less.js
Less 函数手册
逻辑函数
字符串函数
列表函数
数学函数
类型函数
其他功能
颜色定义函数
颜色通道函数
颜色操作函数
颜色混合函数
进阶指南
合并
父选择器
扩展
变量
Mixins
CSS Guards
Detached Rulesets
@import At-Rules
@plugin At-Rules
Maps (NEW!)
Less入门文档
网站首页
Maps (NEW!)
Released v3.5.0 #### Use rulesets and mixins as maps of values By combining namespacing with the lookup [] syntax, you can turn your rulesets / mixins into maps. ```less @sizes: { mobile: 320px; tablet: 768px; desktop: 1024px; } .navbar { display: block; @media (min-width: @sizes[tablet]) { display: inline-block; } } ``` Outputs: ```less .navbar { display: block; } @media (min-width: 768px) { .navbar { display: inline-block; } } ``` Mixins are a little more versatile as maps because of namespacing and the ability to overload mixins. ```less #library() { .colors() { primary: green; secondary: blue; } } #library() { .colors() { primary: grey; } } .button { color: #library.colors[primary]; border-color: #library.colors[secondary]; } ``` Outputs: ```less .button { color: grey; border-color: blue; } ``` You can also make this easier by aliasing mixins. That is: ```less .button { @colors: #library.colors(); color: @colors[primary]; border-color: @colors[secondary]; } ``` Note, if a lookup value produces another ruleset, you can append a second [] lookup, as in: ```less @config: { @options: { library-on: true } } & when (@config[@options][library-on] = true) { .produce-ruleset { prop: val; } } ``` In this way, rulesets and variable calls can emulate a type of "namespacing", similar to mixins. As far as whether to use mixins or rulesets assigned to variables as maps, it's up to you. You may want to replace entire maps by re-declaring a variable assigned to a rulset. Or you may want to "merge" individual key/value pairs, in which case mixins as maps might be more appropriate. ### Using variable variables in lookups One important thing to notice is that the value in [`@lookup`] is the key (variable) name `@lookup`, and is not evaluated as a variable. If you want the key name itself to be variable, you can use the `@@variable` syntax. E.g. ```less .foods() { @dessert: ice cream; } @key-to-lookup: dessert; .lunch { treat: .foods[@@key-to-lookup]; } ``` This would output: ```less .lunch { treat: ice cream; } ```
上一篇:
@plugin At-Rules