初识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,如需转载请自行联系原作者

相关文章
|
前端开发 开发者
CSS预处理器Less、Scss
【10月更文挑战第3天】
258 59
|
前端开发 JavaScript 开发者
CSS进阶 - CSS Modules与预处理器简介
【6月更文挑战第17天】前端开发中,CSS Modules和预处理器(如Sass、Less)解决了大规模项目中CSS的管理难题,提升代码复用和维护性。CSS Modules提供局部作用域的类名,避免全局冲突,而预处理器扩展CSS功能,使代码更像编程语言。常见问题包括命名冲突和过度嵌套,可通过自动哈希、少嵌套、合理变量规划来解决。结合两者使用,遵循模块化和适度预处理原则,集成到构建工具中,能优化开发流程。这些技术是现代前端不可或缺的工具。
182 2
|
前端开发 开发者
在 Vite 中使用 CSS 预处理器的劣势是什么?
在 Vite 中使用 CSS 预处理器的劣势是什么?
|
前端开发 开发者
CSS的预处理器是什么?
CSS的预处理器是什么?
194 4
|
前端开发
在 Vite 中使用 CSS 预处理器的优势是什么?
在 Vite 中使用 CSS 预处理器的优势是什么?
|
存储 前端开发 开发者
深入了解 Sass 和 SCSS:CSS 预处理器的强大功能
Sass(Syntactically Awesome Stylesheets)是一个强大的 CSS 预处理器,为开发者提供了诸多高级特性,如变量、嵌套、混合、继承等,简化了 CSS 的编写和管理。SCSS 是 Sass 3 引入的新语法,完全兼容 CSS3,并增强了 Sass 的动态功能。本文详细介绍了 Sass 和 SCSS 的核心特性及其在实际开发中的应用,如变量定义、嵌套规则、混合、继承、以及常用的操作符与扩展功能。
489 0
|
前端开发 开发者 容器
Vue3中Sass的安装与使用指南:轻松上手CSS预处理器
Vue3中Sass的安装与使用指南:轻松上手CSS预处理器
1101 0
|
前端开发 C++
CSS预处理器之Sass(一)
CSS预处理器之Sass(一)
175 2
|
XML 前端开发 数据格式
探索CSS预处理器:Sass、Less与Stylus
探索CSS预处理器:Sass、Less与Stylus
|
前端开发
CSS预处理器之Sass(三)
CSS预处理器之Sass(三)
93 0