Less使用方法

　　Vue-less：

一：简介：

　　Less （Leaner Style Sheets 的缩写） 是一门向后兼容的 CSS 扩展语言。这里呈现的是 Less 的官方文档（中文版），包含了 Less 语言以及利用 JavaScript 开发的用于将 Less 样式转换成 CSS 样式的 Less.js 工具。

cnpm install -g less lessc -version

 

二：创建：

需要一个调试工具js：
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/3.11.1/less.min.js" ></script>
​
并且导入less格式的css文件的时候必须写成这样子：
<link rel="stylesheet/less" type="text/css" href="styles.less" />

 

三：变量：

.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}
​
#menu a {
  color: #111;
  .bordered();//这里括号是可以去掉的
}
​
.post a {
  color: red;
  .bordered();
}

 

四：嵌套：nesting

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

 

五：混合再使用：

.xk(){
    width:200px;
    height: 500px;
}
​
.box{
    .xk();
    background-color: @main-color;
}
​
.locButton(@bgcolor){
    .xk;
    background-color: @bgcolor;
}
​
.redButton{
    .locButton(@main-color);
    text-align: center;
    line-height: 100px;
}

 

六：@规则嵌套和冒泡：

.component {
  width: 300px;
  @media (min-width: 768px) {
    width: 600px;
    @media  (min-resolution: 192dpi) {
      background-image: url(/img/retina2x.png);
    }
  }
  @media (min-width: 1280px) {
    width: 800px;
  }
}

注意：记得回去再看看@media响应式布局，此处直接把@media使用函数嵌套的形式和min/max的方式响应

 

7.自动拼接小技巧：arguments

.borderStyle(@width:10px,@style:solid,@color:silver){
    border:@arguments;
}
​
.lcbox{
    .borderStyle();
}
​
.bigboc{
    .borderStyle(20px,dash)
}

 

函数（Functions）

　　Less 内置了多种函数用于转换颜色、处理字符串、算术运算等。这些函数在Less 函数手册中有详细介绍。

　　函数的用法非常简单。下面这个例子将介绍如何利用 percentage 函数将 0.5 转换为 50%，将颜色饱和度增加 5%，以及颜色亮度降低 25% 并且色相值增加 8 等用法：

@base: #f04615;
@width: 0.5;
​
.class {
  width: percentage(@width); // returns `50%`
  color: saturate(@base, 5%);
  background-color: spin(lighten(@base, 25%), 8);
}

参见：函数手册

 

命名空间和访问符

　　有时，出于组织结构或仅仅是为了提供一些封装的目的，你希望对混合（mixins）进行分组。你可以用 Less 更直观地实现这一需求。假设你希望将一些混合（mixins）和变量置于 #bundle 之下，为了以后方便重用或分发：

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

 

　　现在，如果我们希望把 .button 类混合到 #header a 中，我们可以这样做：

#header a {
  color: orange;
  #bundle.button();  // 还可以书写为 #bundle > .button 形式
}

　　注意：如果不希望它们出现在输出的 CSS 中，例如 #bundle .tab，请将 () 附加到命名空间（例如 #bundle()）后面。

映射（Maps）

　　从 Less 3.5 版本开始，你还可以将混合（mixins）和规则集（rulesets）作为一组值的映射（map）使用。

#colors() {
  primary: blue;
  secondary: green;
}
​
.button {
  color: #colors[primary];
  border: 1px solid #colors[secondary];
}

 

　　输出符合预期：

.button {
  color: blue;
  border: 1px solid green;
}

 

参见： 映射（Maps）

作用域（Scope）

Less 中的作用域与 CSS 中的作用域非常类似。首先在本地查找变量和混合（mixins），如果找不到，则从“父”级作用域继承。

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

 

与 CSS 自定义属性一样，混合（mixin）和变量的定义不必在引用之前事先定义。因此，下面的 Less 代码示例和上面的代码示例是相同的：

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

参见：懒加载

注释（Comments）

块注释和行注释都可以使用：

/* 一个块注释
 * style comment! */
@var: red;
​
// 这一行被注释掉了！
@var: white;

导入（Importing）

“导入”的工作方式和你预期的一样。你可以导入一个 .less 文件，此文件中的所有变量就可以全部使用了。如果导入的文件是 .less 扩展名，则可以将扩展名省略掉：

@import "library"; // library.less
@import "typo.css";

了解更多关于导入(Importing)的知识