sass 让你更爽的 编写css
DESCRIPTION
SASS 让你更爽的 编写CSSTRANSCRIPT
What is SASS?
SASS 是一个 CSS3 扩展,为 CSS 扩展了嵌套规则、变量、混入、继承、函数等强大的功能。 SASS 的使命是让 CSS 更有趣味
• CSS 超集• CSS3 扩展• 使 CSS 更有趣• SCSS and SASS• Hampton Catlin、 Nathan Weizenbaum、 Chris Eppstein
http://sass-lang.com/
Features
1 、 Fully CSS3-compatible
2 、 Language extensions such as variables, nesting, and mixins
3 、 Many useful functions for manipulating colors and other values
4 、 Advanced features like control directives for libraries
5 、 Well-formatted, customizable output
6 、 Firebug integration
Welcome to the SASS world
Install SASS
$ gem install sass
Variables从 $ 开始 $variables name : vaiables value;
SCSS SASS
Compile
Compile
NestedSCSS SASS CSS
MixinsSCSS SASS CSS
Selector InheritanceSCSS SASS CSS
Reference Parent 使用 & 语法糖引用父层
Comments双斜线注释将被忽略
SASSScript Data Types
SASSScript Operations
SASSScript Operations
SASSScript Operation
s-Color
@import
SASS CSS
• @import “common.css”;• @import “common” screen;• @import http://alipay.com/common.css;• @import url();
• @import “common.scss/sass”;• @import “common”;
@media
Control Directives• @if• @while• @for• @each
@function
回过头来再看 SASS
• 大型样式表• 制定样式规范• 团队开发
优点 缺点
适用于
• 学习成本低• 降低样式表维护成本• 适用于多人开发• 性能优越
OMG ,我无缺点
SASS VS LESS
• 实现原理不同• 创建变量的方式不同• 预编绎机制不同• 作用域表现不同• mixin 方式不同• SASS 比 LESS 的数学运算能力更强• LESS 没有 SASS 的 Control Directive
Hi,Let’s writing SASS
@知托付-颂赞