@figma-export/output-style-as-sass (英语)

样式输出器 @figma-导出 将样式输出给SASS和SCSS.

通过这个输出器,您可以将所有样式导出为内置变量 .sass 或者说 .scss 文档.

这是输出的样本 :

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

.figmaexportrc.js (中文(简体) )

您可以轻松地将此输出器添加到您的 .figmaexportrc.js数字 :

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

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

output 实值 强制。 。 。 .

getExtension, (中文(简体) ), getFilename 财务报告和审定财务报表 getVariableName 为: 选项。 。 。 .

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}` : ''}`,
})

默认值可能改变,请参考 ./src/index.ts

安装

使用 npm :

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

或使用线条 :

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