Last active
January 18, 2019 09:55
-
-
Save bcinarli/205b35dced88f7f07faee2ce70384110 to your computer and use it in GitHub Desktop.
Import SCSS variable to JS/JSX
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Sometimes you want to share some variables between your SCSS and JS/JSX code | |
// To do this, you can levarage the :export command in SCSS. | |
$alertInfo: #b8d3e8; | |
$alertWarning: #fdf9c3; | |
$alertSuccess: #cfc; | |
$alertError: #e63f3f; | |
// this exports the variable to be available in JS | |
:export { | |
alertInfo: $alertInfo; | |
alertWarning: $alertWarning; | |
alertSuccess: $alertSuccess; | |
alertError: $alertError; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// just import scss file like a normal import statement | |
import { alertInfo, alertWarning, alertSuccess, alertError } from './colors.scss' | |
const info = () => <Icon type="info" color={ alertInfo } /> | |
const warning = () => <Icon type="warning" color={ alertWarning } /> | |
const success = () => <Icon type="success" color={ alertSuccess } /> | |
const error = () => <Icon type="error" color={ alertError } /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment