Less learning related

// less中文https://less.bootcss.com/
/* ****************************** 变量variable ************************************* */
// 基础篇
@variable_width: 10px;

.variable_test {
  width: @variable_width;
}

// 进阶篇
@variable_name: banner;

.@{variable_name} {
  color: red;
  // background: $color;//新属性v3.0.0
}

.variable_img {
  background:url("../@{variable_name}/icon.png");
}

/* ****************************** parent selector & **************************************/
// 基础篇
a {
  color: red;

  &:hover {
    color: blue;
  }
}

.button {
  width: 20px;

  &-ok {
    width: 40px;
  }

  .pre & {
    width: 60px;
  }
}

// 进阶篇
.link {
  &+& {
    // .link+.link
    color: red;
  }

  & & {
    // .link .link
    color: green;
  }

  && {
    // .link.link
    color: blue;
  }

  &,
  &ish {
    // .link,.linkish
    color: cyan;
  }
}

.grand {
  .parent {

    //这里的&代表 .grand .parent
    &>& {
      // .grand .parent>.grand .parent
      color: red;
    }

    & & {
      // .grand .parent .grand .parent
      color: green;
    }

    && {
      // .grand .parent.grand .parent
      color: blue;
    }

    &,
    &ish {
      // .grand .parent,.grand .parentish
      color: cyan;
    }
  }
}

p,
a {
  border-top: 2px dotted #366;

  &+& {
    // 编译结果
    // p+p,
    // p+a,
    // a+p,
    // a+a,
    border-top: 0;
  }
}

/* ****************************** :extend **************************************/
// :extend有诸多使用方式，也有诸多限制
nav ul {
  &:extend(.inline); // .inline,nav ul {color: red;}
  background: blue;
}

.inline {
  color: red;
}

.cool {
  &:extend(.inline, .bucket);
}

pre:hover,
.some-class {
  &:extend(div pre);
  // pre:hover:extend(div pre),.some-class:extend(div pre) {}
}

[title=identifier] {
  color: blue;
}

.noQuote:extend([title=identifier]) {
  // [title=identifier],.noQuoteP
}

.a.b.test,
.test.c {
  color: orange;
}

.test {
  &:hover {
    color: green;
  }
}

.replacement:extend(.test all) {
  // .a.b.test,.test.c,.a.b.replacement,.replacement.c {}
  // .test:hover,.replacement:hover{}
}

.bucket {
  color: blue;
}

@{variable}:extend(.bucket) {}

@variable: .selector;

@media screen {
  .selector {
    color: blue;
  }

  @media (min-width: 1023px) {
    .selector {
      color: blue;
    }
  }
}

.topLevel:extend(.selector) {}

/* ****************************** Merge & **************************************/
.merge_mixin() {
  box-shadow+: inset 0 0 10px #555;
}

.merge_myclass {
  .merge_mixin();
  box-shadow+: 0 0 20px black;
}

.merge_trans() {
  transform+_: scale(2);
}

.merge_myclass {
  .merge_trans();
  transform+_: rotate(15deg);
}

/* ****************************** mixin **************************************/
// 基础篇
.mixin_red {
  color: red;
}

.mixin_theme {
  .mixin_red();
}

// 进阶篇
// ##、定义一个mixin类:
// 方式一:(会在css中输出)
// .red {
//     color: red
// }
// 方式二:(不会在css中输出)
.mixin_blue() {
  color: blue;
}

.my-hover-mixin() {
  &:hover {
    border: 1px solid red;
  }
}

button {
  .my-hover-mixin();
}

// ##、命名空间:使用#()或者.()，不加()会在css中输出
// 调用:
// #mixin_parent>.child()
// #mixin_parent .child()
// #mixin_parent.child()

#mixin_parent() {
  .child {
    font-size: 16px;
  }
}

.mixin_test {
  #mixin_parent.child()
}

// mixin传参(分号和逗号都可以，保险起见使用分号)
.foo (@bg: #f5f5f5; @color: #900) {
  background: @bg;
  color: @color;
}

.unimportant {
  .foo();
}

// 将mixin用作function：v3.5.0
// .average(@x, @y) {
//   @result: ((@x + @y) / 2);
// }

// div {
//   padding: .average(16px, 50px)[@result];
// }

// mixin递归(>, >=, =, =<, <) 关键字and not
.loop(@counter) when (@counter > 0) {
  .loop((@counter - 1)); // next iteration
  width: (10px * @counter); // code for each iteration
}

div {
  .loop(5)
}

.generate-columns(4);

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

  .generate-columns(@n, (@i + 1));
}

/* ****************************** insert嵌套 **************************************/
// css的写法
.insert_header {
  color: red
}

.insert_header .logo {
  color: black
}

// less写法
.insert_header {
  font-size: 14px;

  .logo {
    color: black
  }
}

// 例如：清除浮动
.clearfix {
  display: block;
  zoom: 1;

  &:after {
    content: "";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
  }
}

// @media嵌套规则
.component {
  @media(min-width:1000px) {
    font-size: 16px;
  }

  @media(min-width:1200px) {
    font-size: 18px;
  }
}


/* ****************************** cal运算 **************************************/
// 支持+-*/四则运算,less默认支持单位换算，一般情况以最左侧
@cal_add: 5cm + 10mm; // 结果是 6cm
@cal_substract: 2 - 3cm - 5mm; // 结果是 -1.5cm

@cal_mixCal: 2 + 5px - 3cm; // 结果是 4px

@cal_base: 5%;
@cal_multiply: @cal_base * 2; // 结果是 10%
@cal_other: @cal_base + @cal_multiply; // 结果是 15%
@cal_color: #224488 / 2; //结果是 #112244

/* ****************************** transfer转义 **************************************/
// ~"anything"形式会被原样输出
@transfer_min768: ~"(min-width: 768px)";
// @min768: (min-width: 768px);//less3.5开始支持简写

.element {
  @media @transfer_min768 {
    font-size: 1.2rem;
  }
}

/* ****************************** fun函数 **************************************/
@fun_base: #f04615;
@fun_width: 0.5;

.fun_class {
  width: percentage(@fun_width); // returns `50%`
  color: saturate(@fun_base, 5%);
  background-color: spin(lighten(@fun_base, 25%), 8);
  // margin: if((2>1), 5px, 10px); //less3.x才支持
}

// @fun_colors: blue, green, red;
// each(@fun_colors, {
//   .@{value} {
//     color: ~"@{value}";
//   }
// });
// @fun_set: {
//   one: blue;
//   two: green;
//   three: red;
// }
// .fun_set {
//   each(@fun_set, {
//     @{key}-@{index}: @value;
//   });
// }
/* ****************************** map映射 **************************************/
#map_colors() {
  primary: blue;
  secondary: green;
}

.map_button {
  // color: #map_colors[primary]; //less3.x开始支持
  // border: 1px solid #map_colors[secondary]; //less3.x开始支持
}

/* ****************************** scope作用域 **************************************/
@scope_var: red;

#page {
  @scope_var: white;

  #header {
    color: @scope_var; // white
  }
}

/* ****************************** 导入 **************************************/
@import "./global.less";


/* ****************************** 使用less **************************************/
/* node */
// npm i less

/* browser */
// <link rel="stylesheet/less" type="text/css" href="styles.less" />
// <script src="less.js" type="text/javascript"></script>

/*修改变量 
less.modifyVars({
  '@buttonFace': '#5B83AD',
  '@buttonText': '#D9EEF2'
});
 */

// ##、@arguments(备注:@arguments跟传入的参数位置息息相关)
// 示例:
// .box-shadow(@x: 0; @y: 0; @blur: 1px; @color: #000) {
//     box-shadow: @arguments;
// }

// ##、@rest...(表示:剩余的参数)
// .pad(@top, @right, @rest...) {
//     padding: @top @right @rest;
// }

// ##、相同名字的mixin
.mixin(@width) {
  width: @width;
}

.mixin(@width, @height: 5) {
  width: @width;
  height: @height;
}

.ya {
  .mixin(10px);
}

// ##、迭代
// .loop(@width:1) when(@width<10) {
//     .loop((@width+1)); //下一个迭代
//     width: (@width*10px); //每一个迭代内的 代码
// }