返回宝典

学习 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

上一节 下一节