Skip to content

Commit 6b2e7be

Browse files
committed
Add Parameterized SCSS Mixins as a css til
1 parent 542657d commit 6b2e7be

File tree

2 files changed

+38
-1
lines changed

2 files changed

+38
-1
lines changed

README.md

+2-1
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ smart people at [Hashrocket](http://hashrocket.com/).
1010
For a steady stream of TILs from a variety of rocketeers, checkout
1111
[til.hashrocket.com](https://til.hashrocket.com/).
1212

13-
_585 TILs and counting..._
13+
_586 TILs and counting..._
1414

1515
---
1616

@@ -83,6 +83,7 @@ _585 TILs and counting..._
8383
- [Dry Up SCSS With Mixins](css/dry-up-scss-with-mixins.md)
8484
- [Lighten And Darken With CSS Brightness Filter](css/lighten-and-darken-with-css-brightness-filter.md)
8585
- [Lighten And Darken With SCSS](css/lighten-and-darken-with-scss.md)
86+
- [Parameterized SCSS Mixins](css/parameterized-scss-mixins.md)
8687

8788
### Devops
8889

css/parameterized-scss-mixins.md

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
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.

0 commit comments

Comments
 (0)