开始使用 LESS

Question

我对网页设计很陌生...好吧，既然已经不碍事了，我在 LESS/CSS 框架中的哪里声明变量？

我使用的是 NetBeans IDE 7.0.1 我也在使用 Bootstrap 2.0（不确定这是否重要）。 我从lesscss.org 下载了最新版本的LESS，但它只下载了缩小版。

这是我在标题中的链接和脚本标签：

<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/realcardio.css" media="all">
<script type="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/Main.js"></script>
<script type="text/javascript" src="bootstrap/js/less-1.2.1.min.js"></script>

等不及要开始为变量赋值，但我只是不确定要在哪个文件中执行此操作？

谢谢大家！

Answer 1

你在你的 less 文件中做这件事！

sample.less

@font_color: #666;
@font_size: 15px;

body {
    color: @font_color;
    font_size: @font_size;
}

然后你包含这个.less 文件：

<link rel="stylesheet/less" type="text/css" href="sample.less">
<script src="less.js" type="text/javascript"></script>

在包含 less.js 文件之前。

仅供参考，我发现它实际上是一个更好的模型来连接某些东西，这样每次你在编辑器中保存 .less 文件时，它都会使用节点 lessc 编译器将它编译成 .css 文件，然后你只需将 .css 文件包含在您的页面中即可。

这样我就不必在工作部署之前运行转换。