加快开发时间的8个CSS的预处理程序
fmms 13年前
<p>CSS 可以让你做很多事情，但对开发者来说，缺乏很多特性，例如变量、常量以及一些编程语法。本文介绍 8 个 CSS 预处理器，可以加速你的 CSS 开发。</p> <h2>Less CSS</h2> <div id="p_fullcontent" class="detail"> <p>Less CSS 是一个使用广泛的 CSS 预处理器，通过简单的语法和变量对 CSS 进行扩展，可减少很多 CSS 的代码量。</p> <p><img title="加快开发时间的8个CSS的预处理程序" border="0" alt="加快开发时间的8个CSS的预处理程序" src="https://simg.open-open.com/show/078c72cc5eda016e15ca545f8bd04c56.png" width="594" height="441" /></p> </div> <p><strong>Get it: <a href="/misc/goto?guid=4958197005795287117">http://www.oschina.net/p/lesscss</a></strong></p> <h2>Sass</h2> <p>Sass 扩展了 CSS3，增加了规则、变量、混入、选择器、继承等等特性。Sass 生成良好格式化的 CSS 代码，易于组织和维护。<br /> <img title="加快开发时间的8个CSS的预处理程序" border="0" alt="加快开发时间的8个CSS的预处理程序" src="https://simg.open-open.com/show/a7283a3260ba504851d42353fffd150d.png" width="594" height="441" /><br /> <strong>Get it: <a href="/misc/goto?guid=4958197006541307319">http://www.oschina.net/p/sass</a></strong></p> <h2>Turbine</h2> <p>如果你是一个 PHP 爱好者，那么 Turbine 非常适合你，很简单的语法、自动 gzip 多个 css 文件，修复了跨浏览器的问题等等。<br /> <img title="加快开发时间的8个CSS的预处理程序" border="0" alt="加快开发时间的8个CSS的预处理程序" src="https://simg.open-open.com/show/1fcab1cbe4eb5ea3fad8516c189ec781.png" width="594" height="441" /><br /> <strong>Get it: <a href="/misc/goto?guid=4958197007276803001">http://turbine.peterkroener.de/index.php</a></strong></p> <h2>Switch CSS</h2> <p>Switch 是一个全功能的稳定的 CSS 预处理器，基于 Apache 和 mod_python 下运行，也提供命令行处理工具。<br /> <img title="加快开发时间的8个CSS的预处理程序" border="0" alt="加快开发时间的8个CSS的预处理程序" src="https://simg.open-open.com/show/c8d9aadb0215bdd730ad151235e30314.png" width="594" height="441" /><br /> <strong>Get it: <a href="/misc/goto?guid=4958197008007258585">http://www.oschina.net/p/switchcss</a></strong></p> <h2>CSS Cacheer</h2> <p>CSS Cacheer 是一个很酷的预处理器可让开发人员创建 CSS 插件，要求 PHP 和 apache 的 mod_deflate 和 mod_rewrite 模块。<br /> <img title="加快开发时间的8个CSS的预处理程序" border="0" alt="加快开发时间的8个CSS的预处理程序" src="https://simg.open-open.com/show/fa12828428249c6a3729208f967c7194.png" width="594" height="441" /><br /> <strong>Get it: <a href="/misc/goto?guid=4958197008743615542">http://retired.haveamint.com/archive/2008/05/30/check_out_css_cacheer</a></strong></p> <h2>CSS Preprocessor</h2> <p>另外一个有趣的预处理器，使用 PHP5 开发，可使用一些例如 <em>margin-left: (200px * 3/2 – 10px);</em> 这样的表达式<br /> <img title="加快开发时间的8个CSS的预处理程序" border="0" alt="加快开发时间的8个CSS的预处理程序" src="https://simg.open-open.com/show/b4a8a1ef33813c69e62ca774e123f44b.png" width="594" height="441" /><br /> <strong>Get it: <a href="/misc/goto?guid=4958197009486085641">http://pornel.net/css</a></strong></p> <h2>DT CSS</h2> <p>DtCSS 是一个 PHP 脚本，用来对 CSS 文件进行预处理。DtCSS 可通过扩展 CSS 的特性来加速 CSS 编码。例如嵌套选择器、颜色混合等等。DtCSS 读取 CSS 文件并对特殊语法进行处理，然后输出标准 CSS。DtCSS 包含一个智能的缓存系统。<br /> <img title="加快开发时间的8个CSS的预处理程序" border="0" alt="加快开发时间的8个CSS的预处理程序" src="https://simg.open-open.com/show/9dd6a888c5bd743368fed5b604cdbc16.png" width="594" height="441" /><br /> <strong>Get it: <a href="/misc/goto?guid=4958197010225242292">http://www.oschina.net/p/dtcss</a></strong></p> <h2>CSS PP</h2> <p>CSS PP 目前还是 alpha 版，提供 PHP、Python 和 Ruby 的版本<br /> <img title="加快开发时间的8个CSS的预处理程序" border="0" alt="加快开发时间的8个CSS的预处理程序" src="https://simg.open-open.com/show/47f0d9e33cf97c2afdb198b31df33d07.png" width="594" height="441" /><br /> <strong>Get it: <a href="/misc/goto?guid=4958197010954488580">http://csspp.org/</a></strong></p> <br /> 转自：http://css.dzone.com/articles/8-css-preprocessors-speed