CODEWITHSUNDEEP
cssless
Ando
Ando

Reputation: 1847

LESS mixins vs classes

I'm looking into LESS because I definitely see some of their benefits. For instance colour declaration.

One thing I don't understand tho, and maybe I'm not getting the flow right is - why use the following LESS snippet 

.radius {
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  border-radius:5px;  
}
.btn-red{
  background-color:red;
  .radius;     
}
.btn-green{
  background-color:green;
  .radius;
}
...

When we can use the .radius class in the html file right away. I'm left with the impression that LESS will add a ton of duplicate code once it gets compiled.

I'm using the following, which makes more sense. Same with font-size, margins, etc... Aren't classes used in such cases?

<div class="btn-red radius">Cancel</div>
<div class="btn-green radius">Go</div>

Upvotes: 1

Views: 1110

Answers (4)

Unicornist
Unicornist

Reputation: 932

Because there are cases that developer has-no-access or don't-want to change the markup. and the only solution is to include all props from a predefined class.

for example:

you have bootstrap loaded (then you already have .has-success and .has-error classes) and if you want to use HTML5's native form validation using input's :valid and :invalid states, you have to use JavaScript to add/remove success/error classes based on input's states. but with this feature of LESS you can include all props of success/error class inside input's states. the code for this example could be something like this:

#myinput {
    &:valid { .has-success; }
    &:invalid { .has-error; }
}

Upvotes: 0

halfzebra
halfzebra

Reputation: 6807

The snippet above does not benefit from SASS/LESS capabilities that much. Lets have a closer look and check this SCSS snippet.

// Abstract placeholder.
%radius {
  border-radius: 5px;
}

// Put your global styling here.
// I'm assuming that you can alter the markup and have button.btn.btn-green
.btn {

  // Color modifier.
  &-red {
    @extend %radius;
    background-color: red;
  }
  &-green {
    @extend %radius;
    background-color: green;
  }
}

The CSS output will be:

.btn-red, .btn-green {
  border-radius: 5px;
}

.btn-red {
  background-color: red;
}
.btn-green {
  background-color: green;
}

And then you have to pick up Autoprefixer and vendor-prefixes issue is solved once and for all.

Upvotes: 2

recursive
recursive

Reputation: 86174

There are several benefits.

  1. You can use more semantic class names. Rather than encoding style information directly in your class names, (btn-red, radius) you could use a single class that conveys the usage of the style, rather than its contents.

  2. You can avoid repeating yourself. @radius-size: 5px; -webkit-border-radius:@radius-size; -moz-border-radius:@radius-size; border-radius:@radius-size;

  3. You can parameterize it so that you'd be able to use different radiuses (radii?) in different contexts. .radius(@radius-size) { ... }

Upvotes: 1

GolezTrol
GolezTrol

Reputation: 116190

Because now, you can just specify the class btn_red or btn_green and all the buttons will automatically have a radius.

Your HTML should contain only the semantics, and styling or classes referring to styling should not be part of it.

That applies to the other classes as well. If for instance, you would rename btn_red to btn_cancel, you have a meaningful classname that you can apply to any kind of cancel button. And in the CSS you can specify that a cancel button is red and a 'Go' button is green, and both have a radius, without needing to modify the HTML at all.

So, the ultimate goal is to have the HTML describe the structure and the CSS describe how that structure should look. And a CSS preprocessor is only their to make a bulky spaghetti-like CSS file more structured.

Upvotes: 1

Related Questions