I want the _typography.scss access variables on _variables.scss .
// _variables.scss
$color: <null> | <$variable> | <value> | <etc>;
// _typography.scss
body {color: $color;}
When I try:
//_typography.css
#use '_variables.scss'
body:{color: $color;} / Error undefined variable. color: $color;
But when I try:
//_typography.css
#import '_variables.scss'
body:{color: $color;} / works as intended.
Since Sass is migrating from #import to #use, why the #use doesnt work as expected in this case?
And what would be the best practice to avoid this problem?
Thanks in advance.
When you use #use, your imports have a namespace by default. You can either use the namespace:
#use "variables";
body: { color: variables.$color; }
Or remove it with #use "<url>" as *:
#use "variables" as *;
body: { color: $color; }
The best practice is to read the doc. ;)
Related
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.
i am struggling with breaktpoints in SASS.
I have this file structure
style.scss
_layout.scss
_variables.scss
I wanna use code breakpotints from _variables.scss in _layout.scss
_variables.scss
$screen-xl-min: 1200px;
#mixin xl {
#media (min-width: #{$screen-xl-min}) {
#content;
}
}
_layout.scss
#use 'variables';
nav {
height: 80px;
#include xl {
background-color: red;
}
}
style.scss
#use 'variables';
#use 'layout';
And I have error
SassError: Undefined mixin.
Can someone tell me, what am I doing wrong? Thanks a lot for a help!
Try and change
#use 'variables'
for
#use 'variables' as *;
Check the documentation: https://sass-lang.com/documentation/at-rules/use
In your example correct way will be write #include variables.xl {}
Or modify #use rule like #Café wrote
For many years I've been completely happy with #import, but times, they are a-changing ...
So I try to shift my projects from #import to #use and #forward, and I found this posting quite useful. But when I try to implement #use into my partials, I keep getting an 'undefined mixin'. I think I may have misunderstood the way #use works, but I can't for the live of me figure out where i went wrong. I've reached the point where I just want to climb the next church tower and start shooting people ... which doesn't help me concentrating either ;)
So I stripped it all down to very basic chunks of code to examine the problem under 'lab conditions'. Here is what I came up whith:
Folders and files:
styles.scss
├── a_tools
│ └── _mixins.scss
├── b_settings
│ └── _global.scss
└── c-components
└── _test.scss
_mixins.scss:
#use '../b_settings/global' as *;
#function bp($bp) {
#return ($breakpoints, $bp);
}
#mixin vp-medium {
#media (min-width: #{breakpoints(small) + 1}) and (max-width: #{breakpoints(medium)}) {
#content;
}
}
_gobal.scss:
$breakpoints: (
'small': 767px,
'medium': 1024px,
'navigation': 840px,
);
:root {
--vp-name: small;
}
#include vp-medium {
:root {
--vp-name: medium;
}
}
_test.scss:
#use 'a_tools/mixins' as *;
#use 'b_settings/global' as *;
.test {
margin: 10px;
#include vp-medium {
margin: 20px;
}
}
styles.scss:
#use 'c_components/test';
Compiling keeps throwing 'undefined mixin on line 15, column 1 of _global.scss', which is the line '#include vp-medium {'. Compiled with Dart Sass 1.32.8.
Who can tell me where I got on the wrong path? Thanks in advance!
As I understand the new ruls #use the way, that you have to #usethe needed files with the needed mixin to EVERY file you want to use it.
If I did get it reight:
You #used the file mixins with mixin vp-medium in test.scss where it is used.
But you did not #use the same file in global where want to use the mixin as well. Just try to #use the file also to global.
ADDITIONAL:
We had similar discussion here: https://stackoverflow.com/a/66300336/9268485
Tried many different ways but doesn't seem to work. Hoping someone can shed some light on this
This is what I'm trying to achieve and _variable.scss / _base.scss are coming from a library so I can't modify them
_variables.scss
$color: red !default;
_base.scss
#use 'variable' as base-variable;
.test {
color: base-variable.$color;
}
my-component.scss
#use '_base'; // I want to modify the color in this file, how should it be done?
**expected output
.test {
color: **another color**;
}
I finally figured it out, you can override the whole imported module.
my-component
#use 'variable' as base-variable with (
$color: 'another-color'
);
#use '_base'
How can I Include .scss file in another .scss file?
I was trying to write this in a file:
app.scss:
#include('buttons');
#include('dropzone');
body {
background: $primaryColor;
overflow-x: hidden; /*Clip the left/right edges of the content inside the <div> element - if it overflows the element's content area: */
height: 100%; /* Cover all (100%) of the container for the body with its content */
padding-top: 70px;
} /* more css code here */
and it returns an error : invalid css after #import
I try to include 2 other scss files inside the main scss file, so it will be all compiled to one css file eventually. How is it possible?
You can import it like this;
#import "../../_variables";
#import "../_mixins";
#import "_main";
#import "_login";
#import "_exception";
#import "_utils";
#import "_dashboard";
#import "_landing";
According to your directories and it will do what you want.
You can include a partial by doing this:
#import "partial";
The imported file needs an underscore, so sass will recognize it to be included: _partial.scss
You can use #use rule for it. This rule loads another Sass file as a module, which means you can refer to its variables, mixins, and functions in your Sass file with a namespace based on the filename. Using a file will also include the CSS it generates in your compiled output!
// _base.scss
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
body {
font: 100% $font-stack;
color: $primary-color;
}
see how to using #use 'base'; in the styles.scss file
// styles.scss
#use 'base';
.inverse {
background-color: base.$primary-color;
color: white;
}
you don't need to include the file extension.
#osherdo You have no need to add !important for overwriting bootstrap CSS.
body
{
background: #4d94ff; /* Use to override Bootstrap css settings. */
}
First of you need to verify from where bootstrap is rendering on the page and what is the weight of the bootstrap CSS file. After that you can place your 'css/app.css' file after bootstrap then it will work. Then you can easily overwrite the entire bootstrap CSS.
Ok, so it appears to be that my app.scss file collide with Bootstrap.css file.
Because I wanted the app.scss background property to apply, instead of the bootstrap css file. I've added !important in this property to override bootstrap style.:
body
{
background: #4d94ff !important; /* Used to override Bootstrap css settings. */
}
Also, gulpfile.js has been updated to suite my needs accordingly:
var elixir = require('laravel-elixir');
elixir(function (mix) {
mix.sass('app.scss', 'resources/assets/css')
.styles([
'app.css'
], 'public/css/app.css');
mix.version([
'css/app.css'
]);
});
And that's how I fixed it.