CSS – SCSS – SUSY2 – 配合 map, 自訂 breakpoint 斷點的 mixin

2014-10-28 / JSN / 0 Comments / 242 次瀏覽

可以用 map 設定你需要的屏幕

    //設定三種尺寸
    $break_layout : 
    (
        mobile: 
        (
            break:  0px,
            layout: 4
        ), 
        pad: 
        (
            break:  640px,
            layout: 8
        ), 
        desktop: 
        (
            break:  1280px,
            layout: 12
        )

    );

接著套上 mixin

    //方便撰寫的自訂 mixin 斷點樣式
    @mixin _break($screen: mobile)
    {
        $map  :  map-get($break_layout, $screen);
        $break:  map-get($map, "break");
        $layout: map-get($map, "layout");

        @include susy-breakpoint($break, $layout)
        {
            @content;
        }
    }

然後在 SCSS 裡面就可以這麼寫了

    .container 
    {
        @include _break("mobile")
        {
            @include container();
            height: 100%;
        }    
        @include _break("pad")
        {
            @include container();
        }    
        @include _break("desktop")
        {
            @include container();
        }    
    }