Less基本知识

Less

命令行用法

1. 下载：

   npm install -g less
   

2. 将less文件转换成css文件：

   1.lessc styles.less
   2.lessc styles.lesss styles.css
   

3. 缩小转化文件

   lessc --clean-css styles.less styles.min.css
   

代码用法

1. 通过node方式导入编译：

   var less = require('less');
   
   // Less的render函数负责将less 转化成 css文件 具体情况需要查看相关文档，查看具体的option
   less.render('.class { width: (1 + 1) }', function(e,output {
   	console.log(output.css);
   }));
   
   
   // 输出情况
   .class{
   	width:2;
   }
   

2. 通过浏览器的方式

   <link rel="stylesheet/less" type="text/css" href="styles.less" />
   <script src="less.js" type="text/javascript"></script>
   // 先link后Script
   // less文件间是相互独立的，文件间的变量等是不可互相访问的
   // 由于浏览器的原始策略相同，因此加载外部资源需要启用CORS
   

   选项设置：

   ​ 设置必须是在<script src="less.js" type="text/javascript"></script>之前设置一个全局的less对象；

   <!-- set options before less.js script -->
   <script>
     less = {
       env: "development",
       async: false,
       fileAsync: false,
       poll: 1000,
       functions: {},
       dumpLineNumbers: "comments",
       relativeUrls: false,
       rootpath: ":/a.com/"
     };
   </script>
   <script src="less.js"></script>
   

语言特性

1. 变量: @+name 变量实际上就是常量,只能定义一次

   @nice-blue: #5B83AD;
   @light-blue: @nice-blue + #111;
   // 颜色可以运算
   #header {
     color: @light-blue;
   }
   
   //输出
   #header {
     color: #6c94be;
   }
   

2. Mixins 混入模式:将一个组css样式规则直接混入到另一个规则中

   .bordered {
     border-top: dotted 1px black;
     border-bottom: solid 2px black;
   }
   
   #menu a {
     color: #111;
     .bordered;  // 进行混入,都会有bordered的规则
   }
   
   .post a {
     color: red;
     .bordered;
   }
   

3. 嵌套规则

   // css规则
   #header {
     color: black;
   }
   #header .navigation {
     font-size: 12px;
   }
   #header .logo {
     width: 300px;
   }
   
   // less嵌套,类似于html的嵌套方式
   #header {
     color: black;
     .navigation {
       font-size: 12px;
     }
     .logo {
       width: 300px;
     }
   }
   

   &这个符号代表当前选择器的父级

   .clearfix {
     display: block;
     zoom: 1;
   
     &:after {
       content: " ";
       display: block;
       font-size: 0;
       height: 0;
       clear: both;
       visibility: hidden;
     }
   }
   

   属性放在最上面,并且同一规则集中嵌套,相对顺序保持不变,冒泡

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

   #a {
     color: blue;
     @font-face {
       src: made-up-url;
     }
     padding: 2 2 2 2;
   }
   
   //输出
   #a {
     color: blue;
   }
   @font-face {
     src: made-up-url;
   }
   #a {
     padding: 2 2 2 2;
   }
   

4. 运算方式是+ - * \可运算到任何的数值,颜色,变量中,数值运算会在运算前考虑单位并转换数字.不同单位间不可直接转化

   // 单位相同的可以直接转化
   @conversion-1: 5cm + 10mm; // result is 6cm
   @base: 2cm * 3mm; // result is 6cm 乘法不会转化单位,以第一个单位为基准
   @conversion-2: 2 - 3cm - 5mm; // result is 1.5cm
   
   // 变量间单位相同也可直接转化
   @base: 5%;
   @filler: @base * 2; // result is 10%
   @other: @base + @filler; // result is 15%
   
   // 不同单位间不可直接转化
   @incompatible-units: 2 + 5px - 3cm; // result is 4px,是以px来换算的
   
   // 颜色操作也是可以的
   @color: #224488 / 2; //results in #112244
   background-color: #112244 + #111; // result is #223355
   

5. 函数:less提供了很多可以进行颜色转化,字符运算等操作的函数

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

6. 命名空间Namespaces 将混入模式的规则进行封装或是只需要使用混入中的一部分规则时

   //原本存在这样的规则
   #bundle {
     .button {
       display: block;
       border: 1px solid black;
       background-color: grey;
       &:hover {
         background-color: white
       }
     }
     .tab { ... }
     .citation { ... }
   }
   
   //现在只想将button的属性进行混入,或则说只需要button的属性
   #header a {
     color: orange;
     #bundle > .button;
   }
   

7. 范围scope 与Vue中的Scope应该是一样的,当在对变量和混入进行查询时,先在本地进行查询,如果找不到就像父级中进行查找.

   @var: red;
   
   #page {
     @var: white;
     #header {
       color: @var; // white 类似于作用域的形式
     }
   }
   
   // 变量和混入不必事先声明即可使用,类似于javascript中的变量提升
   @var: red;
   
   #page {
     #header {
       color: @var; // white
     }
     @var: white; // 出现变量提升
   }
   

8. 注释comments

   /* One hell of a block
   style comment! */
   @var: red;
   
   // Get in line!
   @var: white;
   

9. 导入important

   @import "library"; // library.less 导入文件中的变量可以直接用
   @import "typo.css";
   

变量

主要是将相同的数值,通过变量来替换,方便对相同数值的一致更改.

1. 在规则中属性值使用变量

   @link-color:        #428bca; // sea blue
   @link-color-hover:  darken(@link-color, 10%);
   
   // Usage
   a,
   .link {
     color: @link-color;
   }
   a:hover {
     color: @link-color-hover;
   }
   .widget {
     color: #fff;
     background: @link-color;
   }
   

2. 在选择器中使用变量:对于选择器变量@Selection 那么使用可以.|#@{Selection}

   // Variables
   @my-selector: banner;
   
   // Usage
   .@{my-selector} {
     font-weight: bold;
     line-height: 40px;
     margin: 0 auto;
   }
   

3. 地址URL中使用,使用{}将变量名进行包裹使用

   // Variables
   @images: "../img";
   
   // Usage
   body {
     color: #444;
     background: url("@{images}/white-sand.png");
   }
   

4. 导入import 中使用变量

   // Variables
   @themes: "../../src/themes";
   
   // Usage
   @import "@{themes}/tidal-wave.less";
   

5. 属性中使用变量

   @property: color;
   
   .widget {
     @{property}: #0ee;
     background-@{property}: #999;
   }
   

变量的懒加载

1. 变量是延迟加载的,不需要在使用前进行声明.

   .lazy-eval {
     width: @var;
   }
   
   @var: @a;
   @a: 9%;
   
   // width: 9%
   .lazy-eval-scope {
     width: @var;
     @a: 9%; // 就近原则 先考虑同一作用域下的变量
   }
   
   @var: @a;
   @a: 100%;
   
   // three:3 ;one: 1
   @var: 0;
   .class {
     @var: 1;
     .brass {
       @var: 2;
       three: @var;
       @var: 3;
     }
     one: @var;
   }
   

默认值

// library
@base-color: green;
@dark-color: darken(@base-color, 10%);

// use of library
@import "library.less";
@base-color: red; // 可以很容易的覆盖默认数据

Extend

Extend 是Less的伪类,主要是给父类扩展Inline选择器的规则

nav ul {
  &:extend(.inline);
  background: blue;
}
.inline {
  color: red;
}

//输出
nav ul {
  background: blue;
}
.inline,
nav ul {
  color: red;
}

可以将该扩展放置到规则内部,也可放置到选择器名上作为伪类选择器

.a:extend(.b) {} // 作用到选择器上

// 作用到规则内
.a {
  &:extend(.b);
}

.c:extend(.d all) {
  // 可以扩展所有带有'.d'的规则,如 ".x.d" or ".d.x"
}

.e:extend(.f, .g) {} // 可以一起扩展
.some-class:extend(.bucket tr) {} // 扩展嵌套规则

Mixins

混入

.a, #b {
  color: red;
}
.mixin-class {
  .a(); // .a 和.a()一样
}
.mixin-id {
  #b();
}

// 输出
.a, #b {
  color: red;
}
.mixin-class {
  color: red;
}
.mixin-id {
  color: red;
}

// 不可单独使用,不输出,只能作为混合使用
.my-other-mixin() {
  background: white;
}

.foo (@bg: #f5f5f5, @color: #900) { // 作为函数使用
  background: @bg;
  color: @color;
}
.unimportant {
  .foo();
}
.important {
  .foo() !important; // 最高级
}