Try Out New Website Button- Maker Button-Maker

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 ...

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}


Rate this article

Loading...

Post a Comment

Cookies Consent

This website uses cookies to ensure you get the best experience on our website.

Cookies Policy

We employ the use of cookies. By accessing Lantro UI, you agreed to use cookies in agreement with the Lantro UI's Privacy Policy.

Most interactive websites use cookies to let us retrieve the user’s details for each visit. Cookies are used by our website to enable the functionality of certain areas to make it easier for people visiting our website. Some of our affiliate/advertising partners may also use cookies.