I'm trying to set global variables in one file and then use these variables in all other scss files throughout the application. When I set the variables I can use them in that specific file but not others. I am using the '#use' method instead of '#import' as the sass docs recommended it however it seems the '#import' method would achieve what I need however I need a workaround for the long term. Finally, I tried using the '#forward' method but could not see any change and I got the same errors.
app.scss
#use 'layouts/variables.scss';
#use 'layouts/forms.scss';
_variables.scss
$ds-black: #212121;
_forms.scss
input
{
border: 1px solid $ds-black;
}
Console output when compiling:
Error: Undefined variable.
╷
14 │ border: 1px solid $ds-black;
│ ^^^^^^^^^
╵
resources\css\layouts\_forms.scss 14:23 #use
resources\css\app.scss 4:1 root stylesheet
I tried using the ' !global ' attribute however I got this error as well as the previous
Deprecation Warning: As of Dart Sass 2.0.0, !global assignments won't be able to
declare new variables. Since this assignment is at the root of the stylesheet,
the !global flag is unnecessary and can safely be removed.
╷
9 │ $ds-black: #212121 !global;
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^
╵
resources\css\layouts\_variables.scss 9:1 #use
resources\css\app.scss 3:1 root stylesheet
https://sass-lang.com/documentation/at-rules/use#choosing-a-namespace
You could change the use tag to something like
#use 'layouts/variables' as *;
or
#use 'layouts/variables';
//and then
input
{
border: 1px solid variables.$ds-black;
}
If you want to use the new Sass module system and have stylesheets that are only used as modules and should not be compiled on their own, you should name your mopules with a leading "_" so the compiler knows to treat them as partials. You then have those two options, Kenyi Larcher showed you.
Related
I have a jekyll based blog. When I try to build it I get this error:
...
Generating...
Jekyll Feed: Generating feed for posts
Warning on line 1, column 1 of /home/john/Projects/blackblog/assets/css/index.sass:
This selector doesn't have any properties and won't be rendered.
╷
1 │ ---
│ ^^^
╵
Warning on line 2, column 1 of /home/john/Projects/blackblog/assets/css/index.sass:
This selector doesn't have any properties and won't be rendered.
╷
2 │ ---
│ ^^^
╵
Error: This file is already being loaded.
┌──> /home/john/Projects/blackblog/assets/css/index.sass
4 │ #import index, font, basic, layout
│ ^^^^^ new load
╵
┌──> /home/john/Projects/blackblog/assets/css/classes.sass
1 │ #import index, highlight
│ ━━━━━ original load
╵
/home/john/Projects/blackblog/assets/css/index.sass 4:9 #import
/home/john/Projects/blackblog/assets/css/classes.sass 1:9 root stylesheet
Conversion error: Jekyll::Converters::Sass encountered an error while converting 'assets/css/classes.sass':
This file is already being loaded.
...
This code of whole site: github.com/yagarea/blackblog.
What should I fix to make my site build ?
Thank you for help
Cause of this issue was that I had file name index.sass in _sass and in assets. This was not issue in until jekyll-sass-converter version 3.0.
I renamed one file to main.sass. I brought a lot of other issues but it was easy fix because build log tells you what to do to fix it.
Not really a bug. This is how it happened:
index.sass has front matter. Jekyll read file as string, process and remove the front matter, then start to compile an input “string”.
index.sass imports index.sass, according to sass spec, the relative import of itself hits before load path, and now we are importing the same file which technically is a circular import. When sass read the same input directly from disk, it knows nothing about the Jekyll front matter and would give up with a syntax error.
One way to address it can be write a custom importer that checks for front matter in each imported partials, and compile it with Jekyll before read as sass partials. However, this has significant drawbacks that isn’t worth doing:
Jekyll’s sass implementation has never allowed partials to have front matters.
Allowing front matter in partials would lead to slower compilation performance as every partial need to be preprocessed by Jekyll, and then passed through protobuf via stdio as a string rather than dart-sass-embedded directly read file from disk.
Even if we allow front matter in partials, it would still be circular import, and user would just get a different error message.
Source: github.com/jekyll/jekyll/issues/9265
When I apply the following SASS in my component's style, it works as supposed to.
$test-color: pink;
div{ background-color: $test-color; }
However, when I move the definition to styles.scss, it doesn't. I've tried adding the (now, apparently, deprecated) #import "../styles.scss"; and also the currently recommended #use "../styles.scss";. I even tried to put the color definition in colors.scss and add that reference to angular.json. The styles for classes declared in styles.scss work (even without importing/using, due to it being references in the assets). But the variable, doesn't.
According to this suggestion, it should work with #include. In this docs, it's shown how to assign the values. I found this linking to this but I can't see how that differs from my case. I tried to understand this blog but couldn't see any relevant hints on what I'm doing wrong. I also tried adding the following (as shown here).
"stylePreprocessorOptions": { "includePaths": [ "src" ] }
I still get the error below, though.
ERROR in ./src/app/.../some.component.scss
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Undefined variable.
14 │ background-color: $test-color;
___ │ _________________ ^^^^^^^^^^^^
src\app...\some.component.scss 14:23 root stylesheet
Googling the actual error gave me this saying that the variable isn't there. But as far I can tell, it is! A related, although a bit different, question was asked here but with no relevant answer.
What am I missing and how do I investigate it further?
The error is due to wrong syntax as pointed out. It needs to reference the source of the colors.
background-color: colors.$test-color;
Furthermore, the import is required but needs to be done by reference to the module and not to the file.
#use "colors";
In a wholesome code base, one should put the following in the file src\colors.scss.
$test-color: pink;
Then you could use it like this.
#use "colors";
div{ background-color: colors.$test-color; }
In the config file angular.json, the following needs to be set.
"styles": { ... },
"stylePreprocessorOptions": { "includePaths": [ "src" ] },
"scripts": { ... },
Also, it's should be noted that files prefixed by an underscore are subject to a different processing and as such, _colors.scss is preferred. While it's valid and working to place the auxiliary files directly in /src (as is the case with styles.scss, the convention dictates to place them in /src/assets/styles, altering the pre-processor's options as below.
"stylePreprocessorOptions": { "includePaths": [ "src/asses/styles" ] }
In my LESS project I am having issues getting my guarded mixins working with variables that I declared in another file. Here is the code I am working with:
_defaults.less (contains all of my variables)
//------------------------------------//
// #INCLUDE
//------------------------------------//
// Set whatever components you want included
// in your project to `true` and any components
// you do not wish to be included to `false`
// Base
#use-main: true;
_main.less (just a random partial in my project)
.main(#boolean) when (#boolean = true) {
// Styles go here
}
// Execute mixin
.main(#use-main);
style.less (imports all of my partials)
//------------------------------------//
// #IMPORTS
//------------------------------------//
// Base styles
#import "base/_main.less";
This is how my project is structured (for around 20 partials that are then imported into the style.less file).
Whenever I try to compile my project, I get this error:
Unrecognised input
c:\Users\Keenan\Documents\GitHub\concise.css-less\less\base_main.less line 1
c:\Users\Keenan\Documents\GitHub\concise.css-less\less\concise.less
The code you pasted is correct. In fact you are misled by lessc error message. It refers to the #main block. It seems the issue you are facing is related to your project Concise.css-less and more precisely this line.
#if #global-border-box == true {
// [...]
}
This is not the proper syntax for if statements in less. See question:
How to use if statements in LESS
It seems you are converting a project from stylus to less. I would suggest cutting large chunks of files that fail to import to find out, through bisection, the lines that less doesn't recognize. Alternatively, you could comment the top mixins guards that are used here to include this or that part of the css, and that confuse less for error reporting.
For example, if you comment the first and last lines of file _lists.less:
//.lists(#boolean) when (#boolean = true) {
[...]
//.lists(#use-lists);
lessc will report the error near the proper line (actually it's > on line 111 that it doesn't like):
ParseError: Unrecognised input in concise.css-less/less/base/_lists.less on line 109, column 9:
108 .breakpoint(small) {
109 dl.dl-horizontal {
110 overflow: hidden;
I have tried both SimpLESS and Crunchapp both return the same error.
I am trying to compile this bootswatch http://bootswatch.com/cyborg/ and when I do I get the following error.
Compiler Errors
variable #grayLight is undefined (Line: 17)
Does anyone know what I am doing wrong?
You must define the variable in the same file where you using it:
#grayLight: #e7e7e7;
Or if it defined in another .less file you must import that to see the variable in another file:
#import "mixins.less";
You have to asign the variable value first, for example:
#grayLight: #ffffff;
It's exactly as error said, you use variable that is undefined.
Then you can call this variable at any place in code. If it happens you defined it earlier, check if names are equal (letterCase as well).
Is it possible to set a sass variable at compile time? I basically want to do this:
$color: red !default;
div#head {
background-color: $color;
}
When I compile to css I want to set $color to "blue" (preferably from the command line). Has anyone been able to do this?
Thanks,
Chris
I found this at their FAQ http://sass-lang.com/docs/yardoc/file.FAQ.html
If you just want to pass some variables to the CSS every time it gets compiled, like using --watch, you can use Sass functions to define Ruby scripts to even query a database. But the code is going to be compiled only once, and served statically.
But if you need to recompile it at every request with different options,
you can use Sass::Engine to render the code, using the :custom option
to pass in data that can be accessed from your Sass functions
Seems like it's not recommended, though. Probably for performance reasons.
An alternate of command line options is to create other files assigning values to variables.
Assume that your code above is in a file named 'style.scss'.
To set $color to "blue", create a file such as:
$color: blue;
#import "style";
and name it to 'blue.scss' for example.
Then compile it with below.
sass blue.scss:style.css
When you want to assign another value to the variable, make another file named "green.scss" like:
$color: green;
#import "style";
Then compile it with
sass green.scss:anotherstyle.css
It is bothering somewhat but enables to decide values of variables at compile time.