Less – 一个简单的例子

让我们通过一个简单的例子来理解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文件,如下图所示:

image



浙ICP备17015664号 浙公网安备 33011002012336号 联系我们 网站地图  
@2019 qikegu.com 版权所有,禁止转载