_variables.scss
$bodycolor: black;
_base.scss
body {background-color: $bodycolor}
_component.scss
#forward "variables";
#forward "base";
index.scss
#use "component" as *
I get the Error: Undefined variable $bodycolor when compiling Sass.
Related
I have styles.scss file which loads variables from variables.scss and pass them to all imported stylesheets (according to docs)
// style.scss
#use "variables" as *;
#import "test";
// variables.scss
$body-color: red;
If I use simple _tests.scss then it works fine.
// _tests.scss
body {
color: $body-color;
}
But when I try to use other modules inside imported file, I get an error:
// _tests.scss
#use "sass:math"; // this line causes "Undefined variable" error
body {
color: $body-color;
}
What am I doing wrong?
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
I have _extandable.scss file with one placeholder selector:
%text-ellipsis {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
and I'm trying to use it in another file:
#use 'extendable';
.text-ellipsis {
#extend extendable.%text-ellipsis;
}
The output of sass-loader is an error:
SassError: Expected identifier.
╷
4 │ #extend extendable.%text-ellipsis;
│ ^
╵
src/assets/styles/_component.scss 4:22 #import
What's the right way of importing of placeholder selectors using #use rule?
After some investigation I've found out that it's incorrect syntax. Placeholder selectors have global scope during compiling, so we cannot write like this and we don't need to do it.
For example:
main.scss
#import "variables";
#import "page";
_variables.scss
$color-a: #FFFFFF;
_page.scss
div.test {
background: $color-a;
}
Or does variables have to be imported on every sheet that wants to use a variable from it?
Currently, I'm getting Error: Undefined variable: "$color-a"
Edit I should add that I'm using sassc to compile the files in a clojure project:
:sass {:sass-file "main.scss"
:source-maps false
:output-style "compressed"
:output-dir "css/"}}
I have the following in my scss file:
#import compass
$base-font-size: 16px;
$base-line-height: 20px;
$lato: 'Lato, Helvetica, Arial, sans-serif';
html {
#include establish-baseline($base-font-size);
font-family: $lato;
}
but when I check my CSS, the #include establish-baseline rule doesn't output anything and I get no compilation errors. Anyone any idea what could be wrong?
The main problem:
In your case, you should put the imported file name "compass" between quotes:
#import "compass"
If you only want to import establish-baseline mixin use instead:
#import "compass/typography/vertical_rhythm";
Some tips:
It's not necessary to set $base-font-size: 16px because imported compass files comes with a $base-font-size: 16px !defaultvariable declaration
As #nyuen says you don't need to pass $base-font-size as an argument and you should move the #include establish-baseline out of the html.
Here is the modified code:
// you should use the file name to import between quotes
#import "compass";
// $base-font-size: 16px !default; it's already declared in compass
// $base-font-size: 16px;
$base-line-height: 20px;
$lato: 'Lato, Helvetica, Arial, sans-serif';
// This include should be use out of any selector
#include establish-baseline();
html {
font-family: $lato;
}
I'm just learning about vertical rhythms as well, and here's my suggestion:
I think the syntax should be "#include establish-baseline;" (without the $base-font-size argument because when you include the establish-baseline mixin, it automatically looks for that argument, as well as $base-line-height), and you can also move that line out of your html selector to under the $base-line-height declaration.