初识CSS预处理器

简介:

写惯了Java和C#之类的代码,每次写CSS的都都感觉很不爽,因为很多如果采用OOP和思想来写CSS的话,绝对不需要将CSS写得这么复杂,而且修改起来也会方便得多——不过因为CSS不支持OOP的语法,所以也只能感叹而已。

  很偶然,了解到了LESS,于是知道原来CSS还有预处理器。虽然很早以前想过写这么一个东西,不过一想到语法分析这种事情就头痛——虽然有YACC和LEX,但是语法还是需要自己定义的。

  说话发现了LESS之后,发现LESS会使写CSS成为一件愉快的事情,说起来LESS的语法也不复杂,它的中文官网http://www.lesscss.net/)上有介绍,所以我也就懒得去费口舌了。

  不过据介绍,它只能在Node.js服务端或者Html页面上通过less.js来翻译执行。我的项目中没有用到Node.js,到是可以采用less.js来使用,问题是,页面加载过程中用JS来解释N个.less文件,那效率一定是会受到影响的,为嘛LESS不提供静态编译工具呢?

  于是Google之。发现了原来有WinLessSimpLESS之类的工具,可以在Windows下打开LESS文件,编译成CSS。除此之外,还有一些在线LESS编译器……这些工具都可以在Less Online Parser上找到官方链接。

  现在出现了另一个问题,我希望在编译的时候自动将.less编译成.css,而不是再启动一个工具来进行编译,要不然也太不自动化了。于是继续Google,换了N个关键字,未果……于是想自己来写段JS代码来HACK less.js,初步想法是通过Windows的WSH解释Javascript,模拟一个HTML的环境给less.js运行——不过最终觉得麻烦,放弃了,继续Google。

  功夫不负有心人,总算让我找到了一个less.js-windows,作者跟我想法差不多,不过很感谢他比我勤快多了!有了这东西,就可以在命令行翻译.less文件生成.css了。

  知道LESS之后,搜索了一下Visual Studio的插件,很高兴Mindscape Web Wrokbench支持LESS,而且它还支持Sass——哦,不认识,Google下。原来CSS预处理器还有Sass和Stylus等,这里有一篇文章介绍它们的异同。



本文转自边城__ 51CTO博客,原文链接:http://blog.51cto.com/jamesfancy/901441,如需转载请自行联系原作者

相关文章
|
1月前
|
前端开发 IDE JavaScript
探秘 Sass 之路:掌握强大的 CSS 预处理器(上)
探秘 Sass 之路:掌握强大的 CSS 预处理器(上)
|
1月前
|
存储 前端开发 开发工具
CSS编写的瓶颈在哪里?CSS预处理器登场解决你的燃眉之急!(二)
CSS编写的瓶颈在哪里?CSS预处理器登场解决你的燃眉之急!
|
1月前
|
前端开发
CSS编写的瓶颈在哪里?CSS预处理器登场解决你的燃眉之急!(一)
CSS编写的瓶颈在哪里?CSS预处理器登场解决你的燃眉之急!
|
7天前
|
前端开发 开发者
前端开发中的CSS预处理器Sass
在前端开发中,CSS预处理器Sass是一种非常实用的工具,能够提高代码的可维护性和扩展性。本文将介绍Sass的基本语法、特性以及在实际项目中的运用,帮助读者更好地理解和应用这一技术。
|
7天前
|
前端开发 开发者
前端开发中的CSS预处理器Sass
在前端开发中,CSS预处理器Sass是一种非常实用的工具,能够提高代码的可维护性和扩展性。本文将介绍Sass的基本语法、特性以及在实际项目中的运用,帮助读者更好地理解和应用这一技术。
7 0
|
1月前
|
前端开发 JavaScript 开发者
探秘 Sass 之路:掌握强大的 CSS 预处理器(下)
探秘 Sass 之路:掌握强大的 CSS 预处理器(下)
|
1月前
|
前端开发 编译器 Python
拥抱简洁:探索Stylus的简洁语法与CSS预处理器之美
拥抱简洁:探索Stylus的简洁语法与CSS预处理器之美
|
1月前
|
存储 前端开发 JavaScript
CSS编写的瓶颈在哪里?CSS预处理器登场解决你的燃眉之急!(三)
CSS编写的瓶颈在哪里?CSS预处理器登场解决你的燃眉之急!
|
1月前
|
前端开发 JavaScript 编译器
CSS预处理器【Less】
CSS预处理器【Less】
46 0
|
3月前
|
前端开发 JavaScript Ruby
Vue项目实战(08)- css预处理器
Vue项目实战(08)- css预处理器
44 0

相关产品

  • 云迁移中心