Sass与compass学习笔记
-
Upload
lee-jace -
Category
Technology
-
view
52 -
download
16
Transcript of Sass与compass学习笔记
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