Sass compass
Upcoming SlideShare
Loading in...5
×
 

Sass compass

on

  • 1,275 views

 

Statistics

Views

Total Views
1,275
Views on SlideShare
1,275
Embed Views
0

Actions

Likes
0
Downloads
7
Comments
0

0 Embeds 0

No embeds

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 compass Sass compass Presentation Transcript

  • Sass & Compass
    —— 洪珊珊 2011.04.20
  • 拥抱HTML5中的分享者
    薛良斌
    (布丁大哥)
    hlb@twitter.com
    Iamhlb.com
    分享视频:http://v.ku6.com/special/show_4135580/0xiGfezZqb9Gl7TU.html
  • Sass
    http://sass-lang.com/
    View slide
  • Sass可以做什么?
    更好的管理与维护CSS
    更快乐的写CSS
    View slide
  • Sass 与 CSS的关系(语法)
    sass
    css
  • Sass的语法
    .sass
    table.hl
    margin: 2em 0
    td.ln
    text-align: right
    li
    font:
    family: serif
    weight: bold
    size: 1.2em
    .scss
    table.hl {
    margin: 2em 0;
    td.ln {
    text-align: right;
    }
    }
    li {
    font: {
    family: serif;
    weight: bold;
    size: 1.2em;
    }
    }
  • Sass的语法
    Nesting (巢状)
    Variables(变量)
    Parent References (父级相关)
    Operations and Functions (运算和函数)
    Interpolation(插补)
    Mixins (混合)
    Arguments (参数)
    Import (引入)
    … …
  • Compass 是什么?
    基于sass的框架
    管理框架的框架(框架的框架)
    可以动态引入已经预定义好的CSS样式
    http://compass-style.org/
  • 思考
    我们是否可以构建一个属于自己的,类似compass的CSS框架,使得更好的维护我们的CSS
  • 谢谢!