对电子商务网站建设与管理的心得,做程序网站需要什么代码吗,平面广告怎么设计,鱼爪商标交易平台LESS —— 一个CSS预编译框架#xff0c;它在CSS的语法基础之上#xff0c;引入了变量、Mixin#xff08;混入#xff09;、运算以及函数等功能#xff0c;大大简化了CSS的编写#xff0c;并且降低了CSS的维护成本#xff0c;就像它的名称所说的那样#xff0c;LESS可以…LESS —— 一个CSS预编译框架它在CSS的语法基础之上引入了变量、Mixin混入、运算以及函数等功能大大简化了CSS的编写并且降低了CSS的维护成本就像它的名称所说的那样LESS可以让我们用更少的代码做更多的事情。 有CSS基础的同学学习LESS会非常容易上手因为它们的非常相似。 本质上LESS包含一套自定义的语法及一个解析器用户根据这些语法定义自己的样式规则这些规则最终会通过解析器编译生成对应的CSS文件。LESS并没有裁剪CSS原有的特性更不是用来取代CSS的而是在现有CSS语法的基础上为CSS加入程序式语言的特性。 LESS可以直接在客户端使用也可以在服务器端使用但是直接使用LESS的做法我是不推荐的因为这样增加了性能损耗。在实际项目开发中我们更推荐将LESS文件编译生成静态CSS文件并在HTML文档中应用。因此这里直接省略了如何在客户端和服务端使用LESS有兴趣的同学可以到【http://www.ibm.com/developerworks/cn/web/1207_zhaoch_lesscss/】这篇文章找到相关的信息and本文中不少的内容也是摘自该文章这里顺便表达对该文章的尊重。 如何将LESS文件编译生成静态CSS文件呢小生在实际开发中所用的方法是通过Webstrom的LESS CSS Compiler插件。它能在LESS文件修改保存的时候检测LESS文件变化然后编译生成CSS文件。当然对于有些同学来说开发机器不怎么给力你也可以手动触发编译这样可以减轻机器负担。回想起当年的血泪史了...当然方法总是比问题多。除了这个方法之外肯定还有别的方法这里就不作探讨了有需要的同学自行摸索吧。 接下来我们来具体说说我上面提到的方法——Webstrom加LESS CSS Compiler插件三言两语的描述相信对于没接触过的同学来说还是太过模糊我们来点实际的。 Webstrom官网http://www.jetbrains.com/webstorm/index.html LESS CSS Compiler官方插件页http://plugins.jetbrains.com/plugin?prpluginId7059 Webstrom的下载我相信应该是没什么大问题的因为就算上不去官网国内也应该有其他的下载资源。 对于破解嘛天朝的码农们的强项人人必备也无须我废话。 至于LESS CSS Compiler...如果你实在打不开官方插件页试试直接用下面的url下载试试看吧... http://plugins.jetbrains.com/files/7059/14973/lessc-plugin.zip 如果这样也不行那建议你考虑用其他方法吧国内我一时也没找到很好的下载资源。 下载完之后开始安装吧... Webstrom傻瓜式无脑安装不废话...不过这里补充一点我这时用的是Webstrom8.0版本所以后面的步骤都是以此版本为基础的。 安装好后运行Webstrom——右上角菜单栏file选项卡——settings——左侧选Plugins——右侧面板底部的几个按钮中找到Install plugin from disk...——选中LESS CSS Compiler插件zip压缩包的所在路径——点OK安装——再点击settings窗口上的OK按钮——弹出重启Webstrom提示框——重启Webstrom——LESS CSS Compiler插件安装大功告成~~~ 然后是配置阶段好吧到了这个阶段必须上图了... 首先建一个测试项目结构如下简单得不能再简单了吧~~ 然后打开settings界面找到LESS Profiles选项然后点击加号添加配置输入配置名这里我用的是test然后选中刚添加的test配置就能看到如下图的界面 Name - 配置名也就是刚刚的test LESS source directory - less源文件所在目录 Include files by path - 对应目录中需要执行编译的less文件多个文件用“,”隔开支持“*”和“?”分别进行多个和单个字符的匹配 Exclude files by path - 对应目录中不需要执行编译的less文件多个文件用“,”隔开支持“*”和“?”分别进行多个和单个字符的匹配 CSS Output Directory - 生成css文件的存放目录 Compile automatically on save - 当文件修改并保存时自动编译个人不建议勾选此项比较推荐使用手动编译 Compress CSS output - 编译后生成压缩版的CSS文件我在开发过程中一般情况下都会勾选它只有在个别特殊调试有需要的时候才会把选中去掉 因为我们需要用到手动触发less编译所以这里给这一操作设置一下快捷键。打开settings界面找到keymap然后在快捷键列表里找到Compile to CSS。 啥怎么找合理运用Webstorm自带的搜索功能吧这里就不再对这些细节做逐步细述了。我已经是一个粗枝大叶的人了我都知道的东西你不知道的话你就该检讨一下了。 找到之后觉得什么快捷键方便好记随便用。只要注意不要和默认快捷键冲突就行了如果出现冲突Webstorm会有提示的。所以后面你爱咋折腾咋折腾我在这里不废话了。 最后让我们来测试一下LESS是否能成功编译 先在test.less文件上写下这么一段代码... red: #ff0000;
.aa {color: red;
} 然后手动触发LESS编译没多久CSS输出目录中的同名CSS文件里输出了这样的结果...PS如果同名的CSS文件还没有创建编译器会帮我们自动创建一个的 .aa {color: #ff0000;
} Nice编译成功至此大功告成。 上面的方法是我目前用过的最简便的方法了。不过有一个弊端是依赖Webstrom及其插件对于开发工具统一化的团队来说会比较适合。 但如果是一些比较大的团队成员所用开发工具并不统一的话那就不好推广了。 这时候我们可以考虑更通用的做法比如通过grunt的grunt-contrib-less和grunt-contrib-watch工具。 这里就不再对这种做法进行细述了网上关于grunt使用的学习资料多不胜数如有需要自行研究吧。转载于:https://www.cnblogs.com/czf-zone/p/4355507.html
