Explain findColorInvert

This commit is contained in:
Jeremy Thomas
2017-05-05 13:04:16 +01:00
parent 1a76a23115
commit 9997d47d86
8 changed files with 228 additions and 6 deletions

View File

@@ -50,14 +50,16 @@ npm install bulma
// 2. Set your own initial variables
// Update blue
$blue: #72d0eb
// Add pink
// Add pink and its invert
$pink: #ffb3b3
$pink-invert: #fff
// Add a serif family
$family-serif: "Merriweather", "Georgia", serif
// 3. Set the derived variables
// Use the new pink as the primary color
$primary: $pink
$primary-invert: $pink-invert
// Use the existing orange as the danger color
$danger: $orange
// Use the new serif family
@@ -79,7 +81,7 @@ $family-primary: $family-serif
See the <strong>result</strong>: before and after
</p>
<p class="subtitle is-6">
Notice how the <code>$blue-invert</code> is now black instead of white, based on <code>findColorInvert(#72d0eb)</code></p>
As <code>$blue</code> has been updated, and since <code>$blue-invert</code> is automatically calculated with the <strong>function</strong> <code>$blue-invert: findColorInvert($blue)</code>, the <code>$blue-invert</code> is now black instead of white</p>
</p>
<figure>
<img width="640" height="640" src="{{site.url}}/images/customize-before.png" alt="Customizing Bulma with Sass">