Modular & Maintainable CSS with Sass and Compass


 

洧 杰



I am a 
Front-end





去年我專注於

  • Responsive web Design(RWD)
  • Compass/Sass


 

Responsive web design


 

.menu{width: 33%;}


@media only screen and (max-width: 768px){


.menu{ width : 50%;}


}


@media only screen and (max-width: 480px) {


.menu{ width : 100%;}


}

 

..more 20~30% CSS code

    http://www.steveperrycreative.com/getting-started-with-sass-and-compass/




Sass


 

all.sass→編譯→all.css




減輕複製貼上負擔

Nesting
 

Sass

CSS

CSS

.header   h1
    ..    a      ..  .menu     ..    a      ..

.header {}.header h1{}
.header h1 a{}
.header .menu{}
.header .menu a{}

 

Scss

CSS

CSS

.header{ color:red; h1{
    ....      a{        ..        }   }}

.header {}.header h1{}
.header h1 a{}


SASS

.header  h1
    ..    a      ..  .menu     ..    a      ..




控制你的全域CSS設定

Variables




方便切割CSS檔案

@import




建構自己的CSS內隱知識庫

@Mixins



合併樣式超方便

OOCSS = easy

@extend
 

 設計於Sass上的Framework





一行解決CSS3 prefix

CSS3 Mixin




自動計算圖片寬高

image-width、image-height




輕鬆合併圖片

CSS Sprite

還有很多強大的功能





Sass Framework

Susy


Responsive grids for Compass.

http://susy.oddbird.net/

bourbon


A simple and lightweight mixin 
library for Sass.

http://bourbon.io/

CSS3 Animate


Animate Mixin for Compass/SASS
http://thecssguru.freeiz.com/animate/




END



高雄前端社群


讓南部的網頁設計師
有一個交流的場所與管道
 

 

Thank you

Made with Slides.com