sass与compass学习笔记
TRANSCRIPT
wenjuli( 李文举 )
预备知识
多人协作的长期项目代码注重什么？
– 可维护性，可扩展性，可复用（可移植）– KISS, DRY
为什么要用预编译器？• 动态创建静态样式表• 更高效地书写高可维护性的 css• 不能帮助你写更好的样式
• 预编译器： Sass / Less / Stylus• 后编译器： postCSS / CSSNext
Sass
• 介绍• 安装• 编辑器• 调试– source map– work space– 中文注释问题： .scss 文件设置 @charset “utf-8”( 是双
引号 )
基础语法
变量• 变量名用中划线还是下划线分隔？
指向同一变量
都行，呵呵
CSS 规则嵌套• 小心嵌套层级，勿滥用，否则难以维护
• 父选择器引用 - &伪类
父选择器之前添加选择器
可配合BEM ×
CSS 规则嵌套• 选择器组嵌套（生成后的选择器性能问题）
• 子 & 兄弟选择器 - >, +, ~
CSS 规则嵌套• 属性嵌套
CSS 规则嵌套• @-root
CSS 规则嵌套• 建议：
– 伪类、伪元素&:hover / &::before
– 控制当前选择器状态：&.is-active （复合选择器， & 只能放在前面）
– 另一种状态下，对当前元素的样式异化.no-csstransforms &
– 另一个容器中，对当前元素的样式化.other-wrap &
导入 Sass 文件
可省略后缀.scss
CSS @import 执行到下载
Sass @import 编译时导入
@import url(‘a.css’)
@import ‘a’
文件顶部
任意位置
导入 Sass 文件• Sass partials （分表）– 仅为导入而生，无需生成单独的 css 文件– 以下划线开头，引用时可以省略下划线• themes/_night-sky.scss• @import “themes/night-sky”
– Cssgaga 类似功能： a.import.css /* 命名规则*/
导入 Sass 文件• 嵌套导入
_blue-theme.scss
partials （分表）中定义的所有 Variable 和 Mixin 仅在本规则范围内有效。
导入 Sass 文件• 默认变量值 - !default
_b.scss
覆盖导入的默认值
导入 Sass 文件• 无法根据变量动态导入 Sass 文件
• 导入 css 文件– 文件扩展名为 .css– 文件名为 URL– css 导入语法： url()
注释• Silent comment ：不出现在生成的 css 中
静默注释
小结
• 变量使单个属性值可复用• 嵌套、导入、注释使 Sass 文
档组织更有条理和更易于阅读
Mixins
• 适用于大段表象样式的复用• 定义： @mixin mixin-name{...}• 引用： @include mixin-name
• 本质是代码复制，避免滥用
Mixins
• 何时使用 Mixins?– 构成一个逻辑单元– 经验法则• 能否用一个简短的好名字描述这组 CSS 规则？• 语义的（ css 类名） vs. 表象的（ Mixin 名）• align-center / screen-only / ...
Mixins
不错奥
Mixins
• 传入参数
按参数顺序设置 按参数名称设置
Mixins
• 默认参数值
Mixins
• 参数为选择器 #{} 插值语句
×
选择器继承 / 扩展• 仅重复选择器，用于减少
重复，精简代码• 遵循 cascade 规则
• OOCSS：一个选择器继承另一个选择器的所有样式
• 语法： @extend• 占位选择器： %selector
Nicole Sullivan
选择器继承 / 扩展
选择器继承 / 扩展• 继承的高级用法– 所有 css 规则均可使用 @extend ，但并非所
有 css 规则都可被扩展（ be @extended ）– 继承一个 HTML 元素– 扩展一个复杂选择器– !optional 当扩展类不存在时，可不报错
×
选择器继承 / 扩展• @extend-Only + placeholder
Selectors– 选择器仅用来被扩展，不直接作用于 html– 占位选择器（ %foo ， class 、 id皆可），不会生成到 css 内，减少冗余，避免冲突
选择器继承 / 扩展• 何时使用继承？– 继承自另一个类名（ seriousError Error ）– 类名更加特例化–与Mixin相比，样式精简–与选择器组相比，可以分散在样式表的各处
选择器继承 / 扩展• 建议– 在有后代选择器
的规则内使用@extend 时，扩展的类不要处在其他的后代选择器内。
– 尽量少用
SassScript
• Interactive Shell ： sass –i
• 数据类型– 数字： 1, 2, 3, 10px
– 字符串：有或者无引号，” foo”, “bar”, baz
– 颜色： blue, #ff0000, rgba(255, 0, 0, 0.5)
– boolean ： true, false
– null
– 值列表：空格或逗号分隔， 10px 5px 10px 8px Helvetica, Arial, sans-serif
SassScript
• list– 1px 2px, 5px 6px– (1px 2px) (5px 6px) – nth function, join function, append function,
@each directive
• map– $map: (key1: value1, key2: value2, key3: value3);– map-get, map-merge, @each directive– 看作 list– 不可作为变量值及 css函数参数
SassScript
• 运算符– 数字运算• 数学运算
– + - * / % – 保留单位： 10px * 10px == 100px * px
• 关系运算： <, >, <=, >=, ==, !=• 除法与 /
@-Rules and Directives
• 支持所有 css3 @-rules• @media
• @debug• @warn• @error
Control Directives & Expressions
• 高级特性，多用于 Mixins• if()• @if • @else if• @for $i from 1 through 3• @each ... in...• @while
函数• @function
COMPASS
sprites
sprites
• 生成 sprites图片–@import ‘slice/*png’;• 将 slice 目录下的所有 png图片拼成一张 sprites• 根据目录生成 sprite ，需要多张就要建立多个目录
（不灵活啊！）
sprites
• 生成样式–@include all-<map>-sprites;–@include <map>-sprite($name);• <map> 为占位符，替换为图片所在文件夹的名称• 第一个为所有图片都生成样式• 第二个为指定图片生成样式• 默认不生成图片的宽高
sprites
• 配置– 设置 sprite 的间距
• $<map>-spacing: 4px;• $<map>-<sprite>-spacing: 10px;
– 设置 sprite 的重复性• $<map>-repeat: no-repeat/repeat-x;• $<map>-<sprite>-repeat: no-repeat/repeat-x;
– 设置 sprites 的布局方式• $<map>-layout: vertical / horizontal / diagonal /
smart
sprites
• sprite-map helper
sprites
URL helper
• 将样式表与环境隔离开，同一份样式表在本地环境和生产环境下资产的路径不同。– stylesheet-url($path, $only-path)
– font-url($path, $only-path, $cache-buster)
– image-url($path, $only-path, $cache-buster)
– generated-image-url($path, $cache-buster: false)
• 检查资源是否存在，避免 404 （警告）
• 清理缓存方式（修改compass 配置文件）– 时间戳– 版本号– 新文件名
生产环境编译• compass compile --force -e
production
• 源文件如何管理– 非手工编辑生成的文件不应该出现在源码控制
中？
SASS ARCHITECTURES
Bootstrap-sass
• 变量统一管理，变量值设置为 !default ，便于异化
• mixins集中管理– Utilities– Components– Skins– Layout
• 每一个 Component拆分为一个 partial
Zurb Foundation
• 变量定义分散在 partials 内，且变量值设置为 !default ，需要重置变量时统一在settings.scss修改
• 函数独立为一个 partial• 每一个 Component拆分为一个 partial
参考资料• http://sass-lang.com/documentation/
file.SASS_REFERENCE.html