css – SUSY2 – 快速開發模板
我們每建立一次SUSY專案，勢必要回想一下版面配置的參數設定之類的。這幾段程式碼可以方便開發時直接貼上，在依個人需求做 SCSS 檔案的分割即可囉。
即時範例
Play with this gist on SassMeister.
style4.scss
@import "susy";
@import "breakpoint";
@import "compass/css3";
//-------- 設定 開始 -----------
//susy 環境設定
$susy: (
flow: ltr,
math: fluid,
output: float,
gutter-position: after,
container: auto,
container-position: center,
columns: 4,
gutters: 1/4,
column-width: false,
global-box-sizing: content-box,
last-flow: to,
debug: (
image: show,
color: rgba(#66f, .25),
output: background,
toggle: top right,
),
use-custom: (
background-image: true,
background-options: false,
box-sizing: true,
clearfix: false,
rem: true,
)
);
//設定三種尺寸
$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;
}
}
//-------- Mixin 結束 ----------
//-------- 樣式設計 開始 --------
@import "compass/reset";
*
{
@include box-sizing(border-box);
}
html, body
{
height: 100%;
}
.container
{
@include _break("mobile")
{
@include container();
height: 100%;
}
@include _break("pad")
{
@include container();
}
@include _break("desktop")
{
@include container();
}
}
index4.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>快速開發模板</title> <link rel="stylesheet" href="css/stylesheets/style4.css"> </head> <body> <div class="container"> SUSY - Hello World ! </div> </body> </html>
Comments