Less编写及使用快速入门

Less编写及使用快速入门

前面我们学习了《4个案例入门,学会LESS使用》,今天一起来学习如何编写,编译并使用LESS

LESS的编写

LESS的使用是很容易的,使用你最常使用的代码编辑器,按LESSCSS的语法规则写好.less文件,接下来,使用编译工具它编译成.css,最后再引入页面即可。

LESS的编译

GUI编译工具

为方便起见,建议初学者使用GUI编译工具来编译.less文件,以下是一些可选GUI编译工具:

1.koala(Win/Mac/Linux)

国人开发的LESSCSS/SASS编译工具。

下载地址:http://koala-app.com/index-zh.html

2.Codekit(Mac)

一款自动编译Less/Sass/Stylus/CoffeeScript/Jade/Haml的工具,含语法检查、图片优化、自动刷新等附加功能。

下载地址:http://incident57.com/codekit/

3.WinLess(Win)

一款LESS编译软件。

下载地址http://winless.org/

4.SimpleLess(Win/Mac/Linux)

一款LESS编译软件。

下载地址http://wearekiss.com/simpless

Node.js库

LESSCSS官方有一款基于Node.js的库,用于编译.less文件。

使用时,首先全局安装less(部分系统下可能需要在前面加上sudo切换为超级管理员权限):

npm install -g less

接下来就可以使用lessc来编译.less文件了:

lessc example/example.less example/example.css

更多选项可以直接运行lessc查看说明。

LESS的浏览器端使用

LESSCSS也可以不经编译,直接在浏览器端使用。

使用方法:

下载LESSCSS的.js文件:点击下载
在页面中引入.less文件

<link rel="stylesheet/less" href="example.less" />

需要注意rel属性的值是stylesheet/less,而不是stylesheet。

引入第1步下载的.js文件

<script src="lesscss-1.4.0.min.js"></script>

CDN

<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.5.3/less.min.js"></script>

注意:

由于浏览器端使用时是使用ajax来拉取.less文件,因此直接在本机文件系统打开(即地址是file://开头)或者是有跨域的情况下会拉取不到.less文件,导致样式无法生效。

还有一种情况容易导致样式无法生效,就是部分服务器(以IIS居多)会对未知后缀的文件返回404,导致无法正常读取.less文件。解决方案是在服务器中为.less文件配置MIME值为text/css(具体方法请搜索)。或者还有一种更简单的方法,即是直接将.less文件改名为.css文件即可。

125jz网原创文章。发布者:江山如画,转载请注明出处:http://www.125jz.com/3606.html

(1)
上一篇 2019年7月17日 上午9:23
下一篇 2019年8月18日 下午6:25

99%的人还看了以下文章

  • CSS制作上一页 下一页 页码显示样式

    今天教大家制作页面的上一页 下一页 页码显示样式,效果如图所示。 <!doctype html> <html> <head> <meta charset=”utf-8″> <title>CSS制作上一页 下一页 页码显示样式|www.125jz.com</title> <style…

    2018年7月29日
    3.7K0
  • 第10课:表格

    表格用来显示那些逻辑上以行和列显示的信息。 表格难学吗? 对于初学者来说,在HTML中创建表格似乎比较复杂,不过只要耐心细致地观察,你就会发现表格实际上与其它HTML元素相似,也具有严格的逻辑结构。 例1: <table> <tr><td>单元格1</td><td>单元格2</td>&l…

    2018年1月19日
    2.0K0
  • 巧用边框线实现立体按钮效果(纯CSS)

    本文教你使用CSS制作立体按钮,代码简单。

    2020年2月2日
    3.5K0
  • “注册”按钮(图片)怎么跳转到注册页面?

    页面代码: <input name=”Submit” type=”submit” class=”STYLE2″ value=”登陆”> <input name=”Submit2″ type=”submit” class=”STYLE2″ value=”注册”> “注册”按钮怎么跳转到注册页面? <inpu…

    2021年4月5日
    1.2K0
  • 如何给网页中的表格table添加滚动条

    最近在写一个项目的时候输出的结果有点多table的宽度直接把页面撑变形了,就想到了给table加滚动条,接下来125建站网为大家介绍HTML给table添加滚动条的方法,有需要的小伙伴可以参考一下: 1、方法分析: 要给table添加滚动条其实很简单,我们首先把table放到一个div里面,然后再设置div显示滚动条即可。 2、html代码: <div…

    2023年3月9日
    1760
  • 解决网页中img图片出现多余空白的方案

    网页制作中,不管是table还是DIV+CSS排版时,会遇到浏览器中的图片元素img下出现多余空白的问题,非常常见,如何解决? <table class=”w1024″ border=”0″ cellspacing=”0″ cellpadding=”0″> <tr> <td colspan=”3″> <img src…

    2020年4月16日
    2.6K0

发表回复

登录后才能评论