十分钟掌握LESS

简介

CSS使用中有时可能令人沮丧，尤其是当项目包含几千行代码的时候。仅仅改变一个颜色，也可能需要你反复进行搜索，复制粘贴，维护CSS变得枯燥。幸运的是Less Sass Stylus等CSS预处理工具的出现，使这些问题得到解决。

• 变量，可轻松定义或改变数值（CSS将会添加这一功能）
• 动态计算值（CSS中虽然新添了calc，但是只能用于计算长度）
• Mixin，合并再利用已有风格
• 函数，可以计算颜色，转换图片为数据

这种方式虽然解决了CSS诸多不如意的地方，但仍需要使用之前将样式转为CSS格式。

起步

Less是用Js实现，需要Node.js或者浏览器环境去运行。

1. 你可以在代码中包含less.js，.less的样式会自动运行，加载到网页上，但是这种方式加载速度比较缓慢，不推荐。
2. 推荐的方式是提前将.less文件转换为css，有很多方式可以实现这种转换，文中采用的是node.js的方式。

如果你已经安装了node，打开终端，运行如下代码安装less

npm install -g less

这种方式可以让你使用lessc命令，将less文件转化为css

lessc styles.less > styles.css

上述命令将style.less 文件转换为css文件-styles.css

变量

Less的一大特性就是类似其他编程语言一样，你可以创建不同的变量。你可以将任何类型的常用数据保存为变量，例如：color，dimensions，selectors，URL等
这里的栗子将颜色定义为变量。

Less代码

@background-color: #ffffff;
@text-color: #1A237E;

p{
  background-color: @background-color;
  color: @text-color;
  padding: 15px;
}

ul{
  background-color: @background-color;
}

li{
  color: @text-color;
}

CSS代码

p{
  background-color: #ffffff;
  color: #1A237E;
  padding: 15px;
}

ul{
  background-color: #ffffff;
}

li{
  color: #1A237E;
}

Less更多的变量请参考Less变量

Mixins

Less是我们可以使用已存在的class或者ids并将它们的样式赋给其他选择器。

Less代码

#circle{
  background-color: #4CAF50;
  border-radius: 100%;
}

#small-circle{
  width: 50px;
  height: 50px;
  #circle
}

#big-circle{
  width: 100px;
  height: 100px;
  #circle
}

CSS代码

#circle {
  background-color: #4CAF50;
  border-radius: 100%;
}
#small-circle {
  width: 50px;
  height: 50px;
  background-color: #4CAF50;
  border-radius: 100%;
}
#big-circle {
  width: 100px;
  height: 100px;
  background-color: #4CAF50;
  border-radius: 100%;
}

如果你不想让mixin以规则的形式在CSS中出现，可以使用如下方式替代
Less代码

#circle(){
  background-color: #4CAF50;
  border-radius: 100%;
}

#small-circle{
  width: 50px;
  height: 50px;
  #circle
}

#big-circle{
  width: 100px;
  height: 100px;
  #circle
}

CSS代码

#small-circle {
  width: 50px;
  height: 50px;
  background-color: #4CAF50;
  border-radius: 100%;
}
#big-circle {
  width: 100px;
  height: 100px;
  background-color: #4CAF50;
  border-radius: 100%;
}

Mixin也可以接受参数，下面这个例子我们定义circle宽度和长度为25px。small circle的大小为25×25，big circle 为100×100
Less代码

#circle(@size: 25px){
  background-color: #4CAF50;
  border-radius: 100%;

  width: @size;
  height: @size;
}

#small-circle{
  #circle
}

#big-circle{
  #circle(100px)
}

CSS代码

#small-circle {
  background-color: #4CAF50;
  border-radius: 100%;
  width: 25px;
  height: 25px;
}
#big-circle {
  background-color: #4CAF50;
  border-radius: 100%;
  width: 100px;
  height: 100px;
}

嵌套

嵌套可以结构化样式表，减少冲突的可能性。举个例子

Less代码

ul{
  background-color: #03A9F4;
  padding: 10px;
  list-style: none;

  li{
    background-color: #fff;
    border-radius: 3px;
    margin: 10px 0;
  }
}

CSS代码

ul {
  background-color: #03A9F4;
  padding: 10px;
  list-style: none;
}
ul li {
  background-color: #fff;
  border-radius: 3px;
  margin: 10px 0;
}

类似其他编程语言，Less变量根据范围接收变量，如果数值在范围内没有找到，Less会向父级去寻找，直到找到最近的声明。

CSS中，li将会白色的文字，因为我们已经在ul声明了text-color规则

Less代码

@text-color: #000000;

ul{
  @text-color: #fff;
  background-color: #03A9F4;
  padding: 10px;
  list-style: none;

  li{
    color: @text-color;
    border-radius: 3px;
    margin: 10px 0;
  }
}

CSS代码

ul {
  background-color: #03A9F4;
  padding: 10px;
  list-style: none;
}
ul li {
  color: #ffffff;
  border-radius: 3px;
  margin: 10px 0;
}

更多有关定义域信息，请参考Less定义域

运算

Less支持任何数值或颜色的数学计算。例如我们有两个相邻的div，我们希望后者是前者宽度的二倍并有不用的背景颜色。

Less代码

@div-width: 100px;
@color: #03A9F4;

div{
  height: 50px;
  display: inline-block;
}

#left{
  width: @div-width;
  background-color: @color - 100;
}

#right{
  width: @div-width * 2;
  background-color: @color;
}

CSS代码

div {
  height: 50px;
  display: inline-block;
}
#left {
  width: 100px;
  background-color: #004590;
}
#right {
  width: 200px;
  background-color: #03a9f4;
}

函数

Less支持函数，更加接近一门编程语言了，不是吗？
例如fadeout，一个降低颜色透明度的函数

Less代码

@var: #004590;

div{
  height: 50px;
  width: 50px;
  background-color: @var;

  &:hover{
    background-color: fadeout(@var, 50%)
  }
}

CSS代码

div {
  height: 50px;
  width: 50px;
  background-color: #004590;
}
div:hover {
  background-color: rgba(0, 69, 144, 0.5);
}

以上代码使div得倒焦点以后，获取半透明的动画效果。这比自己手动设置要简单。还有其他可以操作颜色，检测图片大小，甚至将资源当作data-uri的方式引入样式表中。更多操作请参考Less更多函数

更多的阅读资料

Less所有语言特性
Less 函数
浏览器编辑与运行