关于前端:less学习相关

// 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); // 每一个迭代内的 代码
// }