Sass的介绍与研究樊宇.pptVIP

? 2014 Asiainfo linkage。 All rights reserved ? 2014 Asiainfo linkage。 All rights reserved ? 2014 Asiainfo linkage。 All rights reserved Sass介绍及研究 樊宇 2014年4月 内容提要 第一部分：Sass介绍 第二部分：compass介绍 第三部分：oocss+Sass最佳实践 第四部分：Grunt配置Sass自动编译 第五部分：总结 第一 部分 Sass介绍 我们都知道，CSS并不是一种编程语言。它并不像其它程序语言，比如说Java、Javascript等，有自己的变量、常量、逻辑判断语句这些特征，CSS只是一行行单纯的属性描述，写起来相当的费事，而且代码难易组织和维护。 很自然的，有人就开始在想，能不能让CSS像其他程序语言一样，加入编程元素，让CSS能像其他程序语言一样可以做一些预定的处理。 于是“CSS预处器（CSS Preprocessor）”这个概念就应运而生啦。 写在前面 java javascript c php c++ objective-c Python Ruby css 我不是编程语言 我们是编程语言 ... 什么是CSS预处理器？ 　　CSS预处理器定义了一种新的语言，将CSS作为目标生成文件，然后开发者就只要使用这种语言进行编码工作，然后再编译成正常的CSS文件。CSS预处理器为CSS增加一些编程的特性，例如可以在CSS中使用变量、逻辑判断、函数等在编程语言中的一些基本特性，可以让你的CSS更加简洁、可读性更强，更易于代码的维护等诸多好处。常见的预处理器有：Sass,LESS,STYLUS. 预处理器文件 CSS文件 编译 什么是Sass Sass是一种基于ruby编写的CSS预处理器，诞生于2007年，是最早也是最成熟的一款CSS预处理器语言，它可以使用变量、嵌套、混入、继承，运算，函数等特性，使得CSS的开发，变得简单清晰可维护，大大提高了效率。Sass本身的语法并不会被浏览器识别，因为它不是标准的CSS格式，它更像一种极简单的动态语言，所以需要编译成合法的CSS让浏览器识别。 开发模式对比 目前的开发模式： HTML CSS PAGE + = Sass开发模式： HTML CSS PAGE + = Sass 编译 使用sass，我们将不需要编写css代码，而是写Sass代码，但是最终在页面中引入的依然是css文件，只不过是Sass文件编译之后的css文件。 特性——变量 当样式表里需要换一套颜色，要找到好几处地方，并且替换好几次颜色值。如果我们能够在只改变某一处的属性值，其他地方的属性也会随之相应改变？那么我们可以使用Sass！ $linkColor: #08c; a { color: $linkColor; } .nav { background-color: $linkColor; } h1{ color: $linkColor; } .foo{ color: $linkColor; } .head{ color: $linkColor; } a { color: #08c; } .nav { background-color: #08c; } h1{ color: #08c; } .foo{ color: #08c; } .head{ color: #08c; } 编译后： 特性——混合（mixin） 在Sass中，可以为公用的CSS样式定义一个mixin，然后在需要使用这些样式的地方直接调用定义好的mixin。声明一个mixins时需要使用@mixin，然后后面紧跟mixins的名。 @mixin style($size: 15px, $color:#999) { font-size: $size; color:$color; line-height: 1.5; } content { @include style(20px,black); margin:20px; } header { @include style(25px,blue); } footer { @include style(30px,red);