0.1.1 • Published 5 years ago

@earshinov/extract-scss-variables v0.1.1

Weekly downloads
34
License
MIT
Repository
github
Last release
5 years ago

= @earshinov/extract-scss-variables :nofooter:

image:https://travis-ci.org/earshinov/extract-scss-variables.svg[Build Status, link=https://travis-ci.org/earshinov/extract-scss-variables] image:https://api.codacy.com/project/badge/Coverage/6a8ecf0a9f5d4f3e8d7c7740285408db[Codacy Badge, link=https://www.codacy.com/app/earshinov/extract-scss-variables?utm_source=github.com&utm_medium=referral&utm_content=earshinov/extract-scss-variables&utm_campaign=Badge_Coverage] image:https://api.codacy.com/project/badge/Grade/6a8ecf0a9f5d4f3e8d7c7740285408db[Codacy Badge, link=https://www.codacy.com/app/earshinov/extract-scss-variables?utm_source=github.com&utm_medium=referral&utm_content=earshinov/extract-scss-variables&utm_campaign=Badge_Grade] image:https://img.shields.io/npm/v/@earshinov/extract-scss-variables.svg[NPM Version, link=https://www.npmjs.com/package/@earshinov/extract-scss-variables]

Extract SCSS variables, functions and mixins into a separate file.

== Motivation

LESS provides http://lesscss.org/features/#import-atrules-feature-reference[reference imports] to only import things like variables and mixins from the given file without affecting the compiled CSS: @import (reference) "foo.less".

In SCSS the same effect can be achieved by using https://github.com/sass/node-sass#importer--v200---experimental[node-sass custom importers] like https://github.com/maoberlehner/node-sass-magic-importer/tree/master/packages/node-sass-filter-importer[node-sass-filter-importer] with its @import '[variables, mixins] from style.scss';.

Even so, it seems hard to setup, especially if node-sass is being used as part of Webpack or @angular/cli build process. In many cases you will find it more convenient to extract variables, functions etc. from the file you are interested in into a separate file and import that file normally. That's what this little tool is for.

== Usage

  • yarn install --dev @earshinov/extract-scss-variables
  • yarn run extract-scss-variables index.scss variables.scss

The last command will extract variables, functions and mixins from index.scss and its imported files into variables.scss.

Example input:

.index.scss

source,scss

@mixin defaultFont() { font-family: Rubik; font-weight: normal; }

@import './button';

.button.scss

source,scss

$buttonBackgroundColor: #e0e0e0; $buttonColor: black; $buttonBorderRadius: 4px;

button, inputtype=button, inputtype=submit { @include defaultFont; appearance: none; background-color: $buttonBackgroundColor; color: $buttonColor; border-radius: $buttonBorderRadius;

}

Example output:

.index.scss:

source,scss

@import './variables';

@import './button';

.button.scss:

source,scss

@import './variables';

button, inputtype=button, inputtype=submit { @include defaultFont; appearance: none; background-color: $buttonBackgroundColor; color: $buttonColor; border-radius: $buttonBorderRadius;

}

.variables.scss

source,scss

@mixin defaultFont() { font-family: Rubik; font-weight: normal; }

$buttonBackgroundColor: #e0e0e0; $buttonColor: black;

$buttonBorderRadius: 4px;

== Development

== Useful Links

Inspired by

SCSS manipulation is implemented using https://postcss.org/[PostCSS]: