less css学习与内容整理（包括css命名）

LESS CSS是什么？

• less css是一种动态样式语言，属于css预处理语言的一种，为css赋予了动态语言的特性，例如变量，继承，运算，函数等，更方便维护和编写css。
• less css可以在多种语言、环境中使用，包括浏览器端、桌面客户端、服务端。

less 并没有裁剪css原有的特性，更不是用来取代css的，而是在现有css语法的基础上，为css加入程序式语言的特性。

---

LESS如何使用？

在客户端使用

不经过编译，直接在浏览器中使用

• 在页面中引入.less文件

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

• 引用外部less.js文件/或官网下载less.js

<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/3.0.2/less.min.js" ></script>
//<script src="lesscss-1.4.0.min.js"></script>

在引入.less 文件时，rel 属性要设置为“stylesheet/less”。
less 源文件一定要在less.js 引入之前引入，这样才能保证 LESS 源文件正确编译解析。

在服务器端使用

LESSCSS官方有一款基于Node.js的库，用于编译.less文件。使用时，首先全局安装 less（部分系统下可能需要在前面加上sudo切换为超级管理员权限）：

npm install -g less

接下来用lessc编译.less文件：

lessc styles.less styles.css

使用其他编译工具

在线less css编辑器
koala(Win/Mac/Linux)编辑工具。下载
WinLess(Win)编辑软件。下载

---

LESS常用语言特性

更多特性查询

变量

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

less源码：

@color: #333;
header {
  background: @color;
}
h1 {
  color: @color;
}

编译后的css：

header {
  background: #333333;
}
h1 {
  color: #333333;
}

混合（Mixins）

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

less源码：

.rounded-corners (@radius: 3px) {
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  -ms-border-radius: @radius;
  -o-border-radius: @radius;
  border-radius: @radius;
}

#section {
  .rounded-corners;
}
.aside {
  .rounded-corners(5px);
}

编译后的css：

#section {
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  -o-border-radius: 3px;
  border-radius: 3px;
}
.aside {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
}

嵌套

less源码：

#header {
  h1 {
    font-size: 20px;
    font-weight: bold;
  }
  p {
    font-size: 14px;
    a {
      text-decoration: none;
      &:hover {
        color: red;
      }
    }
  }
}

编译后的css：

#header h1 {
  font-size: 20px;
  font-weight: bold;
}
#header p {
  font-size: 14px;
}
#header p a {
  text-decoration: none;
}
#header p a:hover {
  color: red;
}

p.s.通过使用&运算符，可以重复引用父选择器，而不是使用其名称，在选择器&中可以多次使用。

函数和运算

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

less源码：

@base-border: 1px;
@base-color: #333;

#header {
  color: (@base-color * 3);
}
#footer {
  border: (@base-border + 5px);
}

编译后的css：

#header {
  color: #999999;
}
#footer {
  border: 6px;
}

---

同类框架还有sass : 与less相比，两者都属于css预处理器，功能上大同小异，都是使用类似程序式语言的方式书写css, 都具有变量、混入、嵌套、继承等特性，最终目的都是方便css的书写及维护。

---

其他拓展

关于css命名：要在学习完less后看，不然更头疼。常见class关键词很重要。
CSS BEM 书写规范
css进阶：You Don’t Need JavaScript