Mastering Sass by Luke Watts

Author:Luke Watts [Watts, Luke]
Language: eng
Format: azw3, pdf
Publisher: Packt Publishing
Published: 2016-08-26T04:00:00+00:00

Deeply nested variable scope

So our bg-color() function was a completely academic example. You're never going to create a function whose purpose is to simply apply the value of a variable. So let's look at something a bit more practical. What if all of our squares had a number shown, but we weren't sure what the colors were going to be? This leads to a possible problem...what if the square is black? Well, the color of the number would need to be white. The same as if the square was white the text would need to be black. We then want a mixin to apply the background-color and color properties for us.

First things first, let's add the numbers to our squares in HTML:

<div class="square1">1</div> <div class="square2">2</div> <div class="square3">3</div> <div class="square4">4</div> <div class="square5">5</div>

Next we'll create global $bg-color variable in hsl (to allow us control of the lightness) at the top of our file like before. We'll set this color to a dark red. We'll also define a placeholder extend called %square which will position and set up each element we apply it to:

$bg-color: hsl(0, 100%, 25%); %square { width: 100px; height: 100px; line-height: 100px; float: left; text-align: center; }

With that done, we'll create a mixin called colors. It has no parameters and inside it sets our background-color property to our global $bg-color variable and the color is simply inherited from its parent:

@mixin colors() { background-color: $bg-color; color: inherit; }

Now we need to check the lightness of the $bg-color variable and set our color property value accordingly. To do this we can use the lightness function available in Sass. This takes a color as a parameter and returns the lightness in a percentage value. So if we checked the lightness of white it would be 100% and black would return 0%. Let's create a function called set-color():

@function set-color() { @if lightness($bg-color) > 50% { @return black; } @else { @return white; } }

So, when the lightness of our color is higher than 50%, our text color is set to black and everything else would be dark so our text color would be white.

Now apply this to our color property in our colors mixin:

@mixin colors() { background-color: $bg-color; color: set-color(); }

Now add the mixin to square2, square4, and square5 to replace where we had background-color: $bg-color:

.square2 { @extend %square; @include colors; } ... .square4 { @extend %square; @include colors; } .square5 { @extend %square; @include colors; }

Now we should have this:

Download

Copyright Disclaimer:
This site does not store any files on its server. We only index and link to content provided by other sites. Please contact the content providers to delete copyright contents if any and email us, we'll remove relevant links or contents immediately.