Less学习（三）----嵌套指令和冒泡，操作符，转义，范围，注释，@import

1. 嵌套指令和冒泡(Nested Directives and Bubbling)
   指令也可以像选择器一样被嵌套，如 media , keyframe.
   冒泡就是 被嵌套的指令会被提升放在最外层,而里面其他的选择器顺序保持不变.
   1.条件指令(eg. @Media, @supports , @document)
   条件指令会把选择器复制到他们的body(体内))并且冒泡
   2.非条件指令(eg. font-face , keyframes)
   非条件指令只会冒泡，他们的body(体内)不会改变

<template>
  <div class="lessbubble">
    <div class="conditionalDir">
      conditionalDir
    </div>
    lessbubble
    <div id="a">放大</div>
  </div>
</template>
<script>
export default {
  data(){
    return{

    }
  }
}
</script>
<style lang="less" scoped>
  @import './lessbubble';
</style>

// 条件指令
.lessbubble{
  .conditionalDir{
// 在不同的屏幕大小下 字体的颜色不同
    @media (min-width: 768px){
      color: red;
    }
    @media (max-width: 768px){
      color: green;
    }
  }
}
// complies to
// @media (min-width: 768px){
//   .lessbubble{
//     .conditionalDir{
//       color: red;
//     }
//   }
// }
// @media (max-width: 768px){
//   .lessbubble{
//     .conditionalDir{
//       color: green;
//     }
//   }
// }

#a {
  color: blue;
//鼠标悬浮在 #a 上会有放大的作用
  @keyframes bigger {
    0%{
      transform: scale(1);
    }
    100%{
      transform: scale(2);
    }
  }
  &:hover{
    animation: bigger 3s;
  }
}

// complies to

// #a{
//   color: blue;
// }
// @keyframes bigger {
//   0%{
//     transform: scale(1);
//   }
//   100%{
//     transform: scale(2);
//   }
// }
// #a:hover{
//   animation: bigger 3s;
// }

2. 操作符(operations)

   + - * /
   在 加, 减 , 比较 之前 会转换成数字, 单位是最左显示声明的单元类型, 如果转换是不可能的或没有意义的,此时单位会被忽略。
   在 乘, 除 时不会转换成数字
   在颜色计算过程中, 当颜色的值 超过 #fff时,颜色的值就不会增加了,会一直是 #fff
   在颜色计算过程中, 当颜色的值 超过 #000时,颜色的值就不会减少了,会一直是 #000

3. 转义(Escaping)

   转义可以使任意的字符串作为属性或变量值,在字符串里想要添加注释时,必须使用多行注释

<template>
  <div class="lessoperations">
    <div class="content">
      <div class="one">one</div>
      <div class="two">two</div>
      <div class="three">three</div>
    </div>
  </div>
</template>
<script>
export default {
  data(){
    return{

    }
  }
}
</script>
<style lang="less" scoped>
  @import './lessoperations';
</style>

@width: 100px;
@height : @width + 100px;
@border: 1px solid #ccc;
@margin: 10px auto;
// 可打开控制台查看
@color: #acd;//#aaccdd
@another-color: @color + #111;//依旧是 #bbddee

// 当颜色范围超过 #fff 时,会一直是 #fff
@color: #fff;
@another-color: @color + #111;//依旧是 #fff
@color: #fff;
@another-color: @color + #444;//依旧是 #fff

// 当颜色范围超过 #000 时,会一直是 #000
@color: #000;
@another-color: @color - #111;//依旧是 #000
@color: #000;
@another-color: @color - #444;//依旧是 #000

// 转义字符 ~ 将字符串作为 变量的值，在里面添加注释时 必须使用 多行注释
@another-height: ~"200px/*这是个注释*/";

.lessoperations{
  .content{
    .one{
      width: @width;
      height: @height;
      margin: @margin;
      border: @border;
      color: @color;
    }
    
    .two{
      // 结果不是 100px 因为 px cm 不能相互转换
      width: 100 + 200px - 200cm;
      height: @height;
      margin: @margin;
      border: @border;
    }
    
    .three{
      height: @another-height;//height: 200px /*这是一个注释*/
      color: @another-color;
      border: @border;
    }
  }
}

4. 范围(scope)

   变量和混合会首先在 当前的范围查找,查找不到时则向上在父元素中查找，以此类推

5. 注释(Comments)

   多行注释和单行注释都可以
   //这是一个住宿
   /这是一个注释/

6. @import 可以引入less文件,你可以把所有的变量定义在一个 less文件中

   1. .css 后缀,则作为 css 文件被导入
   2. 其他后缀,则作为 less 文件被导入
   3. 没有后缀或者后缀为 .less 时 导入less 文件
      @import “foo”; // foo.less is imported
      @import “foo.less”; // foo.less is imported
      @import “foo.php”; // foo.php imported as a less file
      @import “foo.css”; // statement left in place, as-is

   导入时的选项(Import Options)

   语法: @import (keyword) “filename”;

   reference: 引入 Less 文件,不输出
   inline: 在输出时包括源文件但不处理
   less: 不论文件扩展名是啥都当 Less 文件对待
   css: 不论文件扩展名是啥都当 CSS 文件对待
   once: 只包含文件一次(默认)
   multiple: 多次包含文件
   optional: 当文件找不到时依然编译

   reference: use a Less file but do not output it
   inline: include the source file in the output but do not process it
   less: treat the file as a Less file, no matter what the file extension
   css: treat the file as a CSS file, no matter what the file extension
   once: only include the file once (this is default behavior)
   multiple: include the file multiple times
   optional: continue compiling when file is not found

   @import 导入时可以包含多个关键字,关键字和关键字之间使用’,'隔开
   @import (less,optional) ‘filename’;