sass-extract-js

KO | EN

gitlite — search

#javascript #python #golang #machine-learning #deep-learning #macos #windows #cli #kubernetes #awesome-list #vue #pytorch #ios #openai

sass-extract-js

(★ 107)

Plugin for sass-extract to convert Sass variables into a plain JS object

sass-extract-js 최신버젼 다운로드

최종 버전 다운로드 (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

sass-extract-js
---

[![npm](https://img.shields.io/npm/v/sass-extract-js.svg?style=flat-square)](http://www.npmjs.com/package/sass-extract-js)

Plugin for [sass-extract][sass-extract] to convert Sass global variables into a plain JS object.

## Huh? Why?

I work on a team that uses Sass. We've got a shared variables file that gets referenced throughout our styleguide and in our components. I wanted to start using [styled-components][] in some projects and wanted to keep things consistent but I didn't want to have to copy our Sass variables over. Using this plugin with [sass-extract][sass-extract], I can simply extract the global variables from our Sass stylesheet and they will be converted into a JS object that gets passed down to my components via styled-components' [`<ThemeProvider>`][theming].

## Cool! How do I get it?

You'll need to install [sass-extract][sass-extract], [sass-extract-loader][sass-extract-loader], [node-sass][node-sass], and this plugin.

```sh
$ yarn add sass-extract sass-extract-loader node-sass sass-extract-js
```

*(npm install works too)*

## Nice! How do I use it?

Assuming you're using webpack, you'll need to use sass-extract-loader to require/transform your sass variables file. Then you can pass the styles as a theme via a ThemeProvider component like this:

```jsx
// Require your sass variables using sass-extract-loader and specify the plugin
const theme = require('sass-extract-loader?{"plugins":["sass-extract-js"]}!./path/to/vars.scss');

// Pass the vars into your ThemeProvider component
render(
  <ThemeProvider theme={theme}>
    <App />
  </ThemeProvider>
);
```

Then use themes in your styled components:

```js
import styled from 'styled-components';

const Button = styled.button`
  background-color: ${p => p.theme.primary}
`;

```

## Sweet! What does the output look like?

Given a Sass file with some global variable declarations:

```sass
$primary: rgb(255, 202, 77);
$seondary: #1A93C8;
$primary-light: lighten($primary, 20%);
$base-padding: 10px;
$base-margin: 0 1em;
$base-border: 1px solid #ccc;
$font-family-sans: 'Helvetica', 'Arial', sans-serif;
$base-font-size: 16px;
$line-height: $base-font-size * 1.8;
```

It will yield the following object:

```js
{
  primary: 'rgb(255, 202, 77)',
  seondary: 'rgb(26, 147, 200)',
  primaryLight: 'rgb(255, 232, 179)',
  basePadding: '10px',
  baseMargin: '0 1em',
  baseBorder: '1px solid rgb(204, 204, 204)',
  fontFamilySans: '\'Helvetica\', \'Arial\', sans-serif',
  baseFontSize: '16px',
  lineHeight: '28.8px'
}
```

## Right on! But I need options.

Everybody loves options and we've got one:

### Options Usage
#### sass-extract Plugin Options
As of sass-extract 2.0.0, options can be passed to plugins. Here's how:

```js
const rendered = sassExtract.renderSync({
  file: './path/to/vars.scss'
}, {
  plugins: [{ plugin: 'sass-extract-js', options: { camelCase: false } }]
});
```

#### Plugin Instance

You can also create a plugin instance with your desired options and pass the instance directly inside the plugins array.

```js
// Import the plugin factory directly
import createSassExtractJsPlugin from 'sass-extract-js/lib/plugin';

// Create a plugin instance, passing in your options
const sassExtractJsPlugin = createSassExtractJsPlugin({ camelCase: false });

// Call the `renderSync` function with the path to your Sass file
// and pass the plugin instance in the plugins array
const rendered = sassExtract.renderSync({
  file: './path/to/vars.scss'
}, {
  plugins: [sassExtractJsPlugin]
});

```

#### Using `transformVars` directly

If, for some reason, you don't want to use this package as a sass-extract plugin, you can import the `transformVars` function directly and use it. This is the main function that gets called in sass-extract's plugin pipeline. It expects as its input an object with extracted SASS variables, as generated by sass-extract. The function also accepts an options object.

```js
// Import the transformVars method directly
import transformVars from 'sass-extract-js/lib/transformVars';

// Call the function, passing in your options
const transformed = transformVars(objectWithExtractedStyles, { camelCase: false });
```

## Wait! What if I don't use styled-components?

No problem! I made this so I could use the extracted JS object as a theme but it's not specific to [styled-components][styled-components]. It should work the same with [glamorous][glamorous] too. Really you can use this plugin for any scenario where you need to convert Sass vars to JS.

## Help! It's not working for me.

This project is open source. I've tried to make sure it works for a lot of use cases (read: mine) but if I missed yours, feel free to [open an issue][issues]. Better yet, [submit a PR][pr]! Seriously, any feedback and help is welcome.

## License

MIT

[issues]: https://github.com/adamgruber/sass-extract-js/issues
[pr]: https://github.com/adamgruber/sass-extract-js/pulls
[styled-components]: https://www.styled-components.com/
[theming]: https://www.styled-components.com/docs/advanced#theming
[node-sass]: https://github.com/sass/node-sass#options
[sass-extract]: https://github.com/jgranstrom/sass-extract
[sass-extract-loader]: https://github.com/jgranstrom/sass-extract-loader
[glamorous]: https://github.com/paypal/glamorous

sass-extract-js

sass-extract-js 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

sass-extract-js

sass-extract-js 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README