1. <template>
  2.  <div class="alert">
  3.      <div class="zhezhao">
  4.          <div class="alertMain">
  5.              <div class="title">温馨提示</div>
  6.              <div class="content">删除某个内容</div>
  7.              <div class="btnlist">
  8.                  <div class="cancel btn">取消</div>
  9.                  <div class="comfirm btn">确认</div>
  10.              </div>
  11.          </div>
  12.      </div>
  13.  </div>
  14. </template>
  16. <script>
  17.  export default {
  18.  name:'',
  19.  data () {
  20.  return {
  22.  }
  23.  },
  24.  components: {
  26.  }
  27.  }
  28. </script>
  30. <style lang="less">
  31. @theme-color:orange;
  32. @default-size:18px;
  33. @font-color:#ccc;
  34. @zhezhaoop:0.6;
  35. .fullScreen(){
  36.     width: 100vw;
  37.     height: 100vh;
  38.     display: flex;
  39. }
  40. .defaultPadding(){
  41.     padding: 10px;
  42. }
  43. .button(){
  44.     padding: 20px;
  45.     text-align: center;
  46. }
  47. .alert{
  48.    .fullScreen();
  49.    .zhezhao{
  50.  .fullScreen();
  51.   background-color: rgba(0,0,0,.2);
  52.   justify-content: center;
  53.   align-items: center;
  54.    }
  55.    .alertMain{
  56.        width: 600px;
  57.        height: 400px;
  58.        background-color: #fff;
  59.        display: flex;
  60.        flex-direction: column;
  61.        position: relative;
  62.        .title{
  63.            font-size:@default-size;
  64.            height: 50px;
  65.            background-color: @theme-color;
  66.            color:@font-color;
  67.            .defaultPadding();
  68.            text-align: left;
  69.            line-height: 50px;
  70.            font-weight: 900;
  71.        }
  72.        .content{
  73.            .defaultPadding();
  74.            font-size:@default-size;
  75.        }
  76.        .btnlist{
  77.         position: absolute;
  78.         bottom:0;
  79.         left: 0;
  80.         display: flex;
  81.         width: 100%;
  82.        }
  83.        .btn{
  84.            .button();
  85.            width: 50%;
  86.        }
  87.        .cancel{
  88.            background-color: pink;
  89.             color:@font-color;
  90.        }
  91.        .comfirm{
  92.            background-color: yellowgreen;
  93.             color:@font-color;
  94.        }
  95.    }
  96. }
  98. </style>

1.函数

使用函数对需要设置的公共样式进行提取

.fullScreen(){
    width: 100vw;
    height: 100vh;
    display: flex;
}

使用
image.png

2.变量

@theme-color:orange;
@default-size:18px;
@font-color:#ccc;
@zhezhaoop:0.6;

使用：
image.png

3.嵌套

对于一系列的样式可以进行嵌套
切记在style上要定义一个lang属性，属性值是less