CSS模块化:Less简单示例

Less代码：

@globalColor: #ececec;
@property-color: color;
@width: 300px;
@color: red;
.flex_row() {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
 
.width_test(L, @width: 1px, @color: #000) {
    border: @width solid @color;
}
 
.width_test(R, @width: 10px, @color: #000) {
    border: @width solid @color;
}
 
.trangle(L, @width, @color) {
    width: 0;
    height: 0;
    border-width: @width;
    border-style: solid;
    border-color: transparent transparent transparent @color;
    border-right-width: 0;
}
 
.wrapper {
    width: 1920px;
    height: 983px;
    //  border: 1px solid red;
    display: flex;
    justify-content: space-around;
    align-items: center;
    font-family: "microsoft yahei";
    background-color: rgb(4, 25, 42) !important;
    @{property-color}: red;
    .flex_row;
    .width_test(R);
    .trangle(L, @width/2, @color);
}

 

编译后的CSS代码：为了清晰结构，我故意换行了

.wrapper {
  width: 1920px;
  height: 983px;
  justify-content: space-around;
  font-family: "microsoft yahei";
  background-color: #04192a !important;
  
  color: red;
  
  display: flex;
  justify-content: space-between;
  align-items: center;
  
  border: 10px solid #000;
  
  width: 0;
  height: 0;
  border-width: 150px;
  border-style: solid;
  border-color: transparent transparent transparent red;
  border-right-width: 0;
}

官网：

http://lesscss.cn/