Less使用简介
一、简介
Less是CSS预处理语言，它扩展了CSS语言，增加了变量(variables)、混合(Mixins)、函数(functions)等，使CSS更容易维护和扩展。Less可以运行在Node环境或浏览器中。
1、Node环境
- 安装
npm install -g less
安装css压缩插件
npm install -g less-plugin-clean-css
- 命令行
lessc styles.less styles.css
//或
lessc styles.less
使用压缩插件
lessc --clean-css styles.less
//或
lessc --clean-css styles.less styles.min.css
- 代码
npm init
npm install less --save-dev
study-less.js：
var less = require('less');
var css = '.class{ width: (1 + 1)px}';
var options = {
compress: true
};
less.render(css, options, function(e, output){
console.log(output.css);
});
2、浏览器环境
- HTML
下载less.js文件并引入或使用CDN:
<!DOCTYPE html>
<html>
<head>
<title>Less</title>
<meta charset='utf-8'/>
<link rel="stylesheet/less" type="text/css" href="styles.less"/>
<script>
//配置(options)通过定义全局变量`less`实现，需要在引入`less.js`之前定义
less = {
env: "development"
};
</script>
<script src="less.js"></script>
</head>
<body>
<main>
<h1>Study Less</h1>
<article>
<h2>Lesson one</h2>
<p class="post">It's <a>CSS</a>, with just a little more.</p>
</article>
</main>
</body>
</html>
- LESS
@height: 200px;
@width: @height * 2;
main{
width: @width;
height: @height;
}
.bordered{
border: dotted 1px lightgreen;
}
h2{
color: #E5E5E5 - #222;
.bordered();
}
.post a{
color: red;
.bordered();
}
- Watch Mode
在development模式下，使用less.watch()可开启监视模式，在监视模式下，修改.less文件后，页面会自动应用修改后的样式：
<script>less = { env: 'development'};</script>
<script src="less.js"></script>
<script>less.watch();</script>
- 效果
二、语法
1、变量(Variables)
@width: 10px;
@height: @width + 10px;
#header{
width: @width;
height: @height;
}
使用lessc处理后如下：
#header {
width: 10px;
height: 20px;
}
2、混入(Mixins)
混入是将一个规则集的一组属性设置到另一个规则集中。
.bordered{
border-top: dotted 1px black;
border-bottom: solid 2px black;
}
使用混入：
#menu a{
color: #FFF;
.bordered();
}
.post a{
color: red;
.bordered();
}
使用lessc处理后如下：
#menu a {
color: #FFF;
border-top: dotted 1px black;
border-bottom: solid 2px black;
}
.post a {
color: red;
border-top: dotted 1px black;
border-bottom: solid 2px black;
}
3、嵌入(Nesting)
使用嵌入可以代替级联或与级联结合使用，嵌入使css代码更简洁，结构上模仿自HTML。
#header{
color: black;
.navigation{
font-size: 12px;
}
.logo{
width: 300px;
}
}
使用lessc处理后如下：
#header {
color: black;
}
#header .navigation {
font-size: 12px;
}
#header .logo {
width: 300px;
}
&表示当前选择器的父级：
.clearfix{
display: block;
zoom: 1;
&:after{
content: " ";
display: block;
font-size: 0;
height: 0;
clear: both;
visibility: hidden;
}
}
使用lessc处理后如下：
.clearfix {
display: block;
zoom: 1;
}
.clearfix:after {
content: " ";
display: block;
font-size: 0;
height: 0;
clear: both;
visibility: hidden;
}
@规则和冒泡
@规则(例如：@media、@supprots)可以和其他选择器一样被嵌入。
@规则位于顶部，相对于同一规则集中的其他元素的顺序保持不变，这也被叫做冒泡。
.component{
width: 300px;
@media(min-width: 768px){
width: 600px;
@media(min-resolution: 192dpi){
background-image: url(/img/retina2x.png);
}
}
@media(min-width: 1280px){
width: 800px;
}
}
使用lessc处理后如下：
.component {
width: 300px;
}
@media (min-width: 768px) {
.component {
width: 600px;
}
}
@media (min-width: 768px) and (min-resolution: 192dpi) {
.component {
background-image: url(/img/retina2x.png);
}
}
@media (min-width: 1280px) {
.component {
width: 800px;
}
}
4、运算(Operations)
可以对任何数字、颜色或变量进行算数学运算(+、-、*、/)，运算时会考虑到单位：因此在数字的加、减或比较前会转换为相同的单位，最终结果的单位类型由最左边的单位决定。如果不能转换或转换没有意义，则单位被忽略，例如：px到cm或rad(弧度)到%是不能转换的。
@conversion-1: 5cm + 10mm; //6cm
@conversion-2: 2 - 3cm - 5mm; //-1.5cm
@incompatible-units: 2 + 5px -3cm;
@base: 5%;
@filter: @base * 2;//10%
@other: @base + @filter;//15%
在乘法或除法时，不会做单位的转换。
@base: 2cm * 3mm;//6cm
@color: #224488 / 2;//#112244
@background-color: #112244 + #111;//#223355
calc()函数并不对数学表达式进行计算，但在嵌套函数中会计算变量和数学公式的值。
- 样例
@base: 5%;
@var: 50vh/2;
@incompatible-units: 2 + 5px -3cm;
.operations{
width: 5cm + 10mm;
height: 2 - 3cm - 5mm;
border-width: 2 + 5px -3cm;
border-radius: @base * 2;
min-height: calc(50% + (@var - 20px));
max-width: @incompatible-units;
color: #224488 / 2;
background-color: #112244 + #111;
}
使用lessc处理后如下：
.operations {
width: 6cm;
height: -1.5cm;
border-width: 7px -3cm;
border-radius: 10%;
min-height: calc(50% + (25vh - 20px));
max-width: 7px -3cm;
color: #112244;
background-color: #223355;
}
5、转义(Escaping)
转义允许使用任何字符串作为属性或变量的值，格式为：
//引号可以为单引号也可以为双引号
~'any string'
引号内的内容会保留原样。
@min768: ~"(min-width: 768px)";
.element{
@media @min768{
font-size: 1.2rem;
}
}
使用lessc处理后如下：
@media (min-width: 768px) {
.element {
font-size: 1.2rem;
}
}
6、函数(Functions)
Less提供了多种函数用于算术运算、转换颜色、处理字符串等。
@base: #f04615;
@width: 0.5;
.class{
width: percentage(@width);
//以绝对量增加HSL颜色空间中颜色的饱和度
color: saturate(@base, 5%);
content: replace("One + one = 4", "one", "2", "gi");
}
使用lessc处理后如下：
.class {
width: 50%;
color: #f6430f;
content: "2 + 2 = 4";
}
7、命名空间和访问器(Namespaces and Accessors)
使用命名空间可以将混入(mixin)分组或封装，能避免名称冲突。
在#bundle下封装一些混入和变量，以便以后重用或分发：
#bundle(){
.button{
display: block;
border: 1px solid black;
background-color: grey;
&:hover{
background-color: white;
}
}
.tab{
font-size: 20px;
opacity: 0.8;
}
.citation{}
}
#header a{
color: orange;
#bundle.button();
//或
#bundle > .tab;
}
使用lessc处理后如下：
#header a {
color: orange;
display: block;
border: 1px solid black;
background-color: grey;
font-size: 20px;
opacity: 0.8;
}
#header a:hover {
background-color: white;
}
8、映射(Maps)
从Less 3.5开始，可以将命名空间和[]语法结合，使规则集或混入转为映射。
#colors(){
primary: blue;
secondary: green;
}
.button{
color: #colors[primary];
border: 1px solid #colors[secondary];
}
使用lessc处理后如下：
.button {
color: blue;
border: 1px solid green;
}
9、作用域(Scope)
Less的作用域和CSS非常类似，变量和混入首先会在本地查找，如果找不到，则从父作用域查找。
@var: red;
#page{
@var: white;
#header{
color: @var;
}
}
与CSS自定义属性一样，混入和变量的定义不必放在使用之前：
@var: red;
#page{
#header{
color: @var;
}
@var: white;
}
上面两个例子使用lessc处理后如下：
#page #header {
color: white;
}
10、注释(Comments)
Less既支持行注释也支持块注释：
/*
line1: comment
line2: comment
*/
@var: red;
//single
@color: blue;
10、导入(Importing)
可以使用@import导入Less或CSS文件。如果导入的是.less文件，则导入之后就可以使用该文件中的所有变量等内容，且扩展名可以省略。
@import "library"; // library.less
@import "typo.css";