RWD 一小時就上手

F8ca23da626499de4b476d7ccaf2950b?s=47 evenwu
August 03, 2013

RWD 一小時就上手

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

F8ca23da626499de4b476d7ccaf2950b?s=128

evenwu

August 03, 2013
Tweet

Transcript

  1. 13.
  2. 14.
  3. 15.
  4. 16.
  5. 19.
  6. 20.
  7. 21.
  8. 32.

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

                    $column-­‐width      :  60px;                         $gutter-­‐width      :  20px;   $grid-­‐padding      :  10px; $grid&padding $total&columns $column&width $gutter&width
  9. 35.
  10. 37.

    × Հឧᘍͥ 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);  } × ೹٬⯘ᄥᘍͥয়᝖
  11. 38.
  12. 41.

    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. മᴣ
  13. 42.

    NFEJBMBZPVUʯৡമᴣ $media-­‐layout:  12; //  使⽤用  12  欄布局  (susy  ⾃自⼰己去計算  min-­‐width)

    $media-­‐layout:  30em; //  設定  min-­‐width  30em $media-­‐layout:  30em  12; //  設定  min-­‐width  30em,  並使⽤用  12  欄
  14. 44.

    ⯔ם⯔⾵٩̨Ɵ⾵ʪᕿ .page  {    @include  at-­‐breakpoint(30em  12)  {  @include  container;

     } } @include  at-­‐breakpoint(30em  12)  {    .page  {  @include  container;  } }
  15. 45.

    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 ୘࿟ፕ༩⏳ḕێٽ㡠
  16. 46.

    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 ୘࿟ፕ༩⏳ḕێٽ㡠
  17. 47.

    ৡ⊤ၵ $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;    } } ʱʫ㏡ḑ⯃᝖㡧 ٨⇄ש㡧
  18. 48.
  19. 50.
  20. 51.

    ⽢ፕ㐈Ѹܚ .attendee  {    @include  isolate-­‐grid(1);    @include  at-­‐breakpoint($desktop)  {

           @include  isolate-­‐grid(2);    } } ဈᖧᬡ ͬϪᘐͥḕHBMMFSZMJTU ᐸ㍻ᬡ ͬϪᘐͥḕHBMMFSZMJTU
  21. 52.
  22. 54.

    ࿤ХʪϪⳔ۰ᬟ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; }
  23. 55.
  24. 57.

    5 ) " / , 4    8

    & - $ 0 . & GCDPNHSPVQTTVTZUFNQMF TVTZἤ₳௄