File tree 2 files changed +38
-1
lines changed
2 files changed +38
-1
lines changed Original file line number Diff line number Diff line change @@ -10,7 +10,7 @@ smart people at [Hashrocket](http://hashrocket.com/).
10
10
For a steady stream of TILs from a variety of rocketeers, checkout
11
11
[ til.hashrocket.com] ( https://til.hashrocket.com/ ) .
12
12
13
- _ 585 TILs and counting..._
13
+ _ 586 TILs and counting..._
14
14
15
15
---
16
16
@@ -83,6 +83,7 @@ _585 TILs and counting..._
83
83
- [ Dry Up SCSS With Mixins] ( css/dry-up-scss-with-mixins.md )
84
84
- [ Lighten And Darken With CSS Brightness Filter] ( css/lighten-and-darken-with-css-brightness-filter.md )
85
85
- [ Lighten And Darken With SCSS] ( css/lighten-and-darken-with-scss.md )
86
+ - [ Parameterized SCSS Mixins] ( css/parameterized-scss-mixins.md )
86
87
87
88
### Devops
88
89
Original file line number Diff line number Diff line change
1
+ # Parameterized SCSS Mixins
2
+
3
+ A mixin can be made to be much more versatile by parameterizing it. If you
4
+ need variations of a block of CSS, then move the parts that vary out into
5
+ parameters to the mixin.
6
+
7
+ ``` css
8
+ @mixin navigation($background-color, $color, $link-color) {
9
+ nav {
10
+ display : flex ;
11
+ justify-content : space-around ;
12
+ background-color : $background-color;
13
+ color : $color ;
14
+
15
+ ul {
16
+ list-style : none ;
17
+
18
+ li a {
19
+ text-decoration : none ;
20
+ color : $link-color;
21
+ }
22
+ }
23
+ }
24
+ }
25
+
26
+ div .base-nav {
27
+ @include navgation (#fff , #444, #222);
28
+ }
29
+
30
+ div .admin-nav {
31
+ @include navgation (#000, #fff , #ddd );
32
+ }
33
+ ```
34
+
35
+ The mixin can now easily be used to customize different segments of your
36
+ app's styling.
You can’t perform that action at this time.
0 commit comments