diff --git a/README.md b/README.md index 2412b8c..d02188c 100644 --- a/README.md +++ b/README.md @@ -10,7 +10,7 @@ smart people at [Hashrocket](http://hashrocket.com/). For a steady stream of TILs from a variety of rocketeers, checkout [til.hashrocket.com](https://til.hashrocket.com/). -_585 TILs and counting..._ +_586 TILs and counting..._ --- @@ -83,6 +83,7 @@ _585 TILs and counting..._ - [Dry Up SCSS With Mixins](css/dry-up-scss-with-mixins.md) - [Lighten And Darken With CSS Brightness Filter](css/lighten-and-darken-with-css-brightness-filter.md) - [Lighten And Darken With SCSS](css/lighten-and-darken-with-scss.md) +- [Parameterized SCSS Mixins](css/parameterized-scss-mixins.md) ### Devops diff --git a/css/parameterized-scss-mixins.md b/css/parameterized-scss-mixins.md new file mode 100644 index 0000000..bb1aec2 --- /dev/null +++ b/css/parameterized-scss-mixins.md @@ -0,0 +1,36 @@ +# Parameterized SCSS Mixins + +A mixin can be made to be much more versatile by parameterizing it. If you +need variations of a block of CSS, then move the parts that vary out into +parameters to the mixin. + +```css +@mixin navigation($background-color, $color, $link-color) { + nav { + display: flex; + justify-content: space-around; + background-color: $background-color; + color: $color; + + ul { + list-style: none; + + li a { + text-decoration: none; + color: $link-color; + } + } + } +} + +div.base-nav { + @include navgation(#fff, #444, #222); +} + +div.admin-nav { + @include navgation(#000, #fff, #ddd); +} +``` + +The mixin can now easily be used to customize different segments of your +app's styling.