Css var to scss var

CSS custom properties (CSS variables) with SCSS

While working on my personal SCSS boilerplate, Atomic Bulldog. I wanted to implement a strict set of variables using maps. The goal is to create a consistent design system and to be able to use CSS variables for easy theming.

The base structure of my variable folder:

_aspect-ratios.scss _box-shadow.scss _breakpoints.scss _colors.scss _container-sizes.scss _font-families.scss _font-sizes.scss _grid.scss _root-classes.scss _spacers.scss _z-index.scss

When looking on how to implement CSS variables in SASS, I found this great article, CSS4 Variables and Sass, from Jake Albaugh. It helped me to create this template for each variable file:

In settings.scss , we have a flag to enable the use of CSS variables globally.

In our variable file, I follow this template:

// ------------------------------ // Sass Variables // ------------------------------ $variable-prefix: --variable-; // CSS Variable prefix $variables: ( val1: 1, val2: 2, val3: 3 // etc. ); // ------------------------------ // Set variable function // ------------------------------ @function myVariable($variable, $true-val: false)  @if $use-css-var == true  @if $true-val == true  @return map-get($variables, $variable); //True Val > @else  @return var(#$variable-prefix>#$variable>); //CSS Var > > @else  @return map-get($variables, $variable); //Disabled CSS Var > > // If $use-css-var == true // myVariable(val1) => var(--variable-val1) // myVariable(val2, true) => 2 // If $use-css-var == false // myVariable(val3) => 3 // myVariable(val2, true) => 2 // ------------------------------ // Set root variables // ------------------------------ @if $use-css-var == true  :root  @each $name, $variable in $variables  #$variable-prefix>#$name>: $variable; > > > // Output if $use-css-var == true // :root // --variable-val1: 1; // --variable-val2: 2; // --variable-val3: 3; // /*etc.*/ // >

Example for spacer variables:

// ------------------------------ // Sass Variables // ------------------------------ $spacer-reference: 1rem; $spacer-prefix: --spacer-; $spacers: ( 0: 0, 1: ( $spacer-reference * 0.25 ), 2: ( $spacer-reference * 0.5 ), 3: $spacer-reference, 4: ( $spacer-reference * 1.25 ), 5: ( $spacer-reference * 1.5 ), 6: ( $spacer-reference * 3 ), 7: ( $spacer-reference * 6 ), 8: ( $spacer-reference * 9 ), 9: ( $spacer-reference * 12 ) ); // ------------------------------ // Set spacer function // ------------------------------ @function spacer($spacer, $true-val: false)  @if $use-css-var == true  @if $true-val == true  @return map-get($spacers, $spacer); //True Val > @else  @return var(#$spacer-prefix>#$spacer>); //CSS Var > > @else  @return map-get($spacers, $spacer); //Disabled CSS Var > > // ------------------------------ // Set root variables // ------------------------------ @if $use-css-var == true  :root  @each $name, $spacer in $spacers  #$spacer-prefix>#$name>: $spacer; > > >

// ------------------------------ // Sass Variables // ------------------------------ $color-prefix: --color-; $color-themes: ( primary: ( base: #4c5c8c, dark: darken(#4c5c8c, 15%), light: lighten(#4c5c8c, 15%), transparent: transparentize(#4c5c8c, 0.5), contrast: #ffffff ), secondary: ( base: #212529, dark: darken(#212529, 15%), light: lighten(#212529, 15%), transparent: transparentize(#212529, 0.5), contrast: #ffffff ), text: ( base: #212529, dark: darken(#212529, 15%), light: lighten(#212529, 15%), transparent: transparentize(#212529, 0.5), contrast: #ffffff ), link: ( base: #4b7e9e, dark: darken(#4b7e9e, 15%), light: lighten(#4b7e9e, 15%), transparent: transparentize(#4b7e9e, 0.5), contrast: #ffffff ), success: ( base: #4b9b50, dark: darken(#4b9b50, 15%), light: lighten(#4b9b50, 15%), transparent: transparentize(#4b9b50, 0.5), contrast: #ffffff ), danger: ( base: #c65556, dark: darken(#c65556, 15%), light: lighten(#c65556, 15%), transparent: transparentize(#c65556, 0.5), contrast: #ffffff ), warning: ( base: #d3b354, dark: darken(#d3b354, 15%), light: lighten(#d3b354, 15%), transparent: transparentize(#d3b354, 0.5), contrast: #ffffff ), light: ( base: #efe5cf, dark: darken(#efe5cf, 15%), light: lighten(#efe5cf, 15%), transparent: transparentize(#efe5cf, 0.5), contrast: #343a40 ), dark: ( base: #343a40, dark: darken(#343a40, 15%), light: lighten(#343a40, 15%), transparent: transparentize(#343a40, 0.5), contrast: #efe5cf ) ); // ------------------------------ // Set color function // ------------------------------ // retrieve color from map with Sass ie. `color(primary, base)` @function color($color-name, $color-variant: null, $true-val: false)  // if we enable css var @if $use-css-var == true  // we need to return the color value @if $true-val == true  // color variant is optional @if ($color-variant != null)  // map inception, need two deep @return map-get(map-get($color-themes, $color-name), $color-variant); > @else  // Default color @return map-get(map-get($color-themes, $color-name), base); > // if we're only returning the CSS4 variable > @else  // color variant is optional @if ($color-variant != null)  // map inception, need two names @return var(#$color-prefix>#$color-name>-#$color-variant>); > @else  // Default color, one name @return var(#$color-prefix>#$color-name>-base); > > > @else  // color variant is optional @if ($color-variant != null)  // map inception, need two deep @return map-get(map-get($color-themes, $color-name), $color-variant); > @else  // Default color @return map-get(map-get($color-themes, $color-name), base); > > > // ------------------------------ // Set root variables // ------------------------------ @if $use-css-var == true  :root  @each $name, $color in $color-themes  @if type-of($color) == "map"  @each $subname, $subcolor in $color  #$color-prefix>#$name>-#$subname>: $subcolor; > > @else if type-of($color) == "color"  #$color-prefix>#$name>: $color; > > > >

Источник

Saved searches

Use saved searches to filter your results more quickly

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.

CSS variables to SASS converter

License

xnyl/css-variables-to-sass

This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Sign In Required

Please sign in to use Codespaces.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching Xcode

If nothing happens, download Xcode and try again.

Launching Visual Studio Code

Your codespace will open once ready.

There was a problem preparing your codespace, please try again.

Latest commit

Git stats

Files

Failed to load latest commit information.

README.md

CSS Variables to SASS/SCSS

This plugin converts new var(—variableName) standard to ‘old’ SASS/SCSS style $variable. It will read your specified file and either overwrite it or output to a new file.

npm install css-variables-to-sass 

The package can be run from either a node script or directly in the command line. Both provide the ability to pass options to the package.

The convert function returns a promise.

var cssVarsToSass = require('css-variables-to-sass'); cssVarsToSass.convert(, ); 

Using the CLI you can specifiy the source and output files

css-variables-to-sass path/to/files.css -o path/to/output.scss 

css-variables-to-sass path/to/all/**/*.css 

Note: Currently globbing only allows you to overwrite existing files

Once you’ve cloned the Github repository, you will need to run npm install to install the required dependencies to build the package. There are basic tests in test/test.js which can be run to check that the code works as required.

Feel free to make it better ❤️

Источник