eztephen eztephen - 4 months ago 18
Less Question

Call all class styles into one class using SCSS or LESS

This bothers me a while. I want to make a class that contains a specific group of classes (If this is to be possible). Like this:

.main_class {
//Contains multiple class css
class_one_css
class_two_css
class_three_css
}


Then you could call it like this

<input type="text" class="main_class"/>


Instead of calling multiple classes like this

<input type="text" class="class_one class_two class_three"/>


Hope to get an answer soon. Thank you.

Answer

You can achieve this by using LESS.. Sample pen

LESS css

.class_one {
    background: #c0c0c0;
  }
.class_two {
    width: 200px;
    height:100px;
    border: 1px solid black;
 }
 .class_three {
    text-align: center;
    padding: 15px;
 }

 .main_class {
    .class_one ();
    .class_two ();
    .class_three ();
 }

HTML

<div class="main_class">
   Your text goes here
</div>