SASS 让你更爽的 编写CSS
Upcoming SlideShare
Loading in...5
×
 

SASS 让你更爽的 编写CSS

on

  • 1,459 views

SASS 让你更爽的 编写CSS

SASS 让你更爽的 编写CSS

Statistics

Views

Total Views
1,459
Views on SlideShare
1,188
Embed Views
271

Actions

Likes
2
Downloads
5
Comments
0

4 Embeds 271

http://qiqicartoon.com 239
http://labs.cross.hk 15
http://lab.cross.hk 9
http://cross.hk 8

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

SASS 让你更爽的 编写CSS SASS 让你更爽的 编写CSS Presentation Transcript

  • 颂赞http://qiqicartoon.com
  • What is SASS? SASS 是一个 CSS3 扩展,为 CSS 扩展了嵌套规则、变量、混入、继承、函数等强大的功能。SASS 的使命是让 CSS 更有趣味 http://sass-lang.com/• CSS 超集• CSS3 扩展• 使 CSS 更有趣• SCSS and SASS• Hampton Catlin、Nathan Weizenbaum、Chris Eppstein
  • Features1、Fully CSS3-compatible2、Language extensions such as variables, nesting, and mixins3、Many useful functions for manipulating colors and other values4、Advanced features like control directives for libraries5、Well-formatted, customizable output6、Firebug integration View slide
  • Welcome to the SASS world  View slide
  • 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
  • SASSScriptOperation s-Color
  • @importSASS CSS• @import “common.scss/sass”; • @import “common.css”;• @import “common”; • @import “common” screen; • @import http://alipay.com/common.css; • @import url();
  • @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  @知托付-颂赞