I want to use SASS in a modular way. In the code segment below you can see a way I consider organizing some of the layouts of a page.
What I have in mind is the external variables in languages like C.
// file: some_page.scss
//
// I want some variables from the fonts, colors partials
// to be visible to the buttons partial
// Is it possible?
// error: _buttons.scss (Line X: Undefined variable: "$color_blue")
#import "colors"
#import "fonts"
#import "buttons"
// in file: _colors.scss
$color_blue: blue;
// in file: _buttons.scss
.button {
background-color: $color_blue;
}
Yes, that's how it works.
As long as _colors.scss is imported before the other files.
You can check out the port of Twitter Bootstrap to Sass here: https://github.com/thomas-mcdonald/bootstrap-sass it uses variables in a similar fashion.
You need to add a ; at the end of the #import line.
Related
I've created a big sass stylesheet with all sorts of colors. Following vite's guide for sass, I got sass working in my components. Now I'd like to use these external variables in my Svelte components' stylesheets as well.
So far I've tried:
#use "./test.sass" // along with "./test"
p {
color: $testColor
}
As well as
#import url("./test.sass") // along with "./test"
// ... same as above
It gives me an error Error: Undefined variable. And my variable is defined properly in test.sass
#use wraps imported variables in a namespace, so instead of $testColor you have to explicitly state that these variables come from a module.
#use "./test.sass"
p {
color: test.$testColor
}
or
#use "./test.sass" as *
p {
color: $testColor
}
I have a main.scss file that I want to import colors into from a _colors file.
I have defined a body color in the color file, when I try to import it, I see no changes in the webpage. They are both in the same scss folder but neither #include or #import seem to make a difference. I have tried with and without the underscore in my import statement, both single and double quotes and both import and include keywords. Please tell me what stupid mistake I am making that will rectify this problem as I have researched the problem and think I have been able to copy the examples with no success.
_colors.scss
body {
$background-color: maroon;
}
main.scss
#include 'colors';
Partials are used with #use directive. Then,
_colours.scss
body{
background-color: maroon;
}
style.scss
#use "_colours";
The reuse of code is done through the #mixin directive.
_colours.scss
#mixin body--background{
background-color:maroon;
}
style.scss
#use "_colours.scss" as so;
body{
#include so.body--background;
}
But, if you want to just define just colours use variables instead. Example below,
_colours.scss
$maroon=maroon;
$lightblue=//et cetera.
style.scss
#use "_colours";
body{
background-color:$maroon;
}
If you have a main.scss file which will be the file that gets compiled, and you want to import variables, mixins etc from another partial file, such as _colors.scss. You could do so by loading the members from the partial _colors.scss into main.scss with a #use at-rule. This allows loaded members from the module to be referenced with dot-notation throughout your main.scss stylesheet.
Let's say your _colors.scss file looked like this:
$bodyColor: maroon;
$someOtherColor: #f06;
/* adding a mixin for demo */
#mixin highlight($c, $bg) {
color: $c;
background: $bg;
}
/* some extra styles pertaining to _color.scss */
.some-styles {
color: $someOtherColor;
}
Note: The syntax for #use is #use <url> as <namespace>;.
You could load the variables/mixins etc into main.scss with a #use rule and reference the namespace throughout your program:
#use "./colors" as c;
body {
background-color: c.$bodyColor;
}
.highlighted {
#include c.highlight(#fff, #f06);
}
or without defining a namespace like:
#use "./colors" as *;
body {
background-color: $bodyColor;
}
.highlighted {
#include highlight(#fff, #f06);
}
You certainly can include a body {} declaration inside _colors.scss and load it the same way as discussed above, but I think your wanting to place the body style block inside main.scss and simply reference loaded variables from _color.scss. If you have a directory of many partials and want to load them into main.scss without writing separate #use rules for each load, then introduce a index file with #forward rules to load an entiry directory of partials into main.scss using a single #use rule.
Here is my _custom.scss:
// Bootstrap overrides
//
// Copy variables from `_variables.scss` to this file to override default values
// without modifying source files.
//$body-bg: $gray-dark;
//$body-color: $gray-light;
$blue: #363636;
$component-active-bg: #484545;
$dropdown-bg: $brand-primary;
$dropdown-link-color: #c3c3c3;
$dropdown-link-hover-color: darken(#c3c3c3, 5%);
and bootstrap.scss:
// Core variables and mixins
#import "variables";
#import "mixins";
#import "_custom";
I am compiling it with the provided Gruntfile.js.
The resultant css file has no effect. Everything looks just like with the original css.
How can I test whether I am getting compilation process actually working?
Thanks
From the format of boostrap.scss I think you should have:
#import "custom";
Next, when you make your changes in _custom.scss, leave off the "!default" tag. For example:
// _variables.css
$blue: #0275d8 !default;
/// _custom.css
$blue: #002b5b;
I have theme.scss SCSS file which contains something like that
// global variables
#import "variables";
// SCSS placeholders
#import "placeholders";
// basic HTML styles - links etc.
#import "basic";
// default layout styles
#import "layout";
/* COMPONENTS */
#import "components/layout/header"; // top page header
#import "components/layout/heading"; // main page heading
//etc. etc. a lot of another components
And it generates one output CSS file. Now I need to generate 3 different color themes (differenet CSS files). So I've created 3 SCSS files theme1.scss, theme2.scss and theme3.scss. They have the same content with only one difference:
#import "variables";
Variables will be specific for each theme. Yeah, everything works. But everytime I need to create another theme, I'll need to create another SCSS file and copy-paste whole includes from previous theme file. Is there any way how can I create my theme1.scss, theme2.scss, theme3.scss without creating 3 duplicated files?
You couldn't do it with #mixin, currently Import directives not working inside mixin becuuse of this issue https://github.com/sass/sass/issues/451
#mixin apply-theme($theme) {
#if $theme == 'red' {
#import 'variables-red';
} #else if $theme == 'green'{
#import 'variables-green';
} #else{
#import 'variables-defaults';
}
}
So currently you can do with it
$theme:'red';
#if $theme == 'red' {
#import 'variables-red';
} #else if $theme == 'green'{
#import 'variables-green';
} #else{
#import 'variables-defaults';
}
This question already has answers here:
How to import scss file in compass only if it exists?
(2 answers)
Closed 7 years ago.
I'm trying to conditionally import a sass partial if it exists to override a set of default styling variables. I'm looking for a means to accomplish the following, given that #import directives cannot be nested:
#if 'partials/theme'{
#import 'partials/theme';
}
Import directives may not be used within control directives or mixins, so what is the proper approach for referencing a partial that may or may not exist?
You can't explicitly use the import directive inside control directives.
"It’s not possible to nest #import within mixins or control directives." - Sass Reference
error sass/screen.scss (Line 9: Import directives may not be used within control directives or mixins.)
If you really need this there are sort of ways of getting around it with the #content directive. But it really depends on what your task really boils down to.
One example which would produce multiple .css file outputs for each theme, you might approach like this:
_config.scss
$theme-a: false !default;
// add content only to the IE stylesheet
#mixin theme-a {
#if ($theme-a == true) {
#content;
}
}
_module.scss
.widget {
#include theme-a {
background: red;
}
}
all.theme-a.scss
#charset "UTF-8";
$theme-a: true;
#import "all";
In another case, to produce multiple theme options in a single .css output you might have to rely on complex looping like this:
//
// Category theme settings
// ------------------------------------------
// store config in an associated array so we can loop through
// and correctly assign values
//
// Use this like this:
// Note - The repeated loop cannot be abstracted to a mixin becuase
// sass wont yet allow us to pass arguments to the #content directive
// Place the loop inside a selector
//
// .el {
// #each $theme in $category-config {
// $class: nth($theme, 1);
// $color-prop: nth($theme, 2);
//
// .#{$class} & {
// border: 1px solid $color-prop;
// }
// }
// }
//
$category-config:
'page-news-opinion' $color-quaternary,
'page-advertising' #e54028,
'page-newspaper-media' $color-secondary,
'page-audience-insights' $color-tertiary,
;
$news-opinion-args: nth($category-config, 1);
$news-opinion-class: nth($news-opinion-args, 1);
$news-opinion-color: nth($news-opinion-args, 2);
$advertising-args: nth($category-config, 2);
$advertising-class: nth($advertising-args, 1);
$advertising-color: nth($advertising-args, 2);
$news-media-args: nth($category-config, 3);
$news-media-class: nth($news-media-args, 1);
$news-media-color: nth($news-media-args, 2);
$audience-args: nth($category-config, 4);
$audience-class: nth($audience-args, 1);
$audience-color: nth($audience-args, 2);
In retrospect, the best solution you would probably use JavaScript to conditionally load in theme assets or modules.