Heim > Web-Frontend > HTML-Tutorial > less 预处理器的方式来编写 CSS_html/css_WEB-ITnose

less 预处理器的方式来编写 CSS_html/css_WEB-ITnose

WBOY
Freigeben: 2016-06-24 11:39:12
Original
1151 Leute haben es durchsucht

昨天面试的时候,面试官问我:用过less没?  我:饿。。。。之前听过,具体没研究过。

于是今天决定搞明白这个。 

一、什么是less?

  Less 等代码无法直接在浏览器中执行,最终还是需要编译成 CSS 或 JS 。它们语法很棒,但是它们的编译方式却不够灵活。官方基本上都是只提供命令行的方式进行文件编译, less 还可以在页面中嵌入一个 less.js 进行在线编译,但这种方法实在是不靠谱。所以大家都喜欢使用图形界面工具来进行编译工作,高效快捷。在 koala 开发之前已经有一些工具了,比如 winLess 、 simpless 等,功能都比较单一,且只支持 less 。 还有一些同学折腾编辑器 sublime text 等,但目前还没有一个很完美的方案。还好,现在有了Koala。

二、Koala 是什么?

  koala 是一款桌面程序,支持 less 、 sass 、 coffeescript 即时编译,帮助 web 开发者更高效地使用 less 、 sass 、 coffeescript 开发。
项目地址: http://koala-app.com/index-zh.html

如今css3新出的样式必须要加上浏览器内核前缀才能兼容,我们会书写很多重复的css代码,当然你也可以Ctrl+C、Ctrl+V,但是这样书写大量看似没有逻辑的代码,不方便维护及扩展,不利于复用。

 

首先把下载好的koala打开,然后把待开发的项目添加进去,右键编写less即可,右上角勾上自动编译,每次编写完它会自动生成对应的css文件。

 

 

 

 

 

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage