开始使用LESS

时间:2012-02-20 21:28:03

标签: css netbeans twitter-bootstrap less

我对网页设计很陌生......好吧,现在已经不在了,我在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>

迫不及待地开始为变量赋值,但我只是不确定要在哪个文件中执行此操作?

全部谢谢!

1 个答案:

答案 0 :(得分:4)

你在较少的文件中执行此操作!

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编译器将其编译为{{ 1}}文件,您只需在页面中包含.css文件。

这样,在我们在工作中进行部署之前,我不必运行转换。