Package Exports

@figma-export/output-styles-as-sass
@figma-export/output-styles-as-sass/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@figma-export/output-styles-as-sass) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

@figma-export/output-styles-as-sass

Styles Outputter for @figma-export that exports styles to SASS and SCSS.

With this outputter you can export all the styles as variables inside a .sass or .scss file.

This is a sample of the output:

$ tree output/
# output/
# └── _variables.scss

.figmaexportrc.js

You can easily add this outputter to your .figmaexportrc.js:

import asSass from '@figma-export/output-styles-as-sass'

export default {
    commands: [
        ['styles', {
            fileId: 'fzYhvQpqwhZDUImRz431Qo',
            outputters: [
                asSass({
                    output: './output'
                })
            ]
        }],
    ]
}

output is mandatory.

getExtension, getFilename and getVariableName are optional.

import asSass from '@figma-export/output-styles-as-sass'
import { kebabCase } from '@figma-export/utils'

...

asSass({
    output: './output',
    getExtension: () => 'SCSS',
    getFilename: () => '_variables',
    getVariableName = (style, descriptor) => `${kebabCase(style.name).toLowerCase()}${descriptor != null ? `-${descriptor}` : ''}`,
})

defaults may change, please refer to ./src/index.ts

Install

Using npm:

npm install --save-dev @figma-export/output-styles-as-sass

or using yarn:

yarn add @figma-export/output-styles-as-sass --dev