0

我有以下 HTML：

<div class="float-left inline orderby">
   <div class="arrow up" style="margin-bottom: 2px; margin-left: 2px"></div>
   <div class="arrow down" style="margin-left: 2px;"></div>
   <input type="checkbox" data-ng-model="inverse" style="margin-left: 0px; margin-right: 10px;">
</div>

我正在尝试使用较少的预处理器来创建我的 CSS。

我如何使用 less 创建 CSS 以从这个示例中删除样式。特别是我不确定如何处理第一个和第二个 DIV 之间的差异

4

2 回答 2

0

有点不清楚你的问题到底是什么。我可以通过两种方式阅读它：

(1) 你不能用 LESS移除css setstyle

如果您style的 html 元素实际上有一个属性，那么它根本不会受到 LESS 的直接影响（因此它不能被 LESS“删除”）。此外，使用 LESS克服这些样式的唯一方法是使用与 CSS 可用的完全相同的解决方案，即!important属性（我鄙视，但事实是 CSS 样式可用的事实）。style因此，这将消除您对所有直接孩子施加的边距div（如您的示例所示）：

.orderby > * {
    margin: 0 !important;
}

但也许你想知道如何...

(2) 您可以将代码从style移到 LESS

在这种情况下，它是这样的：

较少的

.orderby {
  .arrow {
     margin-left: 2px;
     &:first-child { /* or could use &.up */
       margin-top: 2px;
     }
  }
  input {
    margin-left: 0;
    margin-right: 10px; 
  }
}

CSS 输出

.orderby {
  .arrow {
     margin-left: 2px
     &:first-child { /* or could use &.up */
       margin-top: 2px;
     }
  }
  input {
    margin-left: 0;
    margin-right: 10px; 
  }
}
于 2013-09-05T23:39:24.623 回答
0

你的意思是你想删除内联样式？

.orderby .arrow, .orderby input {
    margin: 0;

    &.up {
        /* styles for first div */
    }

    &.down {
        /* styles for second div */
    }
}
于 2013-09-05T09:04:43.423 回答