css – SUSY2 – 教學範例 – mixin、function 介紹

2014-09-19 / JSN / 3 Comments / 776 人來過

這篇主要是方便以後編撰SUSY的時候可以查閱。介紹我在開發中常用的mixin與function，很少用到的方法就不在此列出囉！以下介紹內容可以配合官方網站，以寬螢幕 12 柵欄為Demo，至於 RWD的佈局，則參考前兩篇：基本、進階佈局

有即時預覽可以參考，但是只有一支SCSS檔，比較凌亂。

Play with this gist on SassMeister.

基本上建議在本機練習實作時，分割兩支檔案。

_base.scss 基本設定檔

@import "compass/css3";

@import "susy";

@import "breakpoint";

$susy: (

flow: ltr,

math: fluid,

output: float,

gutter-position: after,

container: auto,

container-position: center,

columns: 4,

gutters: 1/4,

column-width: 60px,

global-box-sizing: content-box,

last-flow: to,

debug: (

image: show,

color: rgba(#66f, .25),

output: background,

toggle: top right,

use-custom: (

background-options: false,

box-sizing: true,

clearfix: false,

rem: true,

)

);

//設定三種尺寸

$break_layout :

(

mobile:

(

break: 0px,

pad:

(

break: 640px,

desktop:

(

break: 1280px,

)

);

//方便撰寫的自訂 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 rand_bg()

{

background: rgba(random(255), random(255), random(255), 0.7);

}

style3.scss

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

284

285

286

@import "base";

//reset 不放在 base是因為reset 不是每個scss都需要用到，

//有些片段的 scss檔案會用到 _base.scss 見得要使用重設元素。

@import "compass/reset";

.container

{

@include _break("mobile")

{

@include container();

}

@include _break("pad")

{

@include container();

}

@include _break("desktop")

{

@include container();

}

.span

{

@include span(7 of 12);

@include rand_bg();

}

.span2

{

@include break;

width: span(4 of 12);

@include rand_bg();

}

.span3

{

@include break;

width: span(2 of 12 wide);

@include rand_bg();

}

.span4

{

@include break;

@include rand_bg();

width: span(2 of 12 wider);

}

.full

{

@include break;

@include rand_bg();

@include full;

}

.gutter

{

@include layout(12);

width: gutters();

@include break;

@include rand_bg();

}

.gutter2

{

@include layout(12);

@include break;

@include rand_bg();

@include gutter();

}

.gutter3

{

@include layout(12);

@include break;

@include rand_bg();

@include gutter(4);

}

.break_span

{

@include span(3 of 12);

@include rand_bg();

}

.break_span2

{

@include span(4 of 12);

@include rand_bg();

}

.break_break

{

@include span(4 of 12);

@include break;

@include rand_bg();

}

// last如同 SUSY ONE 的 omega, 可以把元素放到最右側(後面)。

// $susy 中 gutter-position: after 使用 last

// $susy 中 gutter-position: before 使用 fisrt

.last_span

{

//強制換行

@include break;

@include span(4 of 12);

@include rand_bg();

}

.last_span2

{

@include span(8 of 12);

@include last;

@include rand_bg();

}

.pre

{

@include rand_bg();

@include span(4 of 12);

@include pre(3 of 12);

}

.post

{

@include break;

@include rand_bg();

@include span(5 of 12);

@include post(4 of 12);

}

.pull

{

@include break;

@include rand_bg();

@include pull(2 of 12);

}

.squish

{

@include break;

@include rand_bg();

//squish()無法指定 layout 所以須配合 layout()

@include layout(12);

@include squish(2, 3);

}

.prefix

{

@include break;

@include rand_bg();

@include prefix(1 of 12);

}

.suffix

{

@include break;

@include rand_bg();

@include suffix(3 of 12);

}

.pad

{

@include break;

@include rand_bg();

//pad()無法指定 layout 所以須配合 layout()

@include layout(12);

@include pad(4, 2);

}

.bleed

{

@include rand_bg();

@include bleed(20px 10px 0px 50px);

@include span(3 of 12);

}

.bleed_x

{

@include rand_bg();

@include bleed-x(1em);

@include span(3 of 12);

}

.bleed_y

{

@include rand_bg();

@include bleed-y(5px);

@include span(3 of 12);

}

.isolate_function

{

@include rand_bg();

margin-left: isolate(2 of 12);

@include span(3 of 12);

}

.isolate_function2

{

@include rand_bg();

margin-left: isolate(2 of 12);

@include span(3 of 12);

}

.isolate_mixin

{

@include isolate(100px);

width: span(5 of 12);

@include rand_bg();

}

.isolate_mixin2

{

@include isolate(150px);

width: span(5 of 12);

@include rand_bg();

}

.isolate_keyword

{

@include rand_bg();

@include span(isolate 2 at 7);

}

.isolate_keyword2

{

@include rand_bg();

@include span(isolate 2 at 8);

}

.gallery_wrap

{

@include break;

@include span(12 of 12);

.gallery

{

@include break;

@include rand_bg();

@include gallery(4 of 12);

margin-bottom: 10px;

}

//--------------------------------------------------------

//DEMO 的環境樣式(無關SUSY的應用教學範例)

{

font-weight: bold;

padding-top: 30px;

padding-bottom: 10px;

color: #C7417D;

}

{

@extend h;

font-size: 52px;

}

{

@extend h;

font-size: 20px;

line-height: 1.4em;

font-family: "微軟正黑體";

}

.clear

{

@include break;

height: 100px;

}

//--------------------------------------------------------

index3.html

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

<!DOCTYPE html>

<head>

</head>

<body>

<h3>@include span($span) <br>佔柵欄數</h3>

<div class="span2">span2 span2 span2 span2 span2(當前方有float，我若不clear:both，基本上會有重疊)</div>

<h3>@include span(2 wide) <br>外部擴展單側gutter寬度</h3>

<div class="span3">使用了 wide 使用了擴展一側的gutter</div>

<h3>@include span(2 wider) <br>外部擴展兩側gutter寬度</h3>

<div class="span4">使用了 wider 擴展兩側 gutter</div>

<h3> @include full <br> 全部柵欄。一種 span(full) 的簡寫。</h3>

<div class="full">不論你的layout()多少，都橫跨所有柵欄</div>

<h3>gutter() <br>裡面不帶任何數字，<br>該function會使用當前的gutter寬度(柵欄之間的溝寬), <br>如果當前12柵欄，就返回12柵欄的1個gutter寬度</h3>

<div class="gutter">gutter</div>

<h3>@include gutter(); 或 @include gutter($span); <br> 依照map預設的 gutter-position: after, 若明確指定數字，就是返回指定layout的gutter寬度。<br>如 @include gutter(12); 代表返回12柵欄的1個gutter寬度</h3>

<div class="gutter2">@include gutter(); 12柵欄下的1gutter寬度</div>

<div class="gutter3">@include gutter(4); 硬是要在12柵欄下，使用4柵欄的1gutter寬度。通常這種方式會造成混亂，盡量不使用。</div>

<h3>@include break; <br> 可強制換行, 其實就是使用清除的CSS => clear:both</h3>

<div class="break_span">break_span(我右邊還有空間)</div>

<div class="break_span2">break_span2 break_span2 break_span2 break_span2 break_span2 (若有空間我會跑上來)</div>

<div class="break_break">break_break(不管，我就是要新的一行)</div>

<h3>@include last; <br> 指定為最後的元素。<br>如同susy one 的 omega，可以當mixin也可以是寫在span() 裡的keyword <br> 另有 @include first，但須另做設定，詳見官網</h3>

<div class="last_span2">last_span2(我是最後一個)</div>

<h1>Margin 系列</h1>

<h3>@include pre(3 of 12); <br> 像是 margin-left 的功能 </h3>

<div class="pre">margin_pre margin_pre margin_pre margin_pre margin_pre margin_pre </div>

<h3>@include post(4 of 12); <br> 像是 margin-right 的功能 </h3>

<div class="post">margin_post margin_post margin_post margin_post margin_post margin_post (檢視元素可以發現右側有佔柵欄)</div>

<h3>@include pull(2 of 12); <br> 往前拉的意思，所以有 2 + 12 行柵欄 </h3>

<div class="pull">margin_pull margin_pull margin_pull margin_pull margin_pull margin_pull margin_pull margin_pull margin_pull margin_pull margin_pull margin_pull margin_pull margin_pull margin_pull margin_pull margin_pull margin_pull </div>

<h3>@include squish(2, 3); <br> 兩側擠壓的意思，也就是同時使用 pre() 與 post() </h3>

<div class="squish">margin_squish margin_squish margin_squish margin_squish margin_squish margin_squish margin_squish margin_squish margin_squish margin_squish margin_squish margin_squish margin_squish margin_squish margin_squish </div>

<h1>Padding 系列</h1>

<h3>@include prefix(1 of 12); <br> 像是 padding-left 的功能 </h3>

<div class="prefix">padding_prefix padding_prefix padding_prefix padding_prefix padding_prefix padding_prefix padding_prefix padding_prefix padding_prefix padding_prefix padding_prefix padding_prefix padding_prefix padding_prefix </div>

<h3>@include suffix(3 of 12); <br> 像是 padding-right 的功能 </h3>

<div class="suffix">padding_suffix padding_suffix padding_suffix padding_suffix padding_suffix padding_suffix padding_suffix padding_suffix padding_suffix padding_suffix padding_suffix padding_suffix padding_suffix padding_suffix </div>

<h3>@include pad(4, 2); <br> 同時使用 prefix() 與 suffix() </h3>

<div class="pad">padding_pad padding_pad padding_pad padding_pad padding_pad padding_pad padding_pad padding_pad padding_pad padding_pad padding_pad padding_pad padding_pad padding_pad padding_pad padding_pad padding_pad padding_pad </div>

<h3>@include bleed(20px 10px 0px 50px); <br> 流血。像是傷口的血液往外擴散，超出傷口範圍。依序指定上右下左的超出範圍 </h3>

<div class="bleed">padding_bleed padding_bleed padding_bleed padding_bleed padding_bleed padding_bleed padding_bleed padding_bleed padding_bleed padding_bleed padding_bleed padding_bleed padding_bleed padding_bleed padding_bleed </div>

<h3>@include bleed-x(1em); <br> 水平的流血範圍。</h3>

<div class="bleed_x">padding_bleed_x padding_bleed_x padding_bleed_x padding_bleed_x padding_bleed_x padding_bleed_x </div>

<h3>@include bleed-y(1em); <br> 垂直的流血範圍。</h3>

<div class="bleed_y">padding_bleed_y padding_bleed_y padding_bleed_y padding_bleed_y padding_bleed_y </div>

<h3>margin-left: isolate(2 of 12);<br> 用在function會返回一個數值。距離左邊 12柵欄中第2欄位開始的位置。</h3>

<div class="isolate_function">isolate_function isolate_function isolate_function isolate_function isolate_function </div>

<div class="isolate_function2">isolate_function2 isolate_function2 isolate_function2 </div>

<h3>@include isolate(50%);<br> 從一個指定的位置中獨立出來。因為是獨立的，所以會重疊喔。</h3>

<div class="isolate_mixin">isolate_mixin isolate_mixin isolate_mixin isolate_mixin isolate_mixin isolate_mixin isolate_mixin isolate_mixin isolate_mixin isolate_mixin isolate_mixin isolate_mixin isolate_mixin isolate_mixin </div>

<div class="isolate_mixin2">isolate_mixin2 isolate_mixin2 isolate_mixin2 isolate_mixin2 </div>

<h3>@include span(isolate 2 at 7); <br> 從第7個柵欄開始，佔2柵欄。因為是獨立的，所以會重疊喔。</h3>

<div class="isolate_keyword">isolate_keyword isolate_keyword isolate_keyword isolate_keyword isolate_keyword </div>

<div class="isolate_keyword2">isolate_keyword2 isolate_keyword2 isolate_keyword2 isolate_keyword2 isolate_keyword2 isolate_keyword2 isolate_keyword2 isolate_keyword2 isolate_keyword2 isolate_keyword2 </div>

<h3>@include gallery(4 of 12);<br> 最重要的！<br>固定寬度時需要程式做 loop ，就是使用它。<br> 無須理會最右側或最左側是否添加 first 或 last 。<br> 如同 susy one 的 susy one isolate-grid() <br><br> 因為是使用 CSS 的 :nth-child 原理，<br>所以要 loop的元素最外層，務必添加一層元素做包圍。</h3>

<div class="gallery">gallery</div>

</div>

</body>

</html>

不同顯示裝置同樣有一個問題，就是我們希望在不同顯示裝置套用不同的動態效果，那要如何偵測當前是手機、平板、還是桌電呢，就請參考這篇。

css – SUSY2 – 教學範例 – mixin、function 介紹

有即時預覽可以參考，但是只有一支SCSS檔，比較凌亂。

基本上建議在本機練習實作時，分割兩支檔案。

_base.scss 基本設定檔

style3.scss

index3.html

相關文章

Comments

發表迴響取消回覆

css – SUSY2 – 教學範例 – mixin、function 介紹

有即時預覽可以參考，但是只有一支SCSS檔，比較凌亂。

基本上建議在本機練習實作時，分割兩支檔案。

_base.scss 基本設定檔

style3.scss

index3.html

分享，才能讓我知道對你有幫助：

相關文章

Comments

發表迴響 取消回覆

發表迴響取消回覆