LESSCSS学习笔记

LESSCSS学习笔记

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

LESSCSS可以在多种语言、环境中使用，包括浏览器端、桌面客户端、服务端。

语言特性快速预览：

• 变量 类似宏定义

···

  @color: #4D926F;
  header {
 color: @color;
 }
 h2 {
 color: @color;
}

···

• 混合

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

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

header {
    .rounded-corners;
}
footer {
    .rounded-corners(10px);
}

• 嵌套

我们可以在一个选择器中嵌套另一个选择器来实现继承，这样很大程度减少了代码量，并且代码看起来更加的清晰。

···

• #header {
  h1 {
  font-size: 26px;
  font-weight: bold;
  }
  p {
  font-size: 12px;
  a {
  text-decoration: none;
  &:hover {
  border-width: 1px
  }
  }
  }
  }
  ···

#header h1 {
    font-size: 26px;
    font-weight: bold;
}
#header p {
    font-size: 12px;
}
#header p a {
    text-decoration: none;
}
#header p a:hover {
    border-width: 1px;
}

• 在客户端使用

不经过编译，直接在浏览器中使用
在页面中引入.less文件

"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