LESS _ 学习 LESS

学习 LESS

LESS是一种动态的样式语言

LESS是一种动态的样式语言，让CSS样式语言具有动态语言的特征，如变量、函数等。LESS看似是一种语言，但更贴切的来说，更应该被视作写CSS的一种工具，写出的.less文件会被编译成.css文件，再予以发挥作用。

学习LESS前，请先学习HTML基础教程和CSS基础教程。至于学习LESS的重要性，专否的鄙见是：LESS是一个好的小工具，是一种选择，但这个选择并非是绝对强求的；另外LESS很容易，上手很快，五分钟就能学会；因此，建议读者花上五分钟时间，来从头到尾快速了解学习一下LESS。喜欢就用，不喜欢就不用；有需求就用，没需求就不用。总之，LESS的重要级别没那么高，选学，花五分钟大致了解一下即可。

使用LESS来写CSS

@fuckzhuanfou: #46acb6;

p {
    color: @fuckzhuanfou;
}

h3 {
    font-size: 24px;
    color: @fuckzhuanfou;
}

上述less文件，会生成如下css文件：

p {
    color: #46acb6;
}

h3 {
    font-size: 24px;
    color: #46acb6;
}

使用LESS的方式

在引入less.js前先要把自己的.less文件引入即可。（less.min.js是less.js的压缩版，等效）

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

但是一定要注意跨域问题：以上述代码为例，styles.less文件地址一定要和当前网页处于同一个域名之下；至于less.js文件随便，放哪里都可以。因此，使用LESS进行开发，最好在服务器上弄。（备注：相同主域名的不同子域名之间也是属于跨域）

less.js从哪里下载呢？

直接使用专否cdn托管的less.js（生产环境中，优先使用压缩版less.min.js）

<link rel="stylesheet/less" type="text/css" href="styles.less">
<script src="https://cdn.zhuanfou.com/less.min.js"></script>

本文档意在快速学习，更多请访问LESS的官网http://lesscss.org

学习 LESS

推广