Open In App

Less.js Detached Rulesets Scoping

Improve
Improve
Like Article
Like
Save
Share
Report

LESS (Leaner Style Sheets) is a simple CSS pre-processor that facilitates the creation of manageable, customizable, and reusable style sheets for websites. It is a dynamic style sheet language that enhances the working power of CSS. LESS supports cross-browser compatibility. CSS pre-processor is a scripting language that improves CSS and gets compiled into regular CSS syntax so that the web browser can use it. It is also a backward-compatible language extension for CSS that provides functionalities like variables, functions, mixins, and operations that enable us to build dynamic CSS.

Detached Rulesets:  A detached ruleset is a group of CSS properties, nested rulesets, media declarations, or anything else stored in a variable. You can include it in a ruleset or another structure and all its properties are going to be copied there. You can also use it as a mixin argument and pass it around as any other variable.

Detached Rulesets Scoping: A detached ruleset scoping can use all variables and mixins accessible where it is defined and called. Both definition and caller scopes are available to it. If both scopes contain the same variable or mixin, the declaration scope value takes precedence. Declaration scope is the one where the detached ruleset body is defined. Copying a detached ruleset from one variable into another cannot modify its scope. The ruleset does not gain access to new scopes just by being referenced there.

 

Syntax:

#ss {
    .style1() {
        @detached: {
            color: @color;
        }; 
    }
}

Example 1: This example demonstrates the use of detached rulesets scoping in less.

HTML




<!doctype html>
<head>
    <link rel="stylesheet" href="style.css" 
          type="text/css" />
</head>
<body>
    <h1 class="Detached">GeeksforGeeks</h1>
    <h3 class="detached"><b>Less.js Detached 
      Rulesets Scoping</b></h3>
</body>
</html>


style.less: Create a less file.

CSS




#ss {
    .style1() {
        @detached: {
            color: @color;
        }; // define detached ruleset
    }
}
    
.style2() {
    @color:green;
  
    // Unlocked detached ruleset can see this variable
    text-align:center
  
    // Unlock detached ruleset
    #ss > .style1(); 
}
.style3() {
    @color:black;
    text-align: center;
    #ss > .style1();
}
    
.Detached {
  
    // Unlock/import detached ruleset second time
    .style2(); 
    @detached();
}
.detached {
  
    // Unlock/import detached ruleset third time
    .style3(); 
    @detached();
}


Now, to compile the above LESS code to CSS code, run the following command:

lessc style.less style.css

The compiled CSS file comes to be: 

style.css:

CSS




.Detached {
    text-align: center;
    color: green;
}
.detached {
    text-align: center;
    color: black;
}


Output:

 

Example 2: The following demonstrates the use of detached rulesets scoping in the less.

HTML




<!doctype html>
<head>
    <link rel="stylesheet" href="style.css" 
          type="text/css" />
</head>
  
<body>
    <h1 class="selector">GeeksforGeeks</h1>
    <h3 class="container"><b>Less.js Detached 
      Rulesets Scoping</b></h3>
</body>
</html>


style.less: Create the less file.

CSS




@detached-ruleset: {
    @color:green;
    @white:white;
    @back:black;
    .caller-mixin(); 
};
.selector {
    @detached-ruleset(); 
    .caller-mixin() {
        text-align:center;
        color:@color;
    }
}
.container {
    @detached-ruleset(); 
    .caller-mixin() {
        text-align:center;
        color:@white;
    }
}
    
body {
    @detached-ruleset();
    .caller-mixin() {
        background-color: @back;
    }
}


Now, to compile the above LESS code to CSS code, run the following command:

lessc style.less style.css

The compiled CSS file comes to be: 

style.css

CSS




.selector {
    text-align: center;
    color: green;
}
.container {
    text-align: center;
    color: white;
}
body {
    background-color: black;
}


Output:

 

Reference: https://lesscss.org/features/#detached-rulesets-feature-scoping



Last Updated : 16 Oct, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads