less学习笔记

less中的凝视：
1. /**/和//；
2. 注意：css中是不支持//凝视的，所以也不会被编译成css；
变量：
1. 综述：变量同意我们单独定义一系列通用的样式，然后在须要的时候去调用。所以在做全局样式调整的时候我们可能仅仅须要改动几行代码就能够了
2. 使用方法：@变量名：变量值；
混合：
1. 混合能够将一个定义好的class A轻松的引入到还有一个class B中，从而简单实现class B继承class A中的全部属性。
2. 我们还能够带參数地调用，就像使用函数一样。
3. eg：
  // LESS
  
  .rounded-corners (@radius: 5px) {
  border-radius: @radius;
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  }
  #header {
  .rounded-corners;//不带參数引用，则使用默认值
  }
  #footer {
  .rounded-corners(10px);//传递參数
  }
  
  /* 生成的 CSS */
  
  #header {
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  }
  #footer {
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  }
匹配模式：
1. 综述：相当于if-依据你传入的不同值而找到相相应的代码来运行，最后要跟上一个带@_的模式来写匹配随意參数的，即公共的部分；
2. eg：
  .mixin (dark, @color) {
  color: darken(@color, 10%);
  }
  .mixin (light, @color) {
  color: lighten(@color, 10%);
  }
  .mixin (@_, @color) {//通配变量@_ ，写公共的部分代码
  display: block;
  }
  
  //如今，假设执行:
  @switch: light;
  
  .class {
  .mixin(@switch, #888);
  }
  //就会得到下列CSS:
  .class {
  color: #a2a2a2;--匹配了light
  display: block;
  }
运算：运算提供了加，减，乘，除操作；我们能够做属性值和颜色的运算，这样就能够实现属性值之间的复杂关系。
1. 多用宽高的运算，而颜色直接取值；
2. eg:
  // LESS
  
  @the-border: 1px;
  @base-color: #111;
  @red: #842210;
  
  #header {
  color: @base-color * 3;
  border-left: @the-border;
  border-right: @the-border * 2;
  }
  #footer {
  color: @base-color + #003300;
  border-color: desaturate(@red, 10%);
  }
  /* 生成的 CSS */
  
  #header {
  color: #333;
  border-left: 1px;
  border-right: 2px;
  }
  #footer {
  color: #114411;
  border-color: #7d2717;
  }
嵌套规则：我们能够在一个选择器中嵌套还有一个选择器来实现继承，这样非常大程度降低了代码量，而且代码看起来更加的清晰。
1. eg:
  // LESS
  
  #header {
  h1 {
  font-size: 26px;
  font-weight: bold;
  }
  p { font-size: 12px;
  a { text-decoration: none;
  &:hover { border-width: 1px }
  }
  }
  }
  
  /* 生成的 CSS */
  
  #header h1 {
  font-size: 26px;
  font-weight: bold;
  }
  #header p {
  font-size: 12px;
  }
  #header p a {
  text-decoration: none;
  }
  #header p a:hover {
  border-width: 1px;
  }
2. 向写html结构嵌套一样明晰样式之间的关系；
3. 能够方便的写hover，在a标签中：
  a{
  //&代表它的上一层选择器
  &:hover{
  color:red
  }
  }
@arguments变量： @arguments包括了全部传递进来的參数.
1. 假设你不想单独处理每个參数的话就能够像这样写:
  .box-shadow (@x: 0, @y: 0, @blur: 1px, @color: #000) {
  box-shadow: @arguments;
  -moz-box-shadow: @arguments;
  -webkit-box-shadow: @arguments;
  }
  .box-shadow(2px, 5px);
  将会输出:
  box-shadow: 2px 5px 1px #000;
  -moz-box-shadow: 2px 5px 1px #000;
  -webkit-box-shadow: 2px 5px 1px #000;
避免编译、！important以及总结：
1. 避免编译：使用方法：~"输出内容"；
2. !importantkeyword：自己主动给编译后的css样式都加上!improtant；
命名空间：有时候，你可能为了更好组织CSS或者单纯是为了更好的封装，将一些变量或者混合模块打包起来, 你能够像以下这样在#bundle中定义一些属性集之后能够反复使用:
#bundle {
.button () {
display: block;
border: 1px solid black;
background-color: grey;
&:hover { background-color: white }
}
.tab { ... }
.citation { ... }
}
//你仅仅须要在 #header a中像这样引入 .button:
#header a {
color: orange;
#bundle > .button;
}