less 简单使用

<template>
  <div id="app">
    <p class="p1">p1</p>

    <p class="p2">p2</p>

        <p class="p3">p3</p>
      <p class="p4">p4</p>


      <p class="p5">p5</p>

      <p class="p6">p6</p>

      <p class="p7">p7</p>
  </div>
</template>

<style lang="less" scoped>
// import 使用 import可以不在行首
// @import 'path/test.less';

// 定义变量
@dark-color: #999;
.p1 {
  color: @dark-color;
}

// 内置函数 
@gray-color: #666;
.p2 {
  color: darken(@gray-color, 30%);
  // lighten(@gray-color, 30%)
}

// 定义选择器
@selector: .p3;
@{selector} {
  color: red;
}

// url 使用
@img-url: '../img';
.p4 {
  // background-image: url('@{img-url}/img.png');
}

// mixin 的使用
.cb(@color: red, @background-color: green) {
  color: @color;
  background-color: @background-color;
}
.p5 {
  .cb(green, red); // 也可以这样：.cb(@color: @color, @background-color: green)

  // !important 的使用
  // .cb(green, red) !important;
}

// mixin 中的selector
.hover(@color: red) {
  &:hover {
    color: @color;
  }
}

.p6 {
  .hover(green); // hover的时候是绿色
}

// arguments 参数
.box-shadow(@x: 0; @y: 0; @blur: 1px; @color: #000) {
  -webkit-box-shadow: @arguments;
     -moz-box-shadow: @arguments;
          box-shadow: @arguments;
}

.p7 {
  .box-shadow(2px, 5px);
}

// 循环
.generate-columns(4);

.generate-columns(@n, @i: 1) when (@i =< @n) {
  .column-@{i} {
     (@i * 100% / @n);
  }
  .generate-columns(@n, (@i + 1));
} 

// .column-1 {
//    25%;
// }
// .column-2 {
//    50%;
// }
// .column-3 {
//    75%;
// }
// .column-4 {
//    100%;
// }


// extend 的使用 用不到