Less – 一个简单的例子

2019年5月8日

意见反馈

让我们通过一个简单的例子来理解Less如何使用。

创建一个名为“simple.html”的HTML文件：

simple.html

<!DOCTYPE html>

<head>
    <link rel="stylesheet" href="simple.css" type="text/css" />
</head>

<body>
    <h2>一个简单Less例子</h2>
    <h3>Hello 奇客谷教程</h3>
</body>

</html>

在同个目录下创建一个名为“simple.less”的文件。

simple.less

@primarycolor: #FF7F50;  
@color: #800080; 

h2 {  
    color: @primarycolor;  
}

h3 {   
    color: @color;  
}

可以看到这个文件的内容与CSS很相似，@primarycolor与@color是less变量，后续将详细介绍。

现在使用less编译器编译less文件。命令行中，切换到文件所在目录，执行以下less编译命令：

lessc simple.less simple.css

成功执行后，可以看到已经生成simple.css文件。

simple.css

h2 {
  color: #FF7F50;
}
h3 {
  color: #800080;
}

运行

使用浏览器打开simple.html文件，如下图所示：