Skip to content

SCSS variables output#204

Merged
mikaelvesavuori merged 2 commits intomikaelvesavuori:mainfrom
timhettler:feat/scss-output
Jan 8, 2025
Merged

SCSS variables output#204
mikaelvesavuori merged 2 commits intomikaelvesavuori:mainfrom
timhettler:feat/scss-output

Conversation

@timhettler
Copy link
Contributor

This PR riffs off the CSS variable output feature to enable SCSS variable output. A few important distinctions:

  1. Filenames have a leading underscore (_) to follow Sass's partial convention.
  2. SCSS variables are not prefixed with the frame name as I did in Prefix CSS variables with frame name #203; this is because Sass has it's own namespace convention to avoid global variable collisions, e.g:
@use "./tokens/colors";
@use "./tokens/borderWidths";
@use "./tokens/fontFamilies";

button {
 color: colors.$green3;
 border: 1px solid borderWidths.$regular;
 font-family: fontFamilies.$regular;
}

mikaelvesavuori
mikaelvesavuori previously approved these changes Jan 8, 2025
@mikaelvesavuori
Copy link
Owner

Hi again @timhettler! A great addition to Figmagic. Seems you covered all of the bases - happy to merge!

@mikaelvesavuori mikaelvesavuori merged commit c97a91c into mikaelvesavuori:main Jan 8, 2025
2 of 5 checks passed
@mikaelvesavuori
Copy link
Owner

Wonderful work! 🚀 Now released in https://github.com/mikaelvesavuori/figmagic/releases/tag/v4.5.14

@mikaelvesavuori mikaelvesavuori added the enhancement New feature or request label Jan 9, 2025
@mikaelvesavuori mikaelvesavuori self-assigned this Jan 9, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

enhancement New feature or request

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants