0906_css预编译器 - scss

新内容(sass)

概述

由于 css 本身的一些局限性(效率低、扩展低、重用低、维护难)，所以诞生了一些 css 的处理器来简化 css 的编写

sass 是 css 预处理器中的其中一种，使用 ruby 编写的、具有编程思想的 css 预处理器

sass 简介

sass 编译方式(四种)

• nested：嵌套缩进的 css 代码，默认
• expanded：没有缩进的、扩展的 css 代码
• compact：简洁格式的 css 代码
• compressed：压缩格式的 css 代码

混合宏(举例)

button按钮，抽取一个公共常用样式，便于实现按钮样式复用

import - 导入外部文件，“_ 表示资源文件，不会默认编译,在.scss文件名前加_”(导入文件是直接合并代码，而不是引入)

基于 sass 的二次开发(框架)compass (它的关系就类似与js - jQ)

作业(美观、可用、无BUG)

• 一个页面，最少两种换肤
• sass 语法规则
• 好的注释，源码

课下学习

资料

• 慕课网

  sass入门篇

  sass进阶篇

• w3c http://www.w3cplus.com/sassguide/

内容

• ruby 安装
• sass 安装
• sass 文件编译
• sass 语法
• 编译
• 变量
• 嵌套
• 混合宏 (注意结合以下两项三者之间的区别)
• 扩展/继承
• 占位
• 运算
• 逻辑控制
• 函数
• “@” 符号