LESS - Namespaces and Accessors

You can group the variables and mixins under a namespace to separate them from the other rulesets. This can be useful if you have a lot of rules including fewer or more style sheets LESS, and you want to avoid naming clashes.

To create a namespace, just wrap your rules in a new selector id:

#myNamespace {

.selector1 { ... }

#selector2 { ... }

}

{codeBox}

Then you can reference the rules in the namespace using the child selector, >:

#myNamespace > .selector1;

#myNamespace > #selector2;{codeBox}

For example, let’s encapsulate our container width example from the last section in a namespace called #articlePage:

#articlePage {

@outerWidth: 960px;

@borderWidth: 10px;

@padding: 10px;

#containerStyle {

width: @outerWidth - ( @borderWidth + @padding ) * 2;

border: @borderWidth solid #999;

padding: @padding;

}

}

{codeBox}

We can now mix the entire #containerStyle ruleset into a #container rule to style our actual container, as follows:

#container {

#articlePage > #containerStyle;

}{codeBox}


*

Post a Comment (0)
Previous Post Next Post