将此CSS转换为Less [英] Convert this CSS to Less

问题描述

我有以下CSS代码，我想将其转换为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;
}

这是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>

将CSS转换为LESS的正确或最佳方法是什么?

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

推荐答案

选项1-原样

您始终可以保持原样.有效的CSS也是有效的LESS.

Option 1 - As Is

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

使用 extend 的嵌套LESS语法会产生相同的代码:

A nested LESS syntax using extend yields the same code:

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

如果 .navbar-nav 具有与之相关的其他属性，这可能会产生有害的副作用，因为所有这些属性也会被带到嵌套元素中./p>

选项3-与选项2类似，但避免使用其他属性

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.

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

此输出实际上是以下CSS:

The output for this would actually be this CSS:

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

但是 *>.navbar-nav 将匹配与 .navbar-nav 相同的所有元素，至少这使您可以将这三个元素组合在一起而不会在 li上设置不需要的属性和 a 元素，可能还需要在 .navbar-nav 元素中进行设置(如果有问题).

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).

设置伪造的类名还可以使您在 .navbar-nav 中保留单独的属性，但是会生成一些未使用的CSS:

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输出是这样的:

CSS Output is this:

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

(未来)选项5-与选项4类似，但没有伪造的类别

将来(在撰写本文时，LESS的当前版本为1.5.1)，LESS可能会支持扩展纯mixin，在这种情况下，这样的方法将起作用，从而不会生成虚假的类名:

(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);      
    }
  }
}

结论

什么是最佳"，纯粹是由其他因素决定的，只有您才能确定自己的项目.在许多情况下，最好保持代码原样(选项 1)，但可能需要根据 LESS 结构和 CSS 属性布局的其余部分使用其他选项.

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.

这篇关于将此CSS转换为Less的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！