CSS (Cascading Style Sheet) 层叠或级联样式表
CSS主要是用来进行网页风格设计的,通过设立样式表,可以统一地控制HTML中各个标签的显示属性,可以让开发者更能有效的控制WEB页面的外观、位置、动画等等效果。但需要注意的是CSS不是一门编程语言,它不具备一般编程语言的特性,比如使用变量、定义函数、控制结构等等。也就是说当你想要设计HTML的样式时,必须一行行的码代码,代码重用的唯一方式就是复制、粘贴,并且维护性、扩展性、组织性极差,想想都苦逼啊。
CSS预处理器
此事,CSS预处理器也就应运而生了。CSS预处理器其基本思想是,用一种专门的编程语言,为CSS增加了一些编程的特性,将CSS作为目标生成文件,然后开发者就只要使用这种语言进行编码工作。通俗的说,CSS预处理器用一种专门的编程语言,进行Web页面样式设计,然后再编译成正常的CSS文件,以供项目使用。CSS预处理器为CSS增加一些编程的特性,无需考虑浏览器的兼容性问题,例如你可以在CSS中使用变量、简单的逻辑程序、函数等等在编程语言中的一些基本特性,可以让你的CSS更加简洁、适应性更强、可读性更佳,更易于代码的维护等诸多好处。
在市面上主流的CSS预处理器有Sass、Less等,Sass诞生于2007年,Less诞生于2009年,受Sass影响较大,所以其实它们语法很类似;Sass是Ruby语言编写,在后端编译,Less用JavaScript语言编写,在客户端处理。也就是说Sass将CSS在开发时,会即时的生成编译后正常的CSS代码;而Less是在用户加载时即时地处理less文件,生成CSS进行引用。显然前者效率更高效,并且在细节处理上Sass更成熟一些,这里不赘述了。
SASS简介
Sass是为了解决CSS的不足,编写的一种对CSS进行预处理的“中间语言”,可以实现一些“编程”语言才有的功能,然后自动编译成CSS供浏览识别,这样既一定程度上弥补了CSS的不足,也无需一种新的语言来代替CSS以供浏览器识别。
Sass是最早的CSS预处理语言,有比Less更为强大的功能。最初它是为了配合haml而设计的,因此有着和haml一样的缩进式风格,但这种缩进格式不符合CSS语法,所以并不能被开发者们接受,所以使用率也不高;不过由于其强大的功能和Ruby on Rails
的大力推动,Sass从第三代开始,放弃了缩进式风格,并且完全向下兼容普通的Css代码,这一代的Sass也被称为Scss,更多的人也加入了使用Sass的队伍。
Sass也是无数前端框架的CSS预处理工具,著名的有Compass、Bourbon、Susy等等;在Laravel中的elixir也提供了Sass文件编译的功能等等,大量开发者给Sass提供支持。
课程简介
- Sass简介
- Sass安装
- Sass基本语法
- 变量、函数、控制结构的使用
- 七色板实例
课下作业
要求:使用Sass实现春夏秋冬的网页换肤效果,达到美观、可用、无Bug、逻辑清晰;