Skip to content

Commit fd09d7a

Browse files
author
宋慧武
committed
✨add common scss snippets
1 parent 3177547 commit fd09d7a

6 files changed

+367
-37
lines changed

‎common-snippets.md

+166-9
Original file line numberDiff line numberDiff line change
@@ -61,23 +61,180 @@ element {
6161
}
6262
```
6363

64-
### Transform centering
64+
# SCSS snippets
6565

66-
```css
67-
element.center {
68-
position: absolute;
69-
top: 50%;
70-
left: 50%;
71-
transform: translate(-50%, -50%);
66+
```scss
67+
@mixin block($b) {
68+
$self: #{$namespace}-#{$b} !global;
69+
.#{$self} {
70+
@content;
71+
}
72+
}
73+
74+
@mixin b($block) {
75+
@include block($block) {
76+
@content;
77+
}
78+
}
79+
80+
@mixin e($element, $parent: 'root') {
81+
@if $parent == 'root' {
82+
&__#{$element} {
83+
@content;
84+
}
85+
} @else {
86+
& #{$parent}__#{$element} {
87+
@content;
88+
}
89+
}
90+
}
91+
92+
@mixin m($modifier, $parent: 'root') {
93+
@if $parent == 'root' {
94+
&--#{$modifier} {
95+
@content;
96+
}
97+
} @else {
98+
& #{$parent}--#{$modifier} {
99+
@content;
100+
}
101+
}
102+
}
103+
104+
@mixin icon($w, $h, $bg, $type: 'png') {
105+
width: #{$w}px;
106+
height: #{$h}px;
107+
background: none no-repeat center / 100%;
108+
@if $type == 'svg' {
109+
background-image: url('#{$bg}.svg');
110+
} @else {
111+
background-image: url('#{$bg}.png');
112+
@media (min-resolution: 2dppx) {
113+
background-image: url('#{$bg}@2x.png');
114+
}
115+
@media (min-resolution: 3dppx) {
116+
background-image: url('#{$bg}@3x.png');
117+
}
118+
}
72119
}
73-
element.justify-center {
120+
121+
@mixin one-pix-line($pos: 'bottom', $style: solid, $color) {
122+
$prop: border-#{$pos};
123+
@if $pos == 'all' {
124+
$prop: border;
125+
}
126+
#{$prop}: 1px $style $color;
127+
@media (min-resolution: 2dppx) {
128+
#{$prop}: .5px $style $color;
129+
}
130+
@media (min-resolution: 3dppx) {
131+
#{$prop}: .333333px $style $color;
132+
}
133+
@media (min-resolution: 4dppx) {
134+
#{$prop}: .25px $style $color;
135+
}
136+
}
137+
138+
@mixin text-ellipsis($width: 100%) {
139+
width: $width;
140+
overflow: hidden;
141+
white-space: nowrap;
142+
word-wrap: normal;
143+
text-overflow: ellipsis;
144+
}
145+
146+
@mixin text-wrap() {
147+
white-space: pre-wrap;
148+
word-wrap: break-word;
149+
}
150+
151+
@mixin center--x() {
74152
position: absolute;
75153
left: 50%;
76154
transform: translateX(-50%);
155+
@content;
77156
}
78-
element.align-center {
157+
158+
@mixin center--y() {
79159
position: absolute;
80160
top: 50%;
81161
transform: translateY(-50%);
162+
@content;
163+
}
164+
165+
@mixin position--t--r($p: absolute, $t: 0, $r: 0) {
166+
position: $p;
167+
top: $t;
168+
right: $r;
169+
@content;
170+
}
171+
172+
@mixin position--t--b($p: absolute, $t: 0, $b: 0) {
173+
position: $p;
174+
top: $t;
175+
bottom: $b;
176+
@content;
177+
}
178+
179+
@mixin position--t--l($p: absolute, $t: 0, $l: 0) {
180+
position: $p;
181+
top: $t;
182+
left: $l;
183+
@content;
184+
}
185+
186+
@mixin position--b--r($p: absolute, $b: 0, $r: 0) {
187+
position: $p;
188+
right: $r;
189+
bottom: $b;
190+
@content;
191+
}
192+
193+
@mixin position--b--l($p: absolute, $b: 0, $l: 0) {
194+
position: $p;
195+
bottom: $b;
196+
left: $l;
197+
@content;
198+
}
199+
200+
@mixin position--r--l($p: absolute, $r: 0, $l: 0) {
201+
position: $p;
202+
right: $r;
203+
left: $l;
204+
@content;
205+
}
206+
207+
@mixin position--overlay($p: absolute) {
208+
position: $p;
209+
top: 0;
210+
right: 0;
211+
bottom: 0;
212+
left: 0;
213+
}
214+
215+
@mixin flex-box {
216+
display: flex;
217+
& > * {
218+
flex: 0 0 auto;
219+
}
220+
}
221+
222+
@mixin h-box {
223+
@include flex-box;
224+
flex-direction: row;
225+
@content;
226+
}
227+
228+
@mixin v-box {
229+
@include flex-box;
230+
flex-direction: column;
231+
@content;
232+
}
233+
234+
@mixin box-center {
235+
@include flex-box;
236+
align-items: center;
237+
justify-content: center;
238+
@content;
82239
}
83240
```

‎index.html

+1
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@
2727
<script src="./libs/ga.js"></script>
2828
<script src="./libs/emoji.js"></script>
2929
<script src="./libs/prism-markdown.min.js"></script>
30+
<script src="./libs/prism-scss.min.js"></script>
3031
<script src="./libs/docsify-pagination.min.js"></script>
3132
<script>
3233
// navigator.serviceWorker && navigator.serviceWorker.register('sw.js');

‎interesting-usage.md

+16-9
Original file line numberDiff line numberDiff line change
@@ -11,15 +11,6 @@ NES red and white style CSS framework, the main implementation principle is thro
1111

1212
?> **GitHub:** [BcRikko/NES.css](https://github.com/BcRikko/NES.css)
1313

14-
### Epic Spinners
15-
16-
CSS animation loading
17-
18-
<!-- [EpicSpinners](https://epic-spinners.epicmax.co/#/ ':include :type=iframe width=100% height=429px') -->
19-
<iframe src="https://epic-spinners.epicmax.co" width="100%" height="429px"></iframe>
20-
21-
?> **GitHub:** [epicmaxco/epic-spinners](https://github.com/epicmaxco/epic-spinners)
22-
2314
### Shapes generated
2415

2516
Shapes implemented with CSS gradients
@@ -29,6 +20,22 @@ Shapes implemented with CSS gradients
2920

3021
?> **GitHub:** [yuanchuan/gradient-shapes](https://github.com/yuanchuan/gradient-shapes)
3122

23+
### CSS Grid Generator
24+
25+
Generate basic CSS Grid code to make dynamic layouts!
26+
27+
[CSS Grid Generator](https://cssgrid-generator.netlify.com/ ':include :type=iframe width=100% height=429px')
28+
29+
?> **GitHub:** [sdras/cssgridgenerator](https://github.com/sdras/cssgridgenerator)
30+
31+
### Epic Spinners
32+
33+
CSS animation loading
34+
35+
[Epic Spinners](https://epic-spinners.epicmax.co/#/ ':include :type=iframe width=100% height=429px')
36+
37+
?> **GitHub:** [epicmaxco/epic-spinners](https://github.com/epicmaxco/epic-spinners)
38+
3239
### CSS file icons
3340

3441
File icon implementated by pure CSS

‎libs/prism-scss.min.js

+1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)