Convert this CSS to Less

问题

I have the following CSS code and I'd like to convert it to LESS

.navbar-nav,
.navbar-nav > li,
.navbar-nav > li > a {
    height: 100% !important;
}

And here is the HTML:

<ul class="nav navbar-nav">
                        <li class="active"><a href="#">Link</a></li>
                        <li><a href="#">Link</a></li>
                        <li class="dropdown">

                        </li>
                    </ul>

What is the correct or the best way to convert the CSS to LESS?

回答1:

Option 1 - As Is

You can always keep it as it is. Valid CSS is also valid LESS.

Option 2 - Parent Nesting with Extending

A nested LESS syntax using extend yields the same code:

.navbar-nav {
  height: 100% !important;
  > li {
    &:extend(.navbar-nav);
    > a {
      &:extend(.navbar-nav);      
    }
  }
}

This may have unwanted side effects if .navbar-nav has other properties associated with it, as all those will be carried over to the nested elements as well.

Option 3 - Like Option 2 but Avoiding other Properties

.navbar-nav {
  /* non-extended properties can go here */
  * > & {
    height: 100% !important;
  }
  > li {
    &:extend(* > .navbar-nav);
    > a {
      &:extend(* > .navbar-nav);      
    }
  }
}

The output for this would actually be this CSS:

* > .navbar-nav,
.navbar-nav > li,
.navbar-nav > li > a {
  height: 100% !important;
}

But * > .navbar-nav will match all the same elements as .navbar-nav would, and at least this allows you to group the three together without getting undesired properties set on the li and a elements that may also need setting in the .navbar-nav element (if such is a problem).

Option 4 - Bogus Class

Setting a bogus class name allows you to also keep separate properties in .navbar-nav, but generates some extra, unused css:

.setHeight {
  height: 100% !important; 
}

.navbar-nav {
  &:extend(.setHeight);
  > li {
    &:extend(.setHeight);
    > a {
      &:extend(.setHeight);      
    }
  }
}

CSS Output is this:

.setHeight,
.navbar-nav,
.navbar-nav > li,
.navbar-nav > li > a {
  height: 100% !important;
}

(Future) Option 5 - Like Option 4, but No Bogus Class

In the future (current version of LESS as of this writing is 1.5.1), LESS will likely support extending pure mixins, in which case something like this will work so that the bogus class name is not generated:

.setHeight() {
  height: 100% !important; 
}

.navbar-nav {
  &:extend(.setHeight);
  > li {
    &:extend(.setHeight);
    > a {
      &:extend(.setHeight);      
    }
  }
}

Conclusion

What is "best" is purely going to be a matter of other factors that only you can determine for your project. In many cases, it may be best to simply keep the code as is (Option 1), but there may be warrant for using another option depending on the rest of your LESS structure and CSS property layout.

回答2:

I would recommend Lessify: http://leafo.net/lessphp/lessify/. Just type your CSS and get LESS.

You can also check out this Webmasters thread: https://webmasters.stackexchange.com/questions/20369/is-there-a-tool-that-converts-css-to-less-css.

来源：https://stackoverflow.com/questions/20821478/convert-this-css-to-less

标签

less