css – SUSY2 – 教學範例 – 進階佈局

2014-09-18 / JSN / 6 Comments / 1,463 次瀏覽

這篇繼承上一篇文章

主要示範整理後的SUSY布局，說明都打在裡面囉！

把後面多個SCSS合併為一個後的即時預覽

Play with this gist on SassMeister.

以下為原始範例。

index.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>SUSY2</title>
	<link rel="stylesheet" href="css/stylesheets/style2.css">
</head>
<body>
	<div class="container">
		
		<div class="a1">
			<div class="text"> a1 </div>
		</div>

	</div>
</body>
</html>

 _grids2.scss

// Requirements
// ============

@import "susy";


//使用 map setting
$susy: (
  	flow: ltr,
  	math: fluid,
  	output: float,
  	gutter-position: after,
  	container: auto,
  	container-position: center,
  	columns: 4,
  	gutters: .25,
  	column-width: 60px, //這裡使用固定柵欄寬度，預設是 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
    )
);

 _custom_mixin.scss

//方便撰寫的自訂 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;
    }
}

 style2.scss

@import "compass/reset";
@import "compass/css3";
@import "breakpoint";  

@import "grids2";
@import "custom_mixin"; //自訂的mixin放在這裡


*
{
	//CSS3的功能，建議所有元素都使用吧！
	@include box-sizing(border-box);
}
	
html, body 
{
	height: 100%;
}

.container 
{
	//使用我們前面自訂的 mixin
	//當在手機時
	//我們使用 container() 重新渲染
	//並設定高度 100%
	@include _break("mobile")
	{
		@include container();
		height: 100%;
	}

	//當發生在平板時
	@include _break("pad")
	{
		@include container();
	}

	//桌電時...
	@include _break("desktop")
	{
		@include container();
	}

	

	.a1 
	{
		@include _break("mobile")
		{
			background: #D22D2D;
			@include span(1 of 4);

			//因為使用了 @include box-sizing(border-box) 所以不會超出邊界
			border: black 10px solid; 

		}
		@include _break("pad")
		{
			background: #29C94E;
			@include span(1 of 8);
		}
		@include _break("desktop")
		{
			background: #9864D2;
			
			// 因為 desktop 我們使用12柵欄，
			// 若 1 of 12 會是一柵欄，
			// 那如果 1 of 16呢？
			// 背景顯示12欄，但會切成16等分喔
			@include span(1 of 16); 
		}


		//"只有"在平板才作用
		.text 
		{
			@include _break("pad")
			{
				font-size: 40px;
			}

			@include _break("desktop")
			{
				font-size: initial;
			}
		}

	}
	



}

最後，需要開始了解各種mixin了，所以請繼續閱讀這篇文章。

如果要用 jQuery 判別當前使用的是哪種顯示裝置，可以參考這篇。

對於 $susy 地圖的設定有不了解的，可以參考這篇。

Comments

  1. 麵包
    2015-08-11 - 17:20

    版大您好，有些問題想請教您
    您的斷點的設定如何制定 @media screen and (min-width:) and (max-width: ) 和 @media (max-width: ) 的範圍 ，謝謝

    • jsn
      2015-08-19 - 10:44

      建議直接忘掉 @media screen and (min-width:) and (max-width: ) 這種難懂的設計唷！
      改採 SUSY 的原理會自動幫你轉換成 CSS。以我這邊建議範例來說的話

      @include _break(“mobile”)
      {
      //0~639px 之間
      }

      //當發生在平板時
      @include _break(“pad”)
      {
      //640~1279px
      }

      //桌電時…
      @include _break(“desktop”)
      {
      //1280~無限
      }

      這樣你的CSS設計是不是清晰許多了呢？哪個裝置的CSS要放在哪，是不是很好懂？

      基本上我這裡不討論CSS 的 @media ，如果需要了解使用原理可以搜尋其他網友的介紹唷！

      但是誠心建議，了解 @media 即可。不建議直接實作，之前經驗是 CSS 肯定會非常凌亂喔

  2. 麵包
    2015-08-19 - 13:57

    謝謝版大的解說~~

發表迴響