Created by: schwastek
Concerns function theme-color-level()
in _functions.scss
file.
Use internal Sass function abs()
to get the absolute value of $level
argument.
That way, if/else
statement can be completely eliminated.
Screenshot
Both - old and new functions - return the same values.
Test
Check out this pull request locally or reproduce it from scratch:
- Run:
git clone https://github.com/twbs/bootstrap.git
cd bootstrap
# remove all files but `scss` and `.git` folders
find -not \( \( -path ./.git -o -path ./scss \) -prune \) -exec rm -rf {} +
touch ./scss/_debug.scss
printf "@import 'functions';\n@import 'variables';\n@import 'debug';" > ./scss/bootstrap.scss
npm init --yes
npm install nodemon node-sass --save-dev
- Overwrite
scripts
section inpackage.json
with:
"scripts": {
"css-compile": "node-sass ./scss/bootstrap.scss ./dist/css",
"watch-css": "nodemon --ext scss --watch ./scss --exec \"npm run css-compile\""
}
- Add at the end of
_functions.scss
:
// _functions.scss
(...)
@function new-theme-color-level($color-name: "primary", $level: 0) {
$color: theme-color($color-name);
$color-base: if($level > 0, #000, #fff);
$level: abs($level);
@return mix($color-base, $color, $level * $theme-color-interval);
}
- Paste into
_debug.scss
:
@debug theme-color-level("primary", -1);
@debug theme-color-level("primary", 0);
@debug theme-color-level("primary", 1);
@debug new-theme-color-level("primary", -1);
@debug new-theme-color-level("primary", 0);
@debug new-theme-color-level("primary", 1);
- Run:
npm run css-compile