less的使用（好文章）

好文章链接：30分钟学会less

自己总结一下这篇文章中的几个关键字：变量、混合、函数、嵌套、@import

下面贴上自己照着上面写的一些代码：

<template>
    <div class="main">
        <div class="container">1</div>
        <div class="container2">2</div>
        <div id="container2">3</div>
        <div id="header">函数</div>
        <button class="button">函数</button>
        <div class="sectionBox">函数样式多个参数用分号隔开，且可以为每个参数设置默认值</div>
        <div class="class1">函数有默认值，调用时通过变量名称，而不是位置</div>
        <div class="class2">函数参数有内置变量@arguments,相当于js函数中的arguments</div>
        <div class="parentBox">
            我是父元素
            <div class="child">我是子元素</div>
        </div>
        <div class="one">我是one元素，后面是我的伪类</div>
    </div>
</template>

<script>
export default {

}
</script>

<style lang="less">
@color: pink;//样式变量
@mainColor:green;//样式变量
@main:main;//类名变量
.whbm(){//用于嵌套
    width: auto;
    height: 50px;
    background-color: @color;
    margin-bottom: 5px;
    float:left;
}

.@{main}{//用变量当类名//不能会用#
    background-color: @mainColor;
    position:absolute;
    top:0;
    left:0;
    bottom:0;
    width:100%;
}
.container{
    .whbm();//和.border_radius效果一样
 }
.container2{
    .whbm();//混合
}
#container2{
    .whbm();//混合
}

// fun_less
.border-radius(@radius) {//函数样式用于嵌套   @radius是一个参数变量
  -webkit-border-radius: @radius;
     -moz-border-radius: @radius;
          border-radius: @radius;
}
#header{
    .whbm();
    .border-radius(20px);
}
.button{
    .whbm();
    .border-radius(50%);
}
// 函数的参数设置默认值：
.border-radius2(@radius: 5px) {
    -webkit-border-radius: @radius;
    -moz-border-radius: @radius;
    border-radius: @radius;
}
// 函数有多个参数时用分号隔开
.mixin(@color:orange; @padding) {
    color: @color;
    padding: @padding;
}
// 函数如果没有参数，在转译成 css 时就不会被打印出来，详见上面混合中的示例
.wrap() {
    text-wrap: wrap;
}

.sectionBox{
    .whbm();
    .border-radius(10px);
    .mixin(orange;10px);
}

// 函数参数如果有默认，调用时就是通过变量名称，而不是位置
.cmp(@color: black; @margin: 10px; @padding: 20px 0;) {
  color: @color;
  margin: @margin;
  padding: @padding;
}
.class1 {
    .whbm();
    .cmp(@margin: 20px;@padding:10px 0; @color: #33acfe);
}

// 函数参数有个内置变量 @arguments，相当于 js 中的 arguments
.box-shadow(@x: 10px; @y: 10px; @blur: 1px; @color: #000) {
  -webkit-box-shadow: @arguments;
     -moz-box-shadow: @arguments;
          box-shadow: @arguments;
}
.class2{
    .whbm();
    .box-shadow();
}
// 函数名允许相同，但参数不同，类似于 java 中多态的概念
.mixin1(@color: black) {  };
.mixin1(@color: black; @margin: 10px) { };

// 父子元素的写法  (可以嵌套)
.parentBox{
    float:left;
    width:200px;
    height:100px;
    background:orangered;
    color:black;
    position: relative;
    .child{
        background:blueviolet;
        width:100%;
        height:30px;
    };
    &:after{//伪类元素的写法  //用&号代替父元素
        content:"我是父元素的伪类元素";
        position: absolute;
        top:0;
        right:-100px;
        width:100px;
        height:100px;
        background:chocolate;
    }
}

// 神奇 @import  (从外部引入less文件，像引入模块一样)
//借机说一下@import引入样式，与link引入样式的区别，link引入样式，先加载css再加载html，不会出现HTML混乱，而@import引入样式，先加载html后加载样式，会引起html先加载时，样式混乱。
// 文件后缀名
// 在less中，@import声明会根据引入的文件的后缀进行相应的解析。

// 如果文件是.css的后缀，该文件将会被解析成css样式，然后@import语句会保持原样。
// 如果文件是其他类型的后缀的话，文件会被解析成less文件，然后进行导入。
// 如果文件没有任何后缀，将会为文件添加.less的后缀，并且当成less文件进行导入。

@import "../less/one";//不指定后缀时，已less格式引入
@import url("../less/two.less");//我会覆盖one的样式   这种带url的语法和不带url的语法无差别

// less提供了数种后缀给css的@import语句，可以更加灵活的去使用外部文件。
// 语法：@import（keyword）"filename";
// 下面是已经实现了的import准则：
// reference：使用less文件到时不将其输出。
// inline：将源文件包含进来但是不进行处理。
// less：无论文件后缀是什么类型，都当成less格式的文件。
// css：无论文件后缀是什么类型，都当成css格式的文件。
// once：只引入文件一次（为默认行为）。
// multiple：引入文件数次。
// optional：当文件没找到时会继续编译。
@import (optional, reference) "foo.less";

</style>