Less学习记录

1.变量

很简单，就是事先声明好属性变量，选择器直接引用即可

2.混合

引用另一个规则集里的某些属性时，直接在访问类的名称

3.嵌套

示例解释：

#header {
  color: black;
  .navigation {
    font-size: 12px;
  }
  .logo {
    width: 300px;
  }
}

输出结果：

#header {
  color: black;
}
#header .navigation {
  font-size: 12px;
}
#header .logo {
  width: 300px;
}

媒体查询:<code>@media</code>嵌套方式，示例解释：

.screencolor{
  @media screen {
    color: green;
    @media (min-width:768px) {
    color: red;
    }
    }
  @media tv {
    color: black;
  }
}

输出结果：

@media screen {
  .screencolor {
    color: green;
  }
}
@media screen and (min-width: 768px) {
  .screencolor {
    color: red;
  }
}
@media tv {
  .screencolor {
    color: black;
  }
}

选择器<code>.screencolor</code>被移动到了<code>@media</code>内部。

4.运算
任何数值，颜色和变量都可以进行运算。

Less 能够推断颜色和单位之间的区别。

如：

@var:1px +5;

结果输出<code>@var:6px</code>。

5.函数
示例：

@base: #f04615;
@width: 0.5;

.class {
  width: percentage(@width); // returns `50%`
  color: saturate(@base, 5%);//基础颜色值得饱和度增加5%
  background-color: spin(lighten(@base, 25%), 8);//背景颜色亮度增加25%后将色相值增加8%
}

6.命名空间和访问器

不要将它与CSS <code>@namespace</code>或者namespace选择器混为一谈？

这句话大概意思是？
封装一部分变量和mixins(混合)，以便以后复用或分发：

#bundle {
  .button {
    display: block;
    border: 1px solid black;
    background-color: grey;
    &:hover {
      background-color: white
    }
  }
  .tab { ... }
  .citation { ... }
}

现在想在<code>#header a</code>中混合<code>.button</code>类，我们可以：

#header a{
    color:#orange;
    #button > .button;
}

7.作用域

首先局部寻找，如果没找到，再从父作用域寻找，依次类推

@var: red;

#page {
  @var: white;
  #header {
    color: @var; // white
  }
}

变量和混合不必在使用前声明，即<code>@var: white；</code>在<code>#header</code>前后一样。

8.注释

/*这是注释*/

9.导入

@import "library";  //导入library.less
@import "type.css";

对于<code>.less</code>文件而言，其扩展名是可选的。

Less学习记录

推荐阅读更多精彩内容