Sass 7-1 Pattern

 1sass/
 2|
 3|– abstracts/
 4|   |– _variables.scss   # Sass Variables
 5|   |– _functions.scss   # Sass Functions
 6|   |– _mixins.scss      # Sass Mixins
 7|   |– _helpers.scss     # Class & placeholders helpers
 8|
 9|– base/
10|   |– _animations.scss
11|   |– _base.scss
12|   |– _typograhy.scss
13|   |– _utilities.scss 
14|   ...                  # Etc…
15|
16|– components/
17|   |– _buttons.scss     # Buttons
18|   |– _carousel.scss    # Carousel
19|   |– _cover.scss       # Cover
20|   |– _dropdown.scss    # Dropdown
21|   ...                  # Etc…
22|
23|– layout/
24|   |– _navigation.scss  # Navigation
25|   |– _grid.scss        # Grid system
26|   |– _header.scss      # Header
27|   |– _footer.scss      # Footer
28|   |– _sidebar.scss     # Sidebar
29|   |– _forms.scss       # Forms
30|   ...                  # Etc…
31|
32|– pages/
33|   |– _home.scss        # Home specific styles
34|   |– _contact.scss     # Contact specific styles
35|   ...                  # Etc…
36|
37|– themes/
38|   |– _theme.scss       # Default theme
39|   |– _admin.scss       # Admin theme
40|   ...                  # Etc…
41|
42|– vendors/
43|   |– _bootstrap.scss   # Bootstrap
44|   |– _jquery-ui.scss   # jQuery UI
45|   ...                  # Etc…
46|
47`– main.scss             # Main Sass file

1$color-grey: #e3e3e3;

 1// 清除浮动元素
 2@mixin clearfix {
 3  &::after {
 4    content: '';
 5    display: table;
 6    clear: both;
 7  }
 8}
 9
10// Electron App，不可选中
11@mixin no-selection {
12  user-select: none;
13}
14
15// Electron App，禁止拖拽
16@mixin no-drag {
17  -webkit-user-drag: none;
18}
19
20// 将黑色 SVG 图片内容转换为白色
21@mixin filter-white {
22  filter: invert(100%);
23}
24
25// 绝对定位下的垂直居中
26@mixin absoluteCenter {
27  position: absolute;
28  left: 0;
29  right: 0;
30  margin: auto;
31  z-index: 1;
32}

1// 隐藏元素
2.hidden {
3  display: none !important;
4}

 1@use '../abstracts/mixins' as *;
 2
 3*,
 4*::after,
 5*::before {
 6  margin: 0;
 7  padding: 0;
 8  box-sizing: inherit;
 9}
10
11html {
12  font-size: 10px / 16px * 100%; // 定义 1rem = 10px
13}
14
15body {
16  font: caption; // Electron App，使用系统字体
17  font-size: 1.6rem;
18  box-sizing: border-box;
19}
20
21img {
22  @include no-drag; // Electron App，防止图标可被拖拽
23}

 1@use '../abstracts/variables' as *;
 2@use '../abstracts/mixins' as *;
 3
 4// 可在内容区中自定义长度的竖线
 5.vertical_bar {
 6  float: right;
 7  border-right: .1rem solid $color-grey;
 8  height: 100%;
 9}
10
11// 可在内容区中自定义长度的横线
12// 父级容器 `position: relative`
13.horizontal_bar {
14  position: absolute;
15  bottom: 0;
16  border-bottom: .1rem solid $color-grey;
17  width: 100%;
18  z-index: 0;
19}
20
21// 带箭头的提示框
22.tooltip {
23  position: relative;
24
25  .tip {
26    @include absoluteCenter;
27
28    display: none;
29    width: 12.5rem;
30    padding: .5rem;
31    background: black;
32    color: white;
33
34    &:before {
35      content: '';
36      display: block;
37      width: 0;
38      height: 0;
39      border-left: .8rem solid transparent;
40      border-right: .8rem solid transparent;
41      border-bottom: .8rem solid black;
42      transform: translateY(-1.5rem);
43
44      @include absoluteCenter;
45      top: 1rem;
46    }
47  }
48
49  &:hover .tip {
50    display: block;
51  }
52}

1@use './abstracts/helpers';
2
3@use './base/base';
4
5@use 'components/widgets';