diff --git a/_less.github.io b/_less.github.io index b33ec5ad..98419b52 160000 --- a/_less.github.io +++ b/_less.github.io @@ -1 +1 @@ -Subproject commit b33ec5ada4646d6711f3d17226e42333f22147c8 +Subproject commit 98419b52421190e7f3f3803159a074194530a18f diff --git a/content/features/variables.md b/content/features/variables.md index d761161c..461668fa 100644 --- a/content/features/variables.md +++ b/content/features/variables.md @@ -47,7 +47,7 @@ The examples above focused on using variables to control _values in CSS rules_, #### Selectors -Version: 1.4.0 +_v1.4.0_ ```less // Variables @@ -70,7 +70,7 @@ Compiles to: } ``` -### URLs +#### URLs ```less // Variables @@ -85,7 +85,7 @@ body { #### Import Statements -Version: 1.4.0 +_v1.4.0_ Syntax: `@import "@{themes}/tidal-wave.less";` @@ -103,7 +103,7 @@ Example: #### Properties -Version: 1.6.0 +_v1.6.0_ ```less @property: color; @@ -210,6 +210,53 @@ Compiles to: } ``` +### Properties as Variables + +_v2.5.0_ + +You can easily treat properties like variables using the `$prop` syntax. Sometimes this can +make your code a little lighter. + +```less +.widget { + color: #efefef; + background-color: $color; +} +``` + +Compiles to: + +```css +.widget { + color: #efefef; + background-color: #efefef; +} +``` + +Note that, like variables, Less will choose the last property within the current/parent scope +as being the "final" value. + +```less +.block { + color: red; + .inner { + background-color: $color; + } + color: blue; +} +``` + +Compiles to: +```css +.block { + color: red; + color: blue; +} +.block .inner { + background-color: blue; +} +``` + ### Default Variables We sometimes get requests for default variables - an ability to set a variable only if it is not already set. This feature is not required because you can easily override a variable by putting the definition afterwards.