Download to read offline
Uploaded byJace Lee
Sass与compass学习笔记
本文介绍了Sass的基础知识及其高级特性，包括变量、混入、嵌套、导入、选择器继承等。强调了可维护性和可复用性，提供了多种代码组织和编写最佳实践。文档还讨论了如何在实际项目中高效使用Sass，以及相关的编译和管理策略。
Sass与compass学习笔记
- 1.
- 2.
- 3.
- 4. 为什么要用预编译器？ • 动态创建静态样式表 • 更高效地书写高可维护性的css •不能帮助你写更好的样式 • 预编译器：Sass / Less / Stylus • 后编译器：postCSS / CSSNext
- 5. Sass • 介绍 • 安装 •编辑器 • 调试 – source map – work space – 中文注释问题：.scss文件设置 @charset “utf-8”(是双引号)
- 6.
- 7.
- 8.
- 9. CSS规则嵌套 • 小心嵌套层级，勿滥用，否则难以维护 • 父选择器引用-& 伪类 父选择器之前 添加选择器 可配合BEM ×
- 10.
- 11.
- 12.
- 13. CSS规则嵌套 • 建议： – 伪类、伪元素 &:hover/ &::before – 控制当前选择器状态： &.is-active （复合选择器，&只能放在前面） – 另一种状态下，对当前元素的样式异化 .no-csstransforms & – 另一个容器中，对当前元素的样式化 .other-wrap &
- 14. 导入Sass文件 可省略后缀 .scss CSS @import 执行到下载 Sass@import 编译时导入 @import url(‘a.css’) @import ‘a’ 文件顶部 任意位置
- 15. 导入Sass文件 • Sass partials（分表） –仅为导入而生，无需生成单独的css文件 – 以下划线开头，引用时可以省略下划线 • themes/_night-sky.scss • @import “themes/night-sky” – Cssgaga类似功能：a.import.css /*命名规则*/
- 16.
- 17. 导入Sass文件 • 默认变量值 -!default _b.scss 覆盖导入 的默认值
- 18. 导入Sass文件 • 无法根据变量动态导入Sass文件 • 导入css文件 –文件扩展名为.css – 文件名为URL – css导入语法：url()
- 19.
- 20.
- 21. Mixins • 适用于大段表象样式的复用 • 定义：@mixinmixin-name{...} • 引用：@include mixin-name • 本质是代码复制，避免滥用
- 22. Mixins • 何时使用Mixins? – 构成一个逻辑单元 –经验法则 • 能否用一个简短的好名字描述这组CSS规则？ • 语义的（css类名）vs. 表象的（Mixin名） • align-center / screen-only / ...
- 23.
- 24.
- 25.
- 26.
- 27. 选择器继承/扩展 • 仅重复选择器，用于减少 重复，精简代码 • 遵循cascade规则 •OOCSS：一个选择器继 承另一个选择器的所有样 式 • 语法：@extend • 占位选择器：%selector Nicole Sullivan
- 28.
- 29. 选择器继承/扩展 • 继承的高级用法 – 所有css规则均可使用@extend，但并非所有 css规则都可被扩展（be@extended） – 继承一个HTML元素 – 扩展一个复杂选择器 – !optional 当扩展类不存在时，可不报错 ×
- 30. 选择器继承/扩展 • @extend-Only +placeholder Selectors – 选择器仅用来被扩展，不直接作用于html – 占位选择器（%foo，class、id皆可），不会生 成到css内，减少冗余，避免冲突
- 31. 选择器继承/扩展 • 何时使用继承？ – 继承自另一个类名（seriousError Error） – 类名更加特例化 – 与Mixin相比，样式精简 – 与选择器组相比，可以分散在样式表的各处
- 32.
- 33. 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
- 34. SassScript • list – 1px2px, 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函数参数
- 35. SassScript • 运算符 – 数字运算 •数学运算 – + - * / % – 保留单位：10px * 10px == 100px * px • 关系运算：<, >, <=, >=, ==, != • 除法与/
- 36. @-Rules and Directives •支持所有css3 @-rules • @media • @debug • @warn • @error
- 37. Control Directives &Expressions • 高级特性，多用于Mixins • if() • @if • @else if • @for $i from 1 through 3 • @each ... in... • @while
- 38.
- 39.
- 41.
- 42. sprites • 生成sprites图片 – @import‘slice/*png’; • 将slice目录下的所有png图片拼成一张sprites • 根据目录生成sprite，需要多张就要建立多个目录 （不灵活啊！）
- 43. sprites • 生成样式 – @includeall-<map>-sprites; – @include <map>-sprite($name); • <map>为占位符，替换为图片所在文件夹的名称 • 第一个为所有图片都生成样式 • 第二个为指定图片生成样式 • 默认不生成图片的宽高
- 44. 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
- 45.
- 46.
- 47. 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配置文件） – 时间戳 – 版本号 – 新文件名
- 49. 生产环境编译 • compass compile--force -e production • 源文件如何管理 – 非手工编辑生成的文件不应该出现在源码控制 中？
- 50.
- 51.
- 52. • 变量统一管理，变量值设置为!default，便 于异化 • mixins集中管理 –Utilities – Components – Skins – Layout • 每一个Component拆分为一个partial
- 53.
- 54. • 变量定义分散在partials内，且变量值设置 为!default，需要重置变量时统一在 settings.scss修改 • 函数独立为一个partial •每一个Component拆分为一个partial
- 55.