sass.md

慕课网 大漠 http://www.imooc.com/learn/311
sass 在线编写: http://sassmeister.com/

安装: 安装ruby环境, 然后 gem install sass, 详情: http://www.w3cplus.com/sassguide/install.html

sass: 靠缩进约定格式
scss: 和css一致

sass --watch --scss --sourcemap sass/xxx.scss:css/xxx.css# 混合宏@mixin box-shadow($shadow...) {  @if length($shadow) >= 1 {    @include prefixer(box-shadow, $shadow);  } @else{    $shadow:0 0 4px rgba(0,0,0,.3);    @include prefixer(box-shadow, $shadow);  }}# 继承@extend .btn # 得到的代码是选择器合并到一起# 占位符%mt5 {margin-top: 5px; } # 只有使用 @extend 调用才会出现在编译好的css文件中#{$var} # 插值

浏览器的 sourcemap 功能

嵌套: 选择器嵌套(避免使用); 属性嵌套(如font, border); 伪类嵌套(使用&字符)

混合宏, 继承, 占位符: 后者类似, 前者可用于使用不同变量的场景, 但是会产生代码冗余的问题

注释: css风格的注释会保留在生成的css文件中, js风格的注释不会

运算

• 不能将不同单位的数字机型运算
• 乘法: 只需要一个数带单位
• 除法: 纯css的写法无法识别, 需要 变量/包含其他运算/函数/括号 才能识别
• 字符串: 可以直接相加, 引号以第一个字符串为准

Sass和Compass必备技能之Sass篇

慕课网 Materliu http://www.imooc.com/learn/364
rvm: http://www.rvm.io/

安装

sass需要ruby环境, 我在window上面使用一键安装工具, 运行无障碍
在腾讯云(Ubuntu)上面apt-get 安装 ruby 后无法安装 compass, 后来删除了使用 rvm

@import

css原生@import指令的缺点: 必须放在代码前面; 按照顺序导入, 增加的http请求的阻塞, 对性能不利

sass对@import进行了重写(多做了一些事), 但是在下面4种情况还是使用原生的@import功能:
.css文件; 链接(http/url()); madia 之类的

语法

a{    &:hover{}; // &用来指代父元素, 不这样写, 相当于 a *:hover, 而不是 a:hover}

@import 导入 @mixin
@extend 继承现有标签的样式
@at-root 明确样式输出在底层
@media 响应式布局

4种输出样式, 在 config.rb -> output_style

Sass和Compass必备技能之Sass篇

慕课网 materliu http://www.imooc.com/learn/371
作者给出的wiki: http://www.imooc.com/wiki/view?pid=172
compass官网: http://compass-style.org/

使用 compressed 进行输出时, 会去掉注释, 但是引用了别人的东西时, 最后还是带上对方的注释, 在注释开头加上!即可

修改 config.rb 时需要重启 compass watch

compass 核心模块

reset, layout: 需要单独引入
css3, helpers, typography, utilities: 使用 @import "compass" 就可以导入
browser: 不同浏览器适配模块(也可以称为support 模块)

normalize 模块

使用 normalize 替代 compass/reset 模块
安装: gem install compass-normalize
normalize核心模块: base(html, body), html5(新增的html5元素), links(a), typography(p, 段落文本), embeds(img, svg), groups, forms(form相关), table
引入子模块: @import "normalize-version", "normalize/base"

css3模块 support模块

查看compass支持的浏览器内核: @debug browsers()
进入compass的命令行模式: compass interactive, 这里就可以直接使用 compass自带的函数了

typography模块 link模块

// compass/typography/linksa{    @include hover-link();    @include link-colors(#00c, #0cc, #c0c, #ccc, #cc0);    @include unstyled-link();}// compass/typography/lists.list-unstyled{@include no-bullets(); }.list-unstyled-li{@include no-bullet(); }.list-inline{@include inline-list(); }.list-horizontal{@include horizontal-list(); }// compass/typography/text.text-force-wrap{@include force-wrap(); }.text-nowrap{@include nowrap(); } .text-ellipsis{@include ellipsis(); // 需要考虑兼容低版本 ff 浏览器 }.text-hide{    @include hide-text();    @include squish-text(); // font-size: 0; 透明}.btn-find{@include replace-text('url'); }// compass/typography/vertical_rhythm

help模块(基本都是函数): 引入图片; font, font-face
utilities(基本都是mixin): print; table; general; sprites

之前项目中遇到过 sprites, 后来看教程才知道这个东西的名字, 教程给的方法是使用一个工具, 不过现在看compass的教程, 才感觉到真正的简单.