Web前端开发思考CSS篇:CSS预处理器时代 (一)

署名作者:Clarence

联系方式:QQ:1321518080

写在前面:本文不仅仅就Sass说Sass,更希望在行文中跟大家探讨前端开发的思想

是时候去说“改变”

面对Web前端开发三驾马车之一的样式表语言和层叠式样式表(CSS),你是否受够了她的“娇柔做作”:开发起来没完没了、运行起来担惊受怕、维护起来臃肿不堪。不管你承不承认,在团队研发过程中,CSS的开发和维护已经成了很多项目的苦不堪言的伤痛。首先我得承认,如果在项目初期做好CSS架构,使用不同的手段组织好CSS代码,例如按照职能划分,采用base.css + common.css + app.css的组织方式,CSS的开发还是可以很赞的,但这一切有一个很严酷的前提:开发和维护CSS的工程师必须要有还不错的CSS功底。

让我们回归到CSS本身,CSS基本上是设计师的工具,不是程序员的工具,CSS不是一门编程语言。从一个程序员的角度,我们需要一门能够定义变量,具有可靠语法的样式表编程语言。很幸运,技术的发展给我们带来了便利,一大批CSS预处理程序应运而生了。

CSS预处理器

CSS预处理器是为CSS开发添加了传统的编程属性,无需考虑浏览器的兼容性问题,其基本思想是,用一门专门的编程语言,进行网页样式设计,然后再编译成正常的CSS文件。如今CSS预处理器技术已经非常的成熟,作为其中的领头羊Sass和LESS已经是深入人心,但作为在CSS预处理器技术探索求知过程中,陨落的落寞者们,我还是想再次提及他们,向它们致敬。

Switch CSS

http://switchcss.sourceforge.net/

CSS Cacheer

http://shauninman.com/archive/2008/05/30/check_out_css_cacheer

CSS Preprocessor

http://pornel.net/css

DT CSS

https://code.google.com/p/dtcss/

CSS PP

http://csspp.org/

CSScaffold

http://www.w3avenue.com/2009/10/13/csscaffold-php-based-css-framework/

...

在为我们可敬的探索者致敬后,我们将隆重地请出处于荣耀之巅的Sass和LESS。


Less CSS <http://lesscss.org/>

Less 中国官网<http://www.lesscss.net/article/home.html>

Sass <http://sass-lang.com/>

对于Less和Sass谁更好点这个问题,我也曾经痴迷过,但当深入学习Less和Sass后,我发现痴迷这一争论的关键在于我对Less和Sass的不了解。CSS预处理程序没有绝对的好与不好,只有是不是最适合您的风格和项目的需求。这里我也推荐一个关于Sass与LESS对比的链接:http://css-tricks.com/sass-vs-less/。大家可以根据自己的情况决定学习哪个。本文章我将选用Sass作为目标对象,一个很大的原因是Sass具有它最值得自豪的资产 - Compass,而LESS目前还不具备此扩展。

按照常规我这里似乎需要说下CSS预处理程序对所有Web开发环境的重要意义,其实这东西很虚但却很实在。它们将:

缩短您的开发时间为CSS开发应用”不再重复自己”(DRY)的准则使您的代码更加清晰易读

Sass有哪些值得你了解

打开互联网,随便搜索一下,相信你会被一箩筐一箩筐的教程惊呆,教程如此之多,老衲该如何是好?这里我只想跟大家说两点:

  1. 官方文档是王道
  2. 实际操作是王道

对于程序员而言,Sass不过是一门轻量级脚本语言,掌握它的语法和基本运用,绝对是手到擒来,这里我不会重复大多数教程的翻译式讲解,我只是想跟大家探讨,从Sass身上我们能读懂到哪些?

Sass在线转换器

在线网站:http://sassmeister.com/
如果目前你只想基本了解Sass的基本语法什么的,你没有必要大费周章地安装Sass运行环境,使用Sass官方网站提供的线转换器,绝对非常的给力。

Sass的output_style

在线文档:http://sass-lang.com/documentation/file.SASS_REFERENCE.html#output_style

如果你写了若干年的CSS,你知不知道,CSS具有哪些编程风格,这些编程风格都有什么优点和缺点?

编程风格

特点

例子

Nested

嵌套缩进的CSS代码

#main {

  color: #fff;

  background-color: #000; }

  #main p {

    width: 10em; }

Expanded

没有缩进的、扩展的CSS代码

#main {

  color: #fff;

  background-color: #000;

}

#main p {

  width: 10em;

}

Compact

简洁格式的CSS代码

#main { color: #fff; background-color: #000; }

#main p { width: 10em; }

Compressed

压缩后的CSS代码

#main {color:#fff;background-color:#000;}#main p {width: 10em;}

看到具体的例子后,我想我也没有必要具体解释每一种编程风格的优缺点了,场景不同,编程风格也会不同,谁用谁知道。这里我想到了一句话“我就在碗里,你来取啊”~

从sass --watch说起

在线文档:http://sass-lang.com/documentation/file.SASS_REFERENCE.html#using_sass

官网上说“You can also tell Sass to watch the file and update the CSS every time the Sass file changes”,对,你明白了什么没有,Sass可以自动监听Sass文件,一旦文件变化了,就自动更新该Sass文件对应的CSS文件了。

现在,你的Web前端开发还停留在无休止的”F5”或者”Ctrl + F5”这一旧石器时代吗?如果是,你该对自己说,我真的落伍了。开发过程中,修改了CSS文件、JavaScript文件、HTML文件或者Image图片后,真的需要手动清除浏览器的缓存,然后刷新吗?答案,不需要,你需要了解LiveReload,哥们去学习一下Grunt吧。

Sass的@media

在线文档:http://sass-lang.com/documentation/file.SASS_REFERENCE.html#media

现在前端开发是什么时代,是HTML5 + CSS3时代,是移动互联时代。如果你还不知道media queries是何方神圣,那么你是不是要自责一下,然后默默地去开始你的CSS3漫漫长路~

Sass的@import

在线文档:http://sass-lang.com/documentation/file.SASS_REFERENCE.html#import

在编写高质量CSS的漫漫征途中,模块化永远是一个无法避免的话题,什么样的CSS代码是高效可靠的、维护性很好的,模块化是一个不是标准的标准答案。如果你曾经在自己职业生涯中使用过CSS框架组织代码,无论是按功能划分- font.css/color.css/layout.css;还是按区块划分 - head.css/foot.css/sidebar.css/main.css;亦或按职能划分 - base.css/common.css/page.css,那么恭喜你,Sass的@import将会将你的组织思想发挥得淋漓精致。

Sass的@extend

在线文档:http://sass-lang.com/documentation/file.SASS_REFERENCE.html#extend

如果你是标准的面向对象的工程师,你可能会对任何不提供面向对象特性的脚本语言(如JavaScript)不屑一顾,这里我也不多说了,我只能说我以前也是很不懂事的~ 如果你很好的理解并使用@extend技巧,你将受益良多。

Sass的Keyword Arguments

在线文档:http://sass-lang.com/documentation/file.SASS_REFERENCE.html#keyword_arguments

刚开始接触SassScript的keyword arguments时,我还是着实开心了一下,作为后起之秀的脚本语言,它在程序设计的层次上,已经将JSON风格作为参数考虑进来了,下面就稍稍给个例子吧

p {
  color: hsl($hue: 0, $saturation: 100%, $lightness: 50%);
}

Sass的强大后援团Compass

这里我只想用一句话概括,没有Compass的Sass,就像没有UI库的ExtJS,孤独寂寞冷。Compass 是一种开放源码 CSS 创作框架,它使用了 Sass 样式表语言。其多种可重用设计模式(使用混入)能够帮助您构造可靠、强大的样式表。Compass 常用代码库是 Sass 开发工作中不可或缺的工具。

当然Sass给我们带来的惊喜远远不止这些,她的优雅在举止神态中,也会让人感觉惊喜连连。

写在后面的话

这是该系列的第一部分,后面将深入地和大家探讨如何在项目中实践Sass,如何写出优雅高质量的代码。主要包含两部分:结合Compass探讨Sass代码的组织以及结合Grunt JS探讨如何在项目中高效使用Sass。


写作说明:本人致力于Web前端开发,熟悉基于JavaScript的所有框架,基于CSS的部分框架,精通jQuery, Backbone,对HTML5和CSS3有深入了解。对于前端开发流程有比较深入的实践,现致力于Grunt JS的推广。最近深入研究移动Web开发,对Hybrid Application情有独钟,致力于开发针对Hybrid Web应用的基于HTML5 API的框架。

如果有谁对针对Hybrid Web (Android、iOS)应用的基于HTML5 API的框架看法有兴趣的,可以联系本人,QQ 1321518080

发布了1 篇原创文章 · 获赞 0 · 访问量 1889
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览