Created
October 28, 2020 17:48
-
-
Save benabraham/26438148b96e8b3298fbaf2741fe1b6a to your computer and use it in GitHub Desktop.
Customizing Bootstrap
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // init variables globally | |
| // The !global flag (we use later) may only be used to set a variable | |
| // that has already been declared at the top level of a file. | |
| // It may not be used to declare a new variable. | |
| $w: null; | |
| $h: null; | |
| $p: null; | |
| $z: null; | |
| // create a new scope to work in | |
| // we use a placeholder selector as we don’t need a real one | |
| // https://sass-lang.com/documentation/style-rules/placeholder-selectors | |
| %whatever-string-here { | |
| // load default variables (normally this is @import) | |
| $w: 10px !default; | |
| $h: 10px !default; | |
| $p: $w + $h !default; | |
| $z: 0; | |
| // end of default variables | |
| // set new values freely using current values | |
| $w: $w + 1000px; | |
| $w: $w !global; // and don't forget to export each to global space immediatelly | |
| // These are actually two different variables with the same name: | |
| // one local and one global. | |
| // and even the new custom values | |
| $h: $h + $w; | |
| $h: $h !global; // and don't forget to export each to global space immediatelly | |
| } | |
| // load default variables (normally this is @import) | |
| $w: 5px !default; | |
| $h: 10px !default; | |
| $p: $w + $h !default; | |
| $z: 0; | |
| // end of default variables | |
| // actual Sass generating CSS here | |
| .result { | |
| width: $w; | |
| height: $h; | |
| padding: $p; | |
| z-index: $z; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .result { | |
| width: 1010px; | |
| height: 1020px; | |
| padding: 2030px; | |
| z-index: 0; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "sass": { | |
| "compiler": "dart-sass/1.26.11", | |
| "extensions": {}, | |
| "syntax": "SCSS", | |
| "outputStyle": "expanded" | |
| }, | |
| "autoprefixer": false | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment