Open In App

Less.js Detached Rulesets Property / variable accessors

Improve
Improve
Like Article
Like
Save
Share
Report

LESS is a simple CSS pre-processor that makes it possible to create manageable, customizable, and reusable style sheets for websites. LESS is a dynamic style sheet language that increases the working power of CSS. LESS is cross-browser compatible. 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. This also 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 into 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 property/ variable accessors: In the detached rulesets property, you can use property/variable accessors (also called “lookups”) to select a value from variable (detached) rulesets.

 

Syntax:

@config: {
    opt1: true;
    opt2: false;
}
.mixin() when (@config[opt1] = true) {
    ...
}

Example 1: The following example demonstrates the use of detached rulesets property / variable accessors in less.

HTML




<!doctype html>
<head>
    <title>Mixin Guards</title>
    <link rel="stylesheet" href="style.css" 
          type="text/css" />
</head>
  
<body><br><br>
    <h1 class="box"><b>GeeksforGeeks</b></h1>
    <h2>Less.js Detached Rulesets 
      Property / variable accessors</h2>
</body>
</html>


style.less: Create the less file.

CSS




@config: {
    opt1: true;
    opt2: false;
}
    
.mixin() when (@config[opt1] = true) {
    @primary:green;
    @text:white;
    @bg:black;
    @font:40px;
}
    
.box {
    .mixin();
    color: @primary;
    text-align: center;
    font-size: @font;
}
h2 {
    .mixin();
    color: @text;
    text-align: center;    
}
body {
    .mixin();
    background-color: @bg;
}


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




.box {
    color: green;
    text-align: center;
    font-size: 40px;
}
h2 {
    color: white;
    text-align: center;
}
body {
    background-color: black;
}


Output:

 

Example 2:  The following example demonstrates the use of detached rulesets property / variable accessors in less.

HTML




<!doctype html>
<head>
     <title>Mixin Guards</title>
     <link rel="stylesheet" href="style.css" 
           type="text/css" />
</head>
  
<body><br><br>
    <h1 class="style"><b>GeeksforGeeks</b></h1>
    <h2>Less.js Detached Rulesets 
      Property / variable accessors</h2>
</body>
</html>


style.less: Create the less file.

CSS




@config: {
    @dark-color: {
      primary: darkgreen;
    }
    @light-color: {
      primary: lightblue;
    }
}
    
.style {
    @color: dark-color;
    color: @config[@@color][primary];
    text-align: center;
}
h2 {
    border-color: lightgray;
    width: "10px";
    height: 50px;
    border: 5px solid blue;
    outline: 2px dashed red;
    padding: 15px;
    margin5px;
    text-align: center;    
}


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




.style {
      color: darkgreen;
      text-align: center;
}
h2 {
    border-color: lightgray;
    width: "10px";
    height: 50px;
    border: 5px solid blue;
    outline: 2px dashed red;
    padding: 15px;
    margin: 5px;
    text-align: center;
}


Output:

 

Reference: https://lesscss.org/features/#detached-rulesets-feature-property-variable-accessors



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