动态样式语言——less运行环境的搭建及使用
2017-03-30 12:42
513 查看
由于CSS的维护和扩展工作艰巨。“动态样式语言”(如 less)在CSS的基础之上,添加了一些标准的“语言”所必须的内容:类型、变量、运算、函数、循环选择、继承等。
但是浏览器默认只支持静态样式语言,所以所有的动态样式首先必须“编译”为静态样式才可以实现渲染页面的功能!
所以 .less 文件必须用工具软件(lessc),转化为静态样式(CSS),才能被浏览器所使用。下面是两种转化方法:
一定要先引入less文件再引入js文件;客户端浏览器解析时会下载这两个文件,使用lessc.js把.less转化为css内容再渲染页面。
这就是不推荐在客户端使用less的原因,首先会影响页面加载的速度,浏览器要下载额外的lessc.js文件,还要将 .less 文件编译成 .css 文件。这两个多出来的步骤显然会影响性能;其次,如果在加载js文件的过程中网络出现问题、或者编译less文件时出错,页面就完全没有样式了。
1、需要下载并安装一款服务器端JS解释器: NodeJS
在网上找 node-v0.12.1-x86.msi(32位) 或 node-v0.12.4-x64.msi(64位) 安装包下载后 傻瓜式安装就可以了。安装完成后在命令行中输入node 或 node.exe出现下面的界面就表示安装成功了,如果不行就配一下环境变量的path。
2、下载LESS源文件的转换工具: lessc.js,可以直接上网找npm文件使用,然后放在没有中文和空格的目录下,我这里放在C盘根目录下了。转换工具在这里:C:\npm\node_modules\less\bin\lessc(省略了js后缀)
3、使用服务器端JS解释器执行LESS转换工具,有两种执行方式:
1)在命令行执行——使用不便、不推荐
在命令行输入node 转换工具路径 less文件路径 > 编译后css文件的存放位置就可以了。如:node C:\npm\node_modules\less\bin\lessc E:\1.less > E:\1.css
但是这种方式每次改完less文件都得重新编译,使用不方便,所以不推荐。
2)使用工具编译less文件——推荐
我这里用的是WebStorm(WS)中的文件监视器,这样在写创建或修改(less文件)的同时编辑器就自动帮着即时编译为css文件了,并存储在less文件同一目录下,但每个新项目在使用前都需要先帮WS配置一下:
依次点击:File -> Tools -> File Watcher -> 右上加号 -> Program,然后浏览选择lessc文件所在目录(我这里就是C:\npm\lessc.cmd),点OK,重启WS,完成。
现在可以尽情的写less语言了,写完将最后生成的css文件引入html文件中就可以了。
less语言是一个动态样式语言,有变量、混入、嵌套、继承、运算、函数、导入等语法,还可以用它来给bootstrap定制样式(bootstrap就是用这个语言开发的),非常好用。这里有几个学习less语言的中文网站可供参考学习:
中文文档:http://less.bootcss.com/
bootstrap中提供的中文文档:http://www.bootcss.com/p/lesscss/
但是浏览器默认只支持静态样式语言,所以所有的动态样式首先必须“编译”为静态样式才可以实现渲染页面的功能!
所以 .less 文件必须用工具软件(lessc),转化为静态样式(CSS),才能被浏览器所使用。下面是两种转化方法:
在客户端使用LESS——不推荐使用
这种方式的使用方式比较简单,只需要在HTML页面引入两个文件就可以了,分别是:1. 自己写的 *.less文件 、2. 网上下载的 lessc.js 文件。一定要先引入less文件再引入js文件;客户端浏览器解析时会下载这两个文件,使用lessc.js把.less转化为css内容再渲染页面。
这就是不推荐在客户端使用less的原因,首先会影响页面加载的速度,浏览器要下载额外的lessc.js文件,还要将 .less 文件编译成 .css 文件。这两个多出来的步骤显然会影响性能;其次,如果在加载js文件的过程中网络出现问题、或者编译less文件时出错,页面就完全没有样式了。
在服务器端使用LESS
这种方式是将编写的less文件,使用一个脚本工具(lessc),在服务器端执行一次编译操作,把.less文件 转化为 .css文件。然后在 .html文件中引入.css文件即可。实现编译操作需要几个步骤:1、需要下载并安装一款服务器端JS解释器: NodeJS
在网上找 node-v0.12.1-x86.msi(32位) 或 node-v0.12.4-x64.msi(64位) 安装包下载后 傻瓜式安装就可以了。安装完成后在命令行中输入node 或 node.exe出现下面的界面就表示安装成功了,如果不行就配一下环境变量的path。
2、下载LESS源文件的转换工具: lessc.js,可以直接上网找npm文件使用,然后放在没有中文和空格的目录下,我这里放在C盘根目录下了。转换工具在这里:C:\npm\node_modules\less\bin\lessc(省略了js后缀)
3、使用服务器端JS解释器执行LESS转换工具,有两种执行方式:
1)在命令行执行——使用不便、不推荐
在命令行输入node 转换工具路径 less文件路径 > 编译后css文件的存放位置就可以了。如:node C:\npm\node_modules\less\bin\lessc E:\1.less > E:\1.css
但是这种方式每次改完less文件都得重新编译,使用不方便,所以不推荐。
2)使用工具编译less文件——推荐
我这里用的是WebStorm(WS)中的文件监视器,这样在写创建或修改(less文件)的同时编辑器就自动帮着即时编译为css文件了,并存储在less文件同一目录下,但每个新项目在使用前都需要先帮WS配置一下:
依次点击:File -> Tools -> File Watcher -> 右上加号 -> Program,然后浏览选择lessc文件所在目录(我这里就是C:\npm\lessc.cmd),点OK,重启WS,完成。
现在可以尽情的写less语言了,写完将最后生成的css文件引入html文件中就可以了。
less语言是一个动态样式语言,有变量、混入、嵌套、继承、运算、函数、导入等语法,还可以用它来给bootstrap定制样式(bootstrap就是用这个语言开发的),非常好用。这里有几个学习less语言的中文网站可供参考学习:
中文文档:http://less.bootcss.com/
bootstrap中提供的中文文档:http://www.bootcss.com/p/lesscss/
相关文章推荐
- 一种 动态 样式 语言. LESS 将 CSS 赋予了动态语言的特性,如 变量, 继承, 运算, 函数. LESS 既可以在 客户端 上运行 (支持IE 6+, Webkit, Firefox),也可以借助Node.js或者Rhino在服务端运行。
- LESS一种 动态 样式 语言.
- 16、单机运行环境搭建之 --CentOS-6.4下使用TCMalloc优化mysql5.6
- go语言学习,使用Sublime Text 2 搭建环境
- 使用 Docker 搭建 Java Web 运行环境
- Less (一种动态样式语言)
- 14、单机运行环境搭建之 --Centos6.4下使用Denyhosts禁止针对linux sshd的暴力破解
- 动态样式语言Scss&Less介绍与区别
- Ubuntu系统下使用Eclipse搭建hadoop2.4运行环境
- Web前端一种动态样式语言-- Less
- 使用 Docker 搭建 Java Web 运行环境
- Less (一种动态样式语言)
- 动态样式语言——Less 的学习
- 使用vs2010和masm32搭建win32汇编语言编程编译环境
- 动态的样式语言less语法详解之变量与extend
- ant笔记(一)初步使用:搭建环境和运行测试例子
- LESS一种 动态 样式 语言.
- SAStruts使用环境搭建运行tutorial project
- 【CSS】LESS(样式语言):动态样本表语言
- php学习笔记1——使用phpStudy进行php运行环境搭建与测试。