-
Notifications
You must be signed in to change notification settings - Fork 0
/
file-array.html
70 lines (70 loc) · 6.72 KB
/
file-array.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="description" content="">
<meta name="keywords" content="">
<!-- mobile use-->
<meta name="viewport" content="initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, width=device-width">
<!-- mobile use end-->
<meta name="apple-mobile-web-app-capable" content="yes">
<title>檔案結構</title>
<link href="http://gss-fed.github.io/GCSS/css/basic.css" rel="stylesheet">
</head>
<body class="gcss">
<!-- ap-wrap-->
<div class="ap-wrap">
<!-- ap-nav-->
<nav class="ap-nav">
<div class="info-box"><a href="http://gss-fed.github.io/GCSS" class="info-link">
<h2 class="logo">GCSS</h2></a></div>
<ul class="nav">
<li class="nav-item"><a href="http://gss-fed.github.io/GCSS" class="nav-link">概觀</a></li>
<li class="nav-item"><a href="http://gss-fed.github.io/GCSS/style-guide.html" class="nav-link">Style guide</a></li>
<li class="nav-item"><a href="http://gss-fed.github.io/GCSS/file-array.html" class="nav-link is-active">檔案結構</a></li>
<li class="nav-item has-child"><a href="http://gss-fed.github.io/GCSS/base-group.html" class="nav-link">Base 組成</a>
<ul class="sub-nav">
<li class="nav-item"><a href="http://gss-fed.github.io/GCSS/base-group/reset.html" class="nav-link">reset</a></li>
<li class="nav-item"><a href="http://gss-fed.github.io/GCSS/base-group/variables.html" class="nav-link">variables</a></li>
<li class="nav-item"><a href="http://gss-fed.github.io/GCSS/base-group/mixin.html" class="nav-link">mixin</a></li>
<li class="nav-item"><a href="http://gss-fed.github.io/GCSS/base-group/tools.html" class="nav-link">tools</a></li>
<li class="nav-item"><a href="http://gss-fed.github.io/GCSS/base-group/base.html" class="nav-link">base</a></li>
</ul>
</li>
</ul>
</nav>
<!-- ap-nav end-->
<!-- ap-header-->
<header class="ap-header">
<div class="header-box removeTextNodes"><a class="nav-ctrl"><span class="icon-brug"></span></a>
<h1 class="fn-title">檔案結構</h1>
</div>
</header>
<!-- ap-header end-->
<!-- ap-main-->
<main class="ap-main">
<div class="fn-body">
<article class="article-box">
<h3 class="arti-title">SCSS 檔案結構</h3>
<p>basic.scss 是我們每個頁面的最為基本的 SCSS 檔案，每個頁面都必須讀入。但是可以在依照不同的情境頁面或者功能頁面在增加讀入不同的 SCSS 檔案。</p>
<pre class="code-box"><code><span class="t">basic.scss - import 基本的 SCSS。</span><span class="t">_reset.css - browser reset 用 CSS。</span><span class="t">_variable.scss - 設置變數。</span><span class="t">_mixin.scss - 放置 mixin 的，不會被 compile css 的部分。</span><span class="t">_tools.scss - 設定通用的元件。</span><span class="t">_base.scss - 放置產品／專案通用設定。</span><span class="t">_ap-layout.scss - 放大 layout 部分，天、地、基本 RWD。</span><span class="t"> </span><span class="t">module/ 用來放置表單，表格，按鈕...等，一些通用模組元件。</span><span class="t"> ├ _fields.scss</span><span class="t"> ├ _btn.scss</span><span class="t"> ├ _tool-tips.scss</span><span class="t"> ├ _table.scss</span><span class="t"> ├ _grid.scss</span><span class="t"> ├ _nav.scss</span><span class="t"> └ ...</span><span class="t"> </span><span class="t">pages/ 給需要特定的排版頁面使用。</span><span class="t"> ├ article.scss </span><span class="t"> ├ home.scss</span><span class="t"> ├ login.scss</span><span class="t"> └ ...</span></code></pre>
<h3 class="arti-title">basic import</h3>
<p>在 basic.scss 的檔案 import 順序。</p>
<pre class="code-box"><code><span class="c">// *************************************</span><span class="c">//</span><span class="c">// product name</span><span class="c">// -> product 說明</span><span class="c">//</span><span class="c">// *************************************</span><span class="c"> </span><span class="c">// -------------------------------------</span><span class="c">// Framework</span><span class="c">// -------------------------------------</span><span class="t"> </span><span class="nt">@import “compass”;</span><span class="t"> </span><span class="c">// -------------------------------------</span><span class="c">// base</span><span class="c">// -------------------------------------</span><span class="t"> </span><span class="nt">@import “reset”;</span><span class="nt">@import “variables”;</span><span class="nt">@import “mixin”;</span><span class="nt">@import “base”;</span><span class="t"> </span><span class="c">// -------------------------------------</span><span class="c">// layout</span><span class="c">// -------------------------------------</span><span class="t"> </span><span class="nt">@import “ap-layout”;</span><span class="t"> </span><span class="c">// -------------------------------------</span><span class="c">// module</span><span class="c">// -------------------------------------</span><span class="t"> </span><span class="nt">@import “grid”;</span><span class="nt">@import “fields”;</span><span class="nt">@import “btn”;</span><span class="nt">@import “tool-tips”;</span><span class="nt">@import “table”;</span><span class="nt">@import “nav”;</span><span class="nt">…</span><span class="t"> </span><span class="c">// -------------------------------------</span><span class="c">// Inbox</span><span class="c">// -------------------------------------</span></code></pre>
<h3 class="arti-title">Inbox</h3>
<p>與其他開發人員合作有時候會有點困難，這邊可以新增其他臨時的 CSS 樣式，可以使維護人員適當的新增以及覆寫樣式。</p>
</article>
<div class="page-box group">
<div class="page-l"><a href="http://gss-fed.github.io/GCSS/style-guide.html" class="p-link"> <span>上一頁</span><span class="p-tip">style guide</span></a></div>
<div class="page-r"><a href="http://gss-fed.github.io/GCSS/base-group.html" class="p-link"><span>下一頁</span><span class="p-tip">Base 組成</span></a></div>
</div>
</div>
</main>
<!-- ap-main end-->
</div>
<!-- ap-wrap end-->
<script src="http://gss-fed.github.io/GCSS/js/jquery-1.11.1.min.js"></script>
<script src="http://gss-fed.github.io/GCSS/js/action.js"></script>
</body>
</html>