css – SUSY2 教學範例 – 基本

即時顯示,只有一支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/style.css">
</head>
<body>
	<div class="container">
		
		<div class="a1">
			<div class="text">a1</div>
		</div>

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

 SUSY 的參數設定檔 _grids.scss

@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: false, //固定柵欄的寬度,若指定如60px,可以固定總體寬度
  	global-box-sizing: border-box, 
  	last-flow: to,
  	debug: (
  	  	image: show, //開發時使用show可看到柵欄,使用hide關閉柵欄顯示
  	  	color: rgba(#66f, .25),
  	  	output: background,
  	  	toggle: top right,
  	),
  	use-custom: (
  	  	background-image: true,
  	  	background-options: false,
  	  	box-sizing: true,
  	  	clearfix: false,
  	  	rem: true,
  	)
);

 style.scss

// 
// [mobile first] 的關係所以我們要以手機優先的思維來做設計
// 


@import "compass/reset"; 	//重設所有html元素
@import "compass/css3"; 	//如果你有許多CSS3的mixin要用,記得添加這行
@import "breakpoint"; 		//用SUSY無非就是要響應式設計,所以要添加。SUSY的 breakpoint(斷點) 是基於 breakpoint 這個套喔

@import "grids"; 			//引用susy全域的參數設定


//我習慣讓他 100%,內層元素才能擴展整個畫面的高度
html, body 
{
	height: 100%;
}


//
// 最外層的 container 因為需要使用 @include container(); 
// 所以我們必須使用 susy-breakpoint 一併做柵欄的設定
// 
// 而container內的元素
// 因為不需要再指定柵欄數量,所以只需要使用 @include breakpoint()
// 
.container 
{

	
	// 手機:0px以上, 
	// 通常這層可以不需要用 susy-breakpoint 包圍,
	// 但我喜歡明確指定,所以包圍起來。
	// 好處在於,程式碼一多便可一目瞭然這是給手機的樣式。
	// 
	// susy-breakpoint(0px, 4) 代表0px為斷點的開始,0px以上使用4行柵欄
	@include susy-breakpoint(0px, 4)
	{
		@include container(); //渲染,若$susy map 有開啟背景柵欄顯示,才能看到柵欄
		height: 100%; //擴展高度,方便檢視柵欄數量
	}

	// 平板:640以上
	@include susy-breakpoint(640px, 8)
	{
		@include container(); //重新渲染柵欄,可以覆蓋手機柵欄
	}

	// 桌電:1280以上
	@include susy-breakpoint(1280px, 12)
	{
		@include container(); //重新渲染柵欄,可以覆蓋平板柵欄
	}



	.a1 
	{
		// 一樣給手機的樣式仍用0px包圍起來。
		// 因為接下來內層有.text 若不包圍,容易視覺凌亂。
		// 手機時...
		@include breakpoint(0px)
		{
			background: red;
		}
		// 平板以上 (因為沒指定下一個斷點,所以會包含桌電比例) 都套用 green
		@include breakpoint(640px)
		{
			background: green;
		}

		.text 
		{
			//只在平板以上才會套用喔!
			@include breakpoint(640px)
			{
				font-size: 48px;
			}
		}
	}




}

這些都是基本的範例,但有些地方是不是覺得重複寫了呢?還有因為功能很細,所以有點凌亂。那我們以此範本再做修改:參考這篇文章

Comments

發表迴響