Upgrade to Pro — share decks privately, control downloads, hide ads and more …

RWD 一小時就上手

evenwu
August 03, 2013

RWD 一小時就上手

介紹一套 compass framework: SUSY 快速的在一小時內建構你的 responsive web design.

evenwu

August 03, 2013
Tweet

More Decks by evenwu

Other Decks in Technology

Transcript

  1. ࡷ⨲โဎ㏴⭺HSJE⭺஄ $total-­‐columns    :  4;          

                    $column-­‐width      :  60px;                         $gutter-­‐width      :  20px;   $grid-­‐padding      :  10px; $grid&padding $total&columns $column&width $gutter&width
  2. × Հឧᘍͥ 4QBO$PMVNOTՁឫᘐͥ .main  {  @include  span-­‐columns(9,  12);  } .sidebar

     {  @include  span-­‐columns(3  omega,  12);  } .main  {  @include  span-­‐columns(9  omega,  12);  } .sidebar  {  @include  span-­‐columns(3,  12);  } × ೹٬⯘ᄥᘍͥয়᝖
  3. NFEJBMBZPVUஷ㋯ʰፕ⼓㞬৛₋⽖ᇍ㡠 $media-­‐layout:  12;              

         //  Use  12-­‐col  layout  at  matching  min-­‐width. $media-­‐layout:  30em;                //  At  min  30em,  use  closest  fitting  layout. $media-­‐layout:  30em  12;          //  At  min  30em,  use  12-­‐col  layout. $media-­‐layout:  12  60em;          //  Use  12  cols  up  to  max  60em. $media-­‐layout:  30em  60em;      //  Between  min  30em  &  max  60em,  use  closest  layout. $media-­‐layout:  30em  12  60em;//  Use  12  cols  between  min  30em  &  max  60em. $media-­‐layout:  60em  12  30em;//  Same.  Larger  length  will  always  be  max-­‐width. $media-­‐layout  :  12  lt-­‐ie9;    //  Output  is  included  under  `.lt-­‐ie9`  class,                                                        //  for  use  with  IE  conditional  comments                                                        //  on  the  <html>  tag. മᴣ
  4. NFEJBMBZPVUʯৡമᴣ $media-­‐layout:  12; //  使⽤用  12  欄布局  (susy  ⾃自⼰己去計算  min-­‐width)

    $media-­‐layout:  30em; //  設定  min-­‐width  30em $media-­‐layout:  30em  12; //  設定  min-­‐width  30em,  並使⽤用  12  欄
  5. ⯔ם⯔⾵٩̨Ɵ⾵ʪᕿ .page  {    @include  at-­‐breakpoint(30em  12)  {  @include  container;

     } } @include  at-­‐breakpoint(30em  12)  {    .page  {  @include  container;  } }
  6. TVTZ TBTTӻ⼣ת $pad:  768px  8; $desktop:  1000px  12; .page  {

     @include  container;  } @include  at-­‐breakpoint($pad)  {    .page  {  @include  set-­‐container-­‐width;  } } @include  at-­‐breakpoint($desktop)  {    .page  {  @include  set-­‐container-­‐width;  } } Ӕ္NFEJBMBZPVU ୘࿟ፕ༩⏳ḕێٽ㡠
  7. TVTZ TBTTӻ⼣ת $pad:  768px  8; $desktop:  1000px  12; .page  {

       @include  container;    @include  at-­‐breakpoint($pad)  {        @include  set-­‐container-­‐width;    }    @include  at-­‐breakpoint($desktop)  {        @include  set-­‐container-­‐width;    } } Ӕ္NFEJBMBZPVU ୘࿟ፕ༩⏳ḕێٽ㡠
  8. ৡ⊤ၵ $pad:  768px  8; $desktop:  1000px  12; .page  {  

     @include  container(  $total-­‐columns,  $pad,  $desktop  ); } $pad:  768px  8; $desktop:  1000px  12; .page  {    @include  container;    @include  at-­‐breakpoint($pad)  {        @include  set-­‐container-­‐width;    }    @include  at-­‐breakpoint($desktop)  {        @include  set-­‐container-­‐width;    } } ʱʫ㏡ḑ⯃᝖㡧 ٨⇄ש㡧
  9. ⽢ፕ㐈Ѹܚ .attendee  {    @include  isolate-­‐grid(1);    @include  at-­‐breakpoint($desktop)  {

           @include  isolate-­‐grid(2);    } } ဈᖧᬡ ͬϪᘐͥḕHBMMFSZMJTU ᐸ㍻ᬡ ͬϪᘐͥḕHBMMFSZMJTU
  10. ࿤ХʪϪⳔ۰ᬟDTTGSBNFXPSL @for  $width  from  1  through  3  {    @for

     $height  from  1  through  3  {        .block-­‐#{$width}-­‐#{$height}  {            @include  span-­‐columns($width);            padding-­‐top:  columns($height);        }    } } .block  {    margin-­‐bottom:  gutter($context);    @include  nth-­‐omega; }
  11. 5 ) " / , 4    8

    & - $ 0 . & GCDPNHSPVQTTVTZUFNQMF TVTZἤ₳௄