Friday, March 3, 2017

LESS - Extend

Extend is a LESS pseudo class which extend other selector styles in one selector by using :extend selector.

Example

The below example demonstrates use of extend in the LESS file:

extend_syntax.htm

<!doctype html>
<head>
   <link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
   <div class="style">
     <h2>Welcome to TutorialsPoint</h2>
     <p>Hello!!!!!</p>
   </div>
</body>
</html>
Next, create file style.less

style.less

h2 {
  &:extend(.style);
  font-style: italic;
}
.style {
  background: green;
}
You can compile the extend.less file to extend.css by using the following command:
lessc style.less style.css
Next execute the above command, it will create style.css file automatically with the below code:

style.css

h2 {
  font-style: italic;
}
.style,
h2 {
  background: blue;
}

Output

Let's carry out the following steps to see how above code works:
  • Save the above html code in extend_syntax.htm file.
  • Open this HTML file in a browser, an output as below gets displayed.
Less Extend

Extend Syntax

Extend is placed into ruleset or attached to a selector. It is similar to pseudo class containing one or more classes, which are separated by comma. Using the optional keyword all, each selector can be followed.

Example

The below example demonstrates use of extend syntax in the LESS file:

extend_syntax.htm

<!doctype html>
<head>
   <link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
   <div class="style">
    <h2>Welcome to TutorialsPoint</h2>
    <div class="container">
      <p>Hello!!!!!</p>
    </div>
   </div>
</body>
</html>
Next, create file style.less

style.less

.style:extend(.container, .img)
{
  background: #BF70A5;
}
.container {
  font-style: italic;
}
.img{
   font-size: 30px;
 }
You can compile the style.less file to style.css by using the following command:
lessc style.less style.css
Next execute the above command, it will create style.css file automatically with the below code:

style.css

.style {
  background: #BF70A5;
}
.container,
.style {
  font-style: italic;
}
.img,
.style {
  font-size: 30px;
}

Output

Let's carry out the following steps to see how above code works:
  • Save the above html code in extend_syntax.htm file.
  • Open this HTML file in a browser, an output as below gets displayed.
Less Extend Following table lists all the types of extend syntax which you can use in LESS:
S.N.Types & Description
1 Extend Attached to Selector
Extend is connected to a selector which looks similar to a pseudo class with selector as parameter.
2 Extend Inside Ruleset
The &:extend(selector) syntax can be put inside the body of ruleset.
3 Extending Nested Selectors
Nested selectors are matched using extend selector.
4 Exact Matching with Extend
By default extend look for the exact match between the selectors.
5 nth Expression
The form of nth expression is important in extend otherwise, it treats selector as different.
6 Extend "all"
When the keyword all is identified at last in extend argument then LESS matches that selector as part of another selector.
7 Selector Interpolation with Extend
The extend can be connected to interpolated selector.
8 Scoping/Extend inside @media
Extend matches the selector only that is present inside the same media declaration.
9 Duplication Detection
It cannot detect the duplication of selectors.
Following are the types of Use Cases for Extend
S.N.Types & Description
1 Classic Use Case
Classic use case is used to keep away adding the base class in LESS.
2 Reducing CSS Size
Extend is used to move the selector as far as the properties you want to use, which helps in reducing the css generated code.
3 Combining Styles/ A More Advanced Mixin
Using extend we can combine the same styles of a particular selectors into other selector.
Labels:

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)