【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?pr=&pluginId=7059

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/359123.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

掌握 React 与 React Native

今天面试被人问到React 与 React Native ,废话不多说,直接上干货。 React Native官网:https://reactnative.cn/ React Native App 页面布局直接通过 HTML 和 CSS 的前端基础技术进行布局与开发,大大降低了学习成本。 你如果早就在心里有开发一个自己 App 的想法,而刚…

计算机仿真在机械应用,浅谈计算机仿真在机械的应用.doc

浅谈计算机仿真在机械的应用浅谈计算机仿真在机械上的应用李思宏(重庆交通大学,重庆402247)摘要:如今计算机仿真技术在机械上有着广泛的应用,计算机仿真已然成为热门。本文用综述的形式简要介绍了计算机仿真的概念、机械生产现状及计算机仿真…

cpu序列号唯一吗_怎么看电脑硬件是不是新的 有什么软件能检测吗?

怎么看电脑硬件是不是全新的很多人比较关心的问题,毕竟现在很多奸商为了最求利润什么招式都用的出来,其中依旧重新,依次充好是最常见的伎俩了。 怎么看电脑硬件是不是新的 有什么软件能检测吗?这个时候大家可能就会想了&#xff0…

如何破解网页端已保存的用户名和密码

使用谷歌(火狐、IE等)浏览器打开需要破解的网页。 按F12显示网页代码页面 鼠标点击一下密码的对话框 快捷键:CtrlShiftC 删除字段"password" 就可以显示密码啦。

扬州大学计算机考研难考吗,扬州大学(专业学位)计算机技术考研难吗

考研真题资料优惠价原价选择很多考生在准备扬州大学(专业学位)计算机技术考研难吗?是考研报考的时候都会产生这样的疑问:这个专业的研究生好吗?适合我吗?对我以后的人生和职业会有帮助吗?考生在准备扬州大学(专业学位)…

21世纪的设计模式:适配器模式

这是我的演讲“ 21世纪的设计模式”的第三部分。 适配器模式桥接世界。 在一个世界中,我们有一个概念的界面。 在另一个世界,我们有不同的界面。 这两个接口有不同的用途,但有时我们需要进行转移。 在一个编写良好的世界中,我们可…

python 编辑数学公式_用python编写数学公式

我正在用python编写此公式。 请查看图片我正在使用以下代码。 它总是会出错。import mathimport matplotlibmatplotlib.use(TkAgg)from pylab import *import cmathimport networkx as nximport random as rdimport numpy as npgnx.karate_club_graph()for i in g.nodes_iter()…

在百度搜索页添加公司总部的客服电话

先看一下收录标准 1.登录百度数据开放平台:http://open.baidu.com/data/ms/nav/pc/ 注意事项: 2.进到信息提交的页面,先填写相应的资质,后提交信息即可,按照给出来的示例,去填写相对应的信息就可以了

理解Linux系统中的load average(图文版)

本文转自:http://heipark.iteye.com/blog/1340384 一、什么是load average? linux系统中的Load对当前CPU工作量的度量 (WikiPedia: the system load is a measure of the amount of work that a computer system is doing)。也有简单的说是进程队列的长度…

click点击后鼠标移去就失效怎么实现_鼠标右键失灵怎么办,你知道原因吗?

在上网时,有时会遇到按右键没有反应的情况。一开始还以为是中了病毒,但是重启之后,又恢复正常了,这到底是怎么回事呢?如果是在我电脑上操作电脑软件导致的鼠标右键失灵可能以下原因造成的。一:系统繁忙&…

计算机考研379分,考研379分报考南开大学被刷,是调剂还是二战?师姐建议非常肯定...

原标题:考研379分报考南开大学被刷,是调剂还是二战?师姐建议非常肯定随着考研国家线公布,34所自主划线的985大学也加快了复试的脚步,目前很多大学已经开始了复试工作,比如清华大学,南开大学等。…

微信小程序源码下载链接

参考链接备用:https://www.cnblogs.com/ytkah/p/9003620.html 微信小程序的火热程度大家都有所了解,也有很多牛人写了不错的小程序,今天ytkah就整理一些github上的小程序开源项目,源码可以直接下载来用,感兴趣的朋友赶…

竹签子毕竟是_毕竟是什么程序和功能?

竹签子毕竟是许多RDBMS支持“例程”的概念,通常将其称为过程和/或函数。 这些概念已经存在于编程语言中一段时间​​了,而且不在数据库中。 区分程序和功能的著名语言是: 艾达 基本知识 帕斯卡 等等… (存储的)过程…

开源源码合集

微信小程序的火热程度大家都有所了解,也有很多牛人写了不错的小程序,今天Benson就整理一些github上的小程序开源项目,源码可以直接下载来用,感兴趣的朋友赶紧去看看吧!仿豆瓣电影微信小程序 https://github.com/zc…

flink写入 mysql_flink写数据到mysql(java)

在指定了DataSet的Input后,只需要指定一个OutputFormat即可,OutputFormat的作用就是将数据集写入指定的存储中。//创建数据汇public static OutputFormat insertMysql(){OutputFormat insertMysql JDBCOutputFormat.buildJDBCOutputFormat().setDrivern…

2019广西对口计算机分数线,2019广西本科第一批投档分数线出炉,网友:我差一点考上清华大学...

2019广西本科第一批投档分数线出炉,网友:我差一点考上清华大学……就在昨天,7月13号,广西招生考试院公布了“2019年普通高校招生本科第一批最低投档分数线”。不知道,参加第一批志愿填报的考生们,你们过线了…

Android 4.4及以上系统下应用的状态栏颜色渐变效果的实现

上一篇转载的博文里讲到了怎么开启状态栏透明的效果,不过如果在有ActionBar的情况下,会出现状态栏透明而ActionBar横亘在状态栏和内容之间的丑陋情况,如下图: 通过百度之后,发现了GitHub上有个项目可以实现从ActionBar…

学习Spring-Cloud –基础结构和配置

我有机会与Spring-Cloud一起创建了一组云就绪微服务的样本集,Spring-Cloud如何使不同的基础架构组件和服务很好地协同工作给我留下了深刻的印象。 我习惯于基于基于Netflix OSS的堆栈创建微服务,通常在Netflix堆栈中, Eureka被认为是微服务进…

【APICloud系列|6】使用APICloud接入客服系统美洽获取Appkey配置

1.使用超级管理员(没有注册的提前注册登录一下)登录美洽:https://app.meiqia.com/ 2.找到设置——SDK 3.点击添加APP配置 4.上传

架构(三层架构)、框架(MVC)、设计模式三者异同点

前言: 本博客主要针对架构、框架和设计模式三者的差别、还有三层和MVC的差别进行讨论、对于这三者一点都不了解的、请点在维基和百度百科上补补课、这里就不发链接了 软件架构(software architecture) 软件的架构是系统的一个草图、阐述了各个…