Question

我有以下情况......

section {
  margin: 10px;
  padding: 10px;
}
section label {
  display: inline-block;
  width: 250px;
}

...在LESS中有一种方法可以创建一个具有这些属性的全局函数，并在x选择器上共享它......

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>

<div ng-app="App" ng-controller="appCtrl">
  
  <section>
    <label for="startdatefromcontroller">Init from controller through $scope</label>
    <input type="datetime-local" ng-model="event.startdatefromcontroller" id="startdatefromcontroller">
  </section>

</div>

感谢您的任何建议

Answer 1

有，它被称为mixin。请参阅：http://lesscss.org/features/

Answer 2

根据建议，您必须查看Mixins。直接了解您的问题。

您应该编写以下 LESS 代码：

.my-pet-basics() {
    padding:0;
    margin:0 1em;
    font-size:1.2em;
    background:red;
}

#cat {
  .my-pet-basics();
  //..additional unique properties
}

#dog {
  .my-pet-basics();
  //..additional unique properties
}

这导致以下 CSS 一：

#cat {
  padding: 0;
  margin: 0 1em;
  font-size: 1.2em;
  background: red;

  //..additional unique properties
}

#dog {
  padding: 0;
  margin: 0 1em;
  font-size: 1.2em;
  background: red;

  //..additional unique properties
}

在mixin名称后添加()对于在最终CSS中没有.my-pet-basics类很有用。

如何在LESS中的x选择器之间共享选择器属性

2 个答案: