LessCss学习笔记 CCH

一、入门

1、LESSCSS是什么？

LESSCSS是一种动态样式语言，属于CSS预处理语言的一种，它使用类似CSS的语法，为CSS的赋予了动态语言的特性，如变量、继承、运算、函数等，更方便CSS的编写和维护。

LESSCSS可以在多种语言、环境中使用，包括浏览器端（支持IE6+, Webkit, Firefox）、桌面客户端、服务端。

例如：

@color:#4D926F;
p{
  color: @color;
}

编译成：

p{
  color: #4D926F;
}

2、使用LESSCSS

1）客户端使用

在浏览器中使用less.js是非常方便的，但是这种方式不建议用于生产。在生产中，建议使用node.js或者第三方工具进行预编译。

首先，链接.less文件，设置rel属性为"stylesheet/less"：

<link rel="stylesheet/less" type="text/css" href="styles.less" />

接着，下载less.js，或者到官网下载最新的，包含在<script></script>标签中：

<script src="less.js" type="text/javascript"></script>

也可以使用Less CDN：

<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.5.3/less.min.js"></script>

在 <script src="less.js"></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>

注意：确保在引用脚本之前引用样式文件。

点击以下链接下载上述代码：LESSCSS入门demo

二、语法特性

1、变量（Variables）

变量允许我们单独定义一系列通用的样式，然后在需要的时候去调用。所以在做全局样式调整的时候我们可能只需要修改几行代码就可以了。

例如：

@nice-blue: #5B83AD;
@light-blue: @nice-blue + #111;

#header {
  color: @light-blue;
}

输出：

#header {
  color: #6c94be;
}

注意：这里的变量实际上是常量。

变量也可以用于选择器名称、属性名、URL和 @import 声明。

1）选择器名称

例如：

// Variables
@my-selector: banner;

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

输出：

.banner {
  font-weight: bold;
  line-height: 40px;
  margin: 0 auto;
}

2）属性名

例如：

@property: color;

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

输出：

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

3）变量名

例如：

@fnord:  "I am fnord.";
@var:    "fnord";
content: @@var;

输出：

content: "I am fnord.";

4）URL

例如：

// Variables
@images: "../img";

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

5）导入声明

例如：

// Variables
@themes: "../../src/themes";

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

变量是懒加载的，不是必须在使用前声明，可以在使用后声明。例如：

.lazy-eval {
  width: @var;
}

@var: @a;
@a: 9%;

2、混合（Mixins）

混合可以将一个定义好的class A轻松的引入到另一个class B中，从而简单实现class B继承class A中的所有属性。我们还可以带参数地调用，就像使用函数一样。

例如：

.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}
#menu a {
  color: #111;
  .bordered;
}
.post a {
  color: red;
  .bordered;
}  

输出：

.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}
#menu a {
  color: #111;
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}
.post a {
  color: red;
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}

1）不输出mixin

可以在mixin后面添加"()"括号，让其不输出。

例如：

.my-mixin {
  color: black;
}
.my-other-mixin() {
  background: white;
}
.class {
  .my-mixin;
  .my-other-mixin;
}

输出：

.my-mixin {
  color: black;
}
.class {
  color: black;
  background: white;
}

2） !important 关键字

在mixin后面使用 !important 关键字，那么继承的所有属性都会加上 !important 。

例如：

.foo (@bg: #f5f5f5, @color: #900) {
  background: @bg;
  color: @color;
}
.unimportant {
  .foo();
}
.important {
  .foo() !important;
}

输出：

.unimportant {
  background: #f5f5f5;
  color: #900;
}
.important {
  background: #f5f5f5 !important;
  color: #900 !important;
} 

3）可以传递参数的Mixins

例如：

.border-radius(@radius) {
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  border-radius: @radius;
}
#header {
  .border-radius(4px);
}
.button {
  .border-radius(6px);
} 

输出：

#header {
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}
.button {
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
}

也可以设置参数默认值。例如：

.border-radius(@radius: 5px) {
  -webkit-border-radius: @radius;
     -moz-border-radius: @radius;
          border-radius: @radius;
}
#header {
  .border-radius;
}

输出：

header {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
} 

3、嵌套（Nested Rules）

可以在一个选择器中嵌套另一个选择器来实现继承。

例如：

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

可以写成：

#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;
  }
} 

其中，&当前选择器的父元素。

4、运算符（Operations）

运算提供了加，减，乘，除操作；我们可以做属性值和颜色的运算，这样就可以实现属性值之间的复杂关系。

例如：

// numbers are converted into the same units
@conversion-1: 5cm + 10mm; // result is 6cm
@conversion-2: 2 - 3cm - 5mm; // result is 1.5cm

// conversion is impossible
@incompatible-units: 2 + 5px - 3cm; // result is 4px

// example with variables
@base: 5%;
@filler: @base * 2; // result is 10%
@other: @base + @filler; // result is 15%

@color: #224488 / 2; //results in #112244 
background-color: #112244 + #111; // result is #223355

5、转码（Escaping）

转码允许你使用任意的字符串作为属性或变量值。格式： ~"anything" 或 ~'anything' 。


例如：

.weird-element {
  content: ~"^//* some horrible but needed css hack";
}

输出：

.weird-element {
  content: ^//* some horrible but needed css hack;
}

6、函数（Functions）

Less提供了大量的函数用于转换颜色、处理字符串和数学运算。

例如：

@base: #f04615;
@ 0.5;

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

输出：

.class {
  width: 50%;
  color: #f6430f;
  background-color: #f8b38d;
}

7、Namespaces adn Accessors

例如：

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

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

输出：

#bundle .button {
  display: block;
  border: 1px solid black;
  background-color: grey;
}
#bundle .button:hover {
  background-color: white;
}
#header a {
  color: orange;
  display: block;
  border: 1px solid black;
  background-color: grey;
}
#header a:hover {
  background-color: white;
}

8、作用域（Scope）

例如：

@var: red;

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

变量并不是必须在使用前声明，例如：

@var: red;

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

9、注释（Comments）

和CSS一样，支持单行"//"和多行注释"/**/"。

例如：

/* One hell of a block
style comment! */
@var: red;

// Get in line!
@var: white; 

10、导入（Importing）

支持导入 .css 文件，并且也支持导入 .less 文件（将导入其中定义的所有变量）。

例如：

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

11、扩展（Extend）

例1：

.animal {
  background-color: black;
  color: white;
}
.bear {
  &:extend(.animal);
  background-color: brown;
} 

输出：

.animal,
.bear {
  background-color: black;
  color: white;
}
.bear {
  background-color: brown;
} 

可以减少CSS的长度，例2：

.my-inline-block {
  display: inline-block;
  font-size: 0;
}
.thing1 {
  &:extend(.my-inline-block);
}
.thing2 {
  &:extend(.my-inline-block);
}

输出：

.my-inline-block,
.thing1,
.thing2 {
  display: inline-block;
  font-size: 0;
}

三、相关学习网站

LESS在线编辑器

官方英文学习网站

Bootstrap中文网提供的学习网站

LESSCSS中文官网

CSS预处理器——Sass、LESS和Stylus实践