`Unrecognized input` error with LESS guarded mixin - css

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;

Related

Can't use SASS variables in Angular from global file, despite other styles working

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" ] }

The #use feature of Sass

First of all, I hope someone can actually understand this rambling question because I'm struggling to even word what I mean in a coherent way, but here goes:
I don't know why I'm struggling so much to figure this out, but I've been using #import with SCSS for a while now and feel I have my head around it fairly well, but now I want to use the #use rule since the phasing out of #import is a thing. And I can't find any videos or any real articles explaining how to use it properly.
The problem I'm having is I can't get my head around how to actually use it, I feel like I get the basic idea, and how to use the modules in each partial (I think..), but I feel like I don't understand how to actually get all of the partials into a main .scss file to be compiled into css.. This is hard to explain.. I just feel like I would still need to #import at least the files that have #use inside them into a main file for it to be compiled.. I'm guessing this obviously isn't the case, but otherwise I can't work it out.. Do I just #use all the files I want imported into the main file or..?
If anyone could shed some light on this for me, I would be really grateful.
Thanks
The new rules #use/#forward and the remove from #import are indeed a really big impact to SASS. It leads to a complete new form to write sass. A try to make an easy explanation for the beginning to use the new technique:
(1) #use works similar to #import. It adds the code from a (config- or partial-)file or a module to your stylesheet.
(2) The difference is: SASS changes the scope of variables/mixins/functions from global (all imported files = one scope) to local files (variables are only valid in the actual file). If you need to use variables/mixins/functions from another (config- or partial-)file you need to 'include' them to the actual file first.
That means for your project(*):
//file ###> _config.scss
$columnWidth: 50%;
$projectColors: (
primary: red,
secondary: blue,
);
//file ###> _functions.scss
#use 'config' as * // --> to use config vars (here: without namespace)
#function getColor( $name ){
$color: map-get($projectColors, $name);
#return $color;
}
//file ###> _partial.scss
#use 'config' as * // --> use config vars (here: without namespace)
#use 'functions' as * // --> use functions (here: without namespace)
.class {
width: $width;
color: getColor( primary );
}
//file ###> myStylesheet.scss
// no need to #use 'config' or 'functions'
// as they are not direct needed in this file
#use 'partial' //--> write the css
---
( * ) Including files without using a namespace is a special case to make the example more easy. Normaly you will include variables/mixins/functions to a separated namespace and call them by namespace.$variable or namespace.mixin. And there are techniques to move special settings to a #used file as well so you can move variable settings to the project. Please have a look to official and excelent description: https://sass-lang.com/documentation/at-rules/use
NOTES:
(1) As it is heavily discussed: Yes. This is INDEED the intended new way to work with SASS. (https://github.com/sass/sass/issues/2750)
(2) Very interesting: The actual brandnew version from Bootstrap has moved to the new Sass Version. But as I have seen Bootstrap does not use that new feature #use and still works with #import. That may have reasons ... and it seems not to easy to change the technique.
(3) Also it seems to be a little bit complicated there are some advantages comming with that new technique. Using separate namespaces make it much mor easier to work with external modules without causing name conflicts.

less CSS parse error: media definitions require block statements

I'm using codekit to compile my Bootstrap LESS files and i keep getting this parse error on media queries that i didn't get when it was previously a CSS file.
"ParseError: media definitions require block statements after any features in /assets/less/homepage.less on line 568, column 2:
567 #media (max-width: #iphone_breakpoint) {
568 }"
Here is the complete line of code in question:
/* Custom, iPhone Retina */
#media (max-width: #iphone_breakpoint) {
}
Can anyone explain what's going on?
Just had this error, found the issue was a simple syntax error. I'll post what worked for me.
The error:
>> SyntaxError: media definitions require block statements after any
>> features in _assets/less/styles.less on line 144, column 2:
>>
>> 143
>> 144 div {
>> 145 .links {
Notice the error shows the line as being around 144-145, below we'll see
In the code below I've forgot the . (period) when using the built in .hidden() mixin by twitter-bootstrap.
This outputs the error:
SyntaxError: media definitions require block statements after any features in dir/bar/foo.less on line 144, column 2:
A little misleading as the error is a child within that div on line 149.
div { // Line 144
.links {
.hidden();
}
.other-links {
// Missing `.` for using the mixin
hidden(); // The real error is here on Line 149
}
}
Summary:
Make sure you have no syntax errors in the children where the displayed error noted the error.
Check for missing periods before mixins. hidden() -> .hidden()
Check for all other errors ?
Found another syntax error causing this error?
let us know, comment below

Grunt jshint disable Expected a conditional expression and instead saw an assignment

I am using grunt-contrib-jshint and it finds the following error in my JS file:
line 5 col 70 Expected a conditional expression and instead saw an assignment.
I know the reason of this error, but all I want is to disable it. Looking here it looks like I can either use no-cond-assign to 0 in my jshintrc or by adding -W084 : true in my options.
The problem is that the first solution ended up in a corrupted jshintrc and the second one does not solve the problem. Another option is to add -W022 : true (which solution I found in the comments) also does not work.
Use the ignore pragma to skip this line:
/* jshint ignore:start */
if(this = Infinity)
/* jshint ignore:end */
{
return;
}

Crunching / Compiling LESS

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).

Resources