大涛子客栈

CSS 预处理器的特点之一是可以把你的代码分割成很多个文件,而且不会影响性能。

构建样式结构体系

Sass 的@import命令,可以让我们把样式内容根据内容属性进行分类,分割成多个文件,如同使用 ES6 模块导入一样,非常有利于我们根据样式所属类别进行模块开发。如下所示就是一个完整的树形视图:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
styles
├── layout
│ └── _layout.scss
├── mixins
│ └── _mixins.scss
├── site
│ ├── _footer.scss
│ ├── _header.scss
│ ├── _homepage.scss
│ ├── _site.scss
│ ├── _tpl.scss
│ ├── _user-agent.scss
│ └── _user-login.scss
├── styles.scss
└── variables
├── _colors.scss
├── _fonts.scss
├── _layouts.scss
└── _variables.scss

在根目录底下只有一个styles.scss文件,其他.scss文件都根据不同的分类放在对应的文件夹中。

我们把局部内容文件通过下划线来表示,如_layouts.scss,只有通过@import引入才会被编译成.css文件。

文件内容创建

入口

styles/styles.scss,从上到下,注意引入前后的顺序:

1
2
3
4
5
6
7
8
9
/* Base */
@import 'variables/variables';
@import 'mixins/mixins';

/* Layout */
@import 'layout/layout';

/* Content */
@import 'site/site';

Variables

入口 variables/_variables

1
2
3
@import 'colors';
@import 'fonts';
@import 'layouts';

比如 variables/_colors.scss

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// Theme
$color__theme: #12bb37;
$color__theme-hover: #2cce51;

$color__white: #fff;

// Text
$color__text-white: #fff;
$color__text-main: #1a1a1a;
$color__text-sub: #4a4d52;
$color__text-third: #5d6063;
$color__text-light: #91969d;
$color__text-hover: $color__theme;
$color__text-input-focus: $color__theme;

// Links
$color__link: $color__theme;
$color__link-visited: $color__theme;

// Borders
// ...

Mixins

mixins/_mixins.scss:

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
@mixin flex(
$direction: row,
$justify: center,
$align: center,
$flex-wrap: wrap
) {
display: -webkit-flex;
display: flex;
flex-direction: $direction;
justify-content: $justify;
align-items: $align;
flex-wrap: $flex-wrap;
}

/* Center block */
@mixin center-block {
display: block;
margin-left: auto;
margin-right: auto;
}

/* Clearfix */
@mixin clearfix() {
content: '';
display: table;
table-layout: fixed;
}

// Clear after (not all clearfix need this also)
@mixin clearfix-after() {
clear: both;
}

@mixin ellipse() {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}

@mixin selection {
::-moz-selection {
@content;
}
::selection {
@content;
}
}

Layout

layout/_layout.scss:

1
2
3
4
5
6
7
8
html,
body {
padding: 0;
margin: 0;
color: $color__text-main;
font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', tahoma,
'hiragino sans GB', arial, 'Microsoft YaHei', sans-serif;
}

Content

site/_site.scss:

1
2
3
4
5
6
@import 'header';
@import 'footer';
@import 'user-login';
@import 'user-agent';
@import 'homepage';
@import 'tpl';

当然,还可以根据页面内容更进一步细分,如:

1
2
3
4
@import 'common/header';
@import 'primary/homepage';
@import 'primary/tpl';
@import 'common/footer';

树形视图:

1
2
3
4
5
6
7
8
├── site
│ ├── _site.scss
│ ├── common
│ │ ├── _footer.scss
│ │ └── _header.scss
│ └── primary
│ └── _homepage.scss
│ └── _tpl_.scss

比较完整的目录结构

1
2
3
4
5
6
7
8
9
├── sass
│ ├── base
│ ├── components
│ ├── helpers
│ ├── layout
│ ├── main.scss
│ ├── pages
│ ├── themes
│ └── vendors

参考链接

 评论