UPDATE: If you plan to implement the export solution, you must
place it in a separate file to prevent redundant exports in your
compiled CSS code. See here.
I recently learned that you can export styles from SCSS into JS like so:
_variables.scss
:export {
some-variable: 'some-value';
}
app.js
import styles from 'core-styles/brand/_variables.scss';
Based on this, my _variables.scss is formatted like so:
/* Define all colours */
$some-color: #000;
$another-color: #000;
// Export the color palette to make it accessible to JS
:export {
some-color: $some-color;
another-color: $another-color;
}
The issue with the above format is that I have to re-define each of my variables within export. Therefore, I am interested to know whether there is a way to loop though each of my variables automatically and export them to JS?
Some improvements to the accepted answer:
Use camelcase so you will be able to individually export a variable.
Set the #each directive outside so it won't generate a new :export at-rule for each variable.
_variables.scss
$theme-colors: (
'someColor': #000,
'anotherColor': #FFF,
);
:export {
#each $key, $value in $theme-colors {
#{unquote($key)}: $value;
}
}
app.js
import styles from './core-styles/brand/_variables.scss' // { anotherColor: "#FFF", someColor: "#000" }
import { someColor } from './core-styles/brand/_variables.scss' // #000
Side note: I prefer using quotes inside Sass Maps, but you can omit them.
Taking a Cue from Bootstrap 4, you could combine a SASS map with a loop like below;
/* Define all colours */
$theme-colours: (
some-color: #000,
another-color: #000,
third-color: #000,
fourth-color: #000
)
#each $color, $value in $theme-colours {
:export{
$color: $value;
}
}
Here's some examples from the Bootstrap 4 Docs
Related
I have the next postcss config
module.exports = {
plugins: [
[
'postcss-preset-env',
{
browsers: 'last 2 versions, IE 11, not dead',
preserve: false,
features: {
'custom-media-queries': true,
'custom-properties': true,
'nesting-rules': true
},
importFrom: ['src/styles/variables.css']
}
]
]
}
And this file with css variables
#custom-media --desktop screen and (min-width: 768px);
#custom-media --mobile screen and (max-width: 767px);
:root {
--montserrat: montserrat, sans-serif;
--sfProDisplay: sf pro display, sans-serif;
--helvetica: helvetica, sans-serif;
--blue: #315efb;
--middleBlue: #2c54e2;
--darkBlue: #274bc8;
--lightBlue: #e0ebff;
--green: #21a038;
--grey: #62687f;
--darkGray: #343b4c;
--blueGray: #8d96b2;
--cloudGray: #f3f4f7;
--cloudGray7: #afb6c9;
--darkCarbone: #1f2431;
--paleYellow: #fffde5;
--red: #ff564e;
}
After i built my project via next build && next export, colors are not displayed correctly. For example, color: var(--blueGray), instead color: #8d96b2. Has anybody idea what's wrong?
I believe you should import your CSS variables directly in your styles section and not in config. but I might have got you wrong
Global CSS needs to be included in the /pages/_app file.
From the Adding a Global Stylesheet
documentation:
To add a (global) stylesheet to your application, import the CSS file within
pages/_app.js.
(...) In development, expressing stylesheets this way allows your
styles to be hot reloaded as you edit them—-meaning you can keep
application state.
In production, all CSS files will be automatically concatenated into a
single minified .css file.
Make sure you import the file where the CSS variables are defined in your custom _app.
import '../styles/globals.css'
import '../styles/variables.css'
function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />;
}
export default MyApp;
This may not be worth the bounty but from NextJS docs.
CSS variables are not compiled because it is not possible to safely do
so. If you must use variables, consider using something like Sass
variables which are compiled away by Sass.
I'm trying to export a sass variable that has a css variable value to my react component, and I'm receiving the wrong value, with the codes is easier to understand.
Here is my sass code:
$test: var(--color);
:export {test: $test}
My css variable:
:root {
--color:#fc4c02;
}
And my JS code:
colors={{
active: {
base: colors.test
}
}}
My base color instead of having the --color value comes as a string var(--color), someone can help me please?
I have this import statement in my project
#import "./assets/sass/style.angular.scss";
How i can change the path based on a variable. I want to make it change when user change the language of the project to arabic use this path
#import "./assets/sass/style.angular.RTL.css";
This is not a built-in functionality of angular, but you could always add a class to your app.component file based on the language, or a data tag. Something like this:
#Component({
templateUrl: 'app.component.html',
selector: 'app-component
})
export class AppComponent {
#HostBinding('attr.data-lang') language: string = "en";
}
then in your style.angular.RTL.css file you would prefix your selectors with [data-lang="arabic" to have it kick in whenever the language variable was set to arabic.
If you are in need of if-else inside the .scss file, you can check this approach
// Define a mixin to import what file needs to be imported
#mixin importRightScssFile($firstUrl: true) {
#if $firstUrl {
#import('path/to/your/first-url.scss');
} #lse {
#import('path/to/your/second-url.scss');
}
}
// Whenever you want you can simply use this **mixin** to load whatever URL you want like this:
.first-url-class {
#include importRightScssFile($firstUrl: true);
}
.second-url-class {
#include importRightScssFile($firstUrl: false);
}
The purpose of the web components is to encapsulate all HTML/CSS/JS in one place, but I must use general SCSS files, that have a lot of variables such as color, font size and a lot of other stuff. It's a design system and it's always changing. Is there a plugin or a way to solve this problem?
If the purpose of those Sass files is to only expose some variables then probably the smartest thing to do is converting them to CSS custom properties: they're the recommended and most effective way to theme WebComponents.
#use 'sass:meta';
#use 'variables-file-1'; // Import the variable files
#use 'variables-file-2'; // as Sass modules
// ...
#mixin export-vars($module-name) {
// Use module-variables() to extract a name-to-value map of the
// variables declared in the module identified by $module-name
#each $name, $value in meta.module-variables($module-name) {
--#{$name}: #{$value}; // Define an equivalent CSS custom prop
}
}
:root {
#include export-vars(variables-file-1);
#include export-vars(variables-file-2);
// ...
}
You can then import the compiled CSS (a normal <link> in index.html is fine in most cases since CSS custom properties cross shadow DOM boundaries) and use the variables in your components:
import { LitElement, html, css, customElement } from 'lit-element';
#customElement('my-component')
export class MyComponent extends LitElement {
static styles = css`
:host {
color: var(--my-var, <fallback-value>);
}
`;
}
With this said, if you need to share styles between LitElements, that is possible as well.
I am developing an angular component and I would like to import into my scss file variables (such as colors) from my ts file and I am going throught some issues.
I have seen some examples with node-sass and webpack but are not very clear to me.
Thanks
One option is CSS Variables.
This is not a SASS variable that is available in preprocessing, but rather something available in the browser during runtime. Therefore, you can get/set it with javascript, and the CSS style will update based on the variable value.
For instance, let's say your component allows you to set the text color through a javascript variable textColor:
CSS:
p { color: var(--text-color); }
JS:
element.style.setProperty("--text-color", textColor);
And if you want the flexibility/maintainability of variables in your SCSS -- you can have the variables point to the JS/CSS variables.
SCSS:
// _vars.scss
$text-color: var(--text-color);
// _styles.scss
p { color: $text-color }
Make sure to verify that this feature has the level of browser support your app needs.
have you tried ngStyle
<some-element [ngStyle]="{'color': styleExp}">...</some-element>
and then in your .ts
styleExp = 'red'
you can read more on it on the official docs
https://angular.io/api/common/NgStyle
It is not possible to import variables to scss files from the ts files. Instead, you can use angular angular properties ngStyle and ngClass
constructor(private elem: ElementRef){
this.colorValue = "yellow";
this.elem.nativeElement.style.setProperty('--text-color', colorValue);
}
then in the css or scss you can use --text-color variable
p { color: var(--text-color); }
I know this is old, but I would like to give an answer that people might be interest:
in example.component.ts
#Component({
selector: 'example',
templateUrl: './example.component.html',
styleUrls: ['./example.component.scss'],
})
export class ExampleComponent implements OnInit {
...
#HostBinding('style.--nameOfVar') nameOfVar = 'red';
...
}
in example.component.scss (or css)
.example {
color: var(--nameOfVar);
}