I'm a bit confused with the following errors. I have no experience with SCSS.. it's a file a subcontracting front-end designer company gave us.
I am attempting to compile using KOALA that seemed to be an easy open source free windows sass compiler.
Errors:
assets\sass\main.scss
Error: Invalid CSS after "&:not(": expected ")", was "'.full')"
on line 23 of assets/sass/components/_last-update.scss
from line 13 of assets/sass/_components.scss
from line 8 of assets\sass\main.scss
Use --trace for backtrace.
The specific code causing the error seems to be:
#media (min-width: $bp-medium) {
&:not('.full') { max-width: 60%; }
margin-bottom: $vertical-spacing-medium;
}
Specifically:
&:not('.full') { max-width: 60%; }
I tried removing that part all together and it seems to work but I havn't understood yet the SCSS/SASS syntax and why it would not be working. I've only been explosed to this language for 30' now.
I think the problem are the hypens in the selector. e.g.
&:not('.full') { max-width: 60%; }
should become
&:not(.full) { max-width: 60%; }
as defined by the specification: https://developer.mozilla.org/de/docs/Web/CSS/:not
Related
I'm relatively new to less and I have this less code which I want to compile down to css (the .song block specifically). I'm learning through a course.
Less code:
#breakpoints: {
desktop: 989px;
tablet: 767px;
phone: 480px;
};
#media only screen and (min-width: #breakpoints[desktop]) {
#minWidth: #breakpoints[desktop];
.container {
width: #minWidth;
}
/*Division*/
.song {
width: #breakpoints[desktop] / 3;
}
/*With ceil function*/
.song {
width: ceil(#breakpoints[desktop] / 3);
}
}
When I divide the number, it doesn't give an error but doesn't work as intended.
Instructors css output:
.song {
width: 329.66666667px;
}
My own css output:
.song {
width: 989px / 3;
}
When I'm using a math function like ceil, it gives an error:
Instructors css output:
.song {
width: 330px;
}
My own result (error):
ArgumentError: Error evaluating function ceil: argument must be a number
I have knowledge of javascript so I get what the error means. What I don't understand is how, for the same code I wrote above, the instructor's code compiled fine but mine doesn't. I tried browsing but I haven't gotten any answer that addresses this issue. The instructor used lessc version 3.8.1, I'm using lessc version 4.1.0. Any help will be really appreciated. Thanks.
I've been able to get the calculation to work by inserting the expressions in parenthesis like so:
Division:
.song {
width: (#breakpoints[desktop] / 3);
}
Ceil function:
.song {
width: ceil((#breakpoints[desktop] / 3));
}
Got answer at github issue/thread from this particular comment.
My CSS sheet is required to reset some Bootstrap 3 preset values to make my desired style, thus I need utility classes like .m-b-0 which set margin-bottom:0px.
But Less compiler I was using in grunt wont recognize classes .m-b-0 generated by loop when I nested them in other class, but classes like .m-b-1 and .m-b-10 will be recognized correctly.
The loop code in my Less files is like this:
.m-loop (#i) when (#i <= #iterations) {
.m-#{i}{
margin: ~"#{i}px";
}
.m-h-#{i}{
margin-left: ~"#{i}px";
margin-right: ~"#{i}px";
}
.m-v-#{i}{
margin-top: ~"#{i}px";
margin-bottom: ~"#{i}px";
}
.m-l-#{i}{
margin-left: ~"#{i}px";
}
.m-r-#{i}{
margin-right: ~"#{i}px";
}
.m-t-#{i}{
margin-top: ~"#{i}px";
}
.m-b-#{i}{
margin-bottom: ~"#{i}px";
}
.m-loop(#i + 1);
}
.m-loop(0);
and I use the classes supposed to be generated in the same less file like this:
.panel{
.m-b-0;
}
Then my compiler throwed
Running "less:production" (less) task
>> NameError: .m-b-0 is undefined in ../css/less/stylesheet.less on line 237, column 3:
>> 236 div.panel{
>> 237 .m-b-0;
>> 238 }
Warning: Error compiling ../css/less/stylesheet.less Used --force, continuing.
Is this forbidden to use zero valued iterator in Less compiling or where did I take it wrong? Thanks!
Looks like there might be a syntax error. I don't see an opening brace on this line:
.m-t-#{i}
See if that helps.
I have a sass file:
sitemap.scss
It contains only the following (for now):
.hero {
height: 600px;
background: none;
}
I'm using gulp-sass which has, up until now, compiled my sass perfectly fine.
The output error when compiling this file reads as such:
Error in plugin 'gulp-sass'
Message:
assets/styles/source/components/sub-pages/sitemap.scss
Error: Invalid CSS after ".hero {": expected "}", was "{"
on line 1 of assets/styles/source/components/sub-pages/sitemap.scss
>> .hero { {
-------^
Details:
formatted: Error: Invalid CSS after ".hero {": expected "}", was "{"
on line 1 of assets/styles/source/components/sub-pages/sitemap.scss
>> .hero { {
-------^
column: 8
line: 1
file: /Users/dvasquez/Sites/workspace/Development/branch3/site.com/assets/styles/source/components/sub-pages/sitemap.scss
status: 1
messageFormatted: assets/styles/source/components/sub-pages/sitemap.scss
Error: Invalid CSS after ".hero {": expected "}", was "{"
on line 1 of assets/styles/source/components/sub-pages/sitemap.scss
>> .hero { {
-------^
messageOriginal: Invalid CSS after ".hero {": expected "}", was "{"
relativePath: assets/styles/source/components/sub-pages/sitemap.scss
Now here's where it gets odd. If I take that same sass file, and write it like this:
.hero { height: 600px; background: none; }
It compiles just fine.
I assumed this might be an encoding issue of some sort, so I deleted the file and created a fresh one. Same issue. Has anyone encountered anything like this before? I have many other sass files in my project and none of them exhibit this behavior.
Also, in addition to this, I also tried importing a partial which included the 4-line version of the file and that worked just fine as well.
Any ideas would be greatly appreciated.
As mentioned in #rachel's comment above, try setting indentedSyntax: false in your gulp-sass configuration. I had the exact same errors and this worked for me!
"sass": {
"indentedSyntax": false, //Set to false to allow standard SCSS syntax using braces.
"includePaths": [
"./node_modules/normalize.css"
]
}
Laravel Mix
To expand on Grant K Norwood's answer, if you're using Laravel mix, you'll want to pass the indented style in as a property of the third parameter, like so:
mix.sass('input.sass', 'output.css', {
sassOptions: {
indentedSyntax: false
}
});
docs: https://laravel.com/docs/6.x/mix#sass
I have a media queries in less file, code:
#phoneMin: 0px;
#tabletMin: 768px;
#smallDesktopMin: 992px;
#phoneMax: (#tabletMin - 1);
#tabletMax: (#smallDesktopMin - 1);
#atLeastTablet: ~"only screen and (min-width: #{tabletMin})";
When I #import this file into another less file and utilize my media queries like so:
.container {
#media #atLeastTablet {
margin-top: 160px;
}
}
Not only does the media query just not work, but it also doesn't seem to compile into the resulting css file, which reads like this:
.container {
margin-top: 160px;
}
EDIT I attempted to run my server and I'm now getting the following error message: "Unexpected token(1:0)" referring to the first character (period) in one of my less files:
.blogPost {
^ .logo {
}
}
The error is being thrown during the babel 6 compilation process. Here is the stack trace:
at Parser.pp.raise (/usr/local/lib/node_modules/babel-cli/node_modules/babylon/lib/parser/location.js:22:13)
at Parser.pp.unexpected (/usr/local/lib/node_modules/babel-cli/node_modules/babylon/lib/parser/util.js:91:8)
at Parser.pp.parseExprAtom (/usr/local/lib/node_modules/babel-cli/node_modules/babylon/lib/parser/expression.js:510:12)
at Parser.<anonymous> (/usr/local/lib/node_modules/babel-cli/node_modules/babylon/lib/plugins/jsx/index.js:404:22)
at Parser.parseExprAtom (/usr/local/lib/node_modules/babel-cli/node_modules/babylon/lib/plugins/jsx/index.js:404:22)
at Parser.pp.parseExprSubscripts (/usr/local/lib/node_modules/babel-cli/node_modules/babylon/lib/parser/expression.js:265:19)
at Parser.pp.parseMaybeUnary (/usr/local/lib/node_modules/babel-cli/node_modules/babylon/lib/parser/expression.js:245:19)
at Parser.pp.parseExprOps (/usr/local/lib/node_modules/babel-cli/node_modules/babylon/lib/parser/expression.js:176:19)
at Parser.pp.parseMaybeConditional (/usr/local/lib/node_modules/babel-cli/node_modules/babylon/lib/parser/expression.js:158:19)
at Parser.pp.parseMaybeAssign (/usr/local/lib/node_modules/babel-cli/node_modules/babylon/lib/parser/expression.js:121:19)
It turns out the issue is in trying to import my less in a subscript vs my webpack entry point. Moving the import here fixed the issue.
I want to have one variable that contains the root path to all my images in my CSS file. I can't quite figure out if this is possible in pure Sass (the actual web project is not RoR, so can't use asset_pipeline or any of that fancy jazz).
Here's my example that doesn't work. On compile it balks at first instance of variable in the background url property saying ("Invalid CSS after "..site/background": expected ")").
Defining the function to return the path:
//Vars
$assetPath : "/assets/images";
//Functions
#function get-path-to-assets($assetPath){
#return $assetPath;
}
Using the function:
body {
margin: 0 auto;
background: url($get-path-to-assets/site/background.jpg) repeat-x fixed 0 0;
width: 100%; }
Any help would be appreciated.
Have you tried the Interpolation syntax?
background: url(#{$get-path-to-assets}/site/background.jpg) repeat-x fixed 0 0;
No need for a function:
$assetPath : "/assets/images";
...
body {
margin: 0 auto;
background: url(#{$assetPath}/site/background.jpg) repeat-x fixed 0 0;
width: 100%; }
See the interpolation docs for details.
Was searching around for an answer to the same question, but think I found a better solution: http://blog.grayghostvisuals.com/compass/image-url/
Basically, you can set your image path in config.rb and you use the image-url() helper
Adding something to the above correct answers. I am using netbeans IDE and it shows error while using url(#{$assetPath}/site/background.jpg) this method. It was just netbeans error and no error in sass compiling. But this error break code formatting in netbeans and code become ugly. But when I use it inside quotes like below, it show wonder!
url("#{$assetPath}/site/background.jpg")
We can use relative path instead of absolute path:
$assetPath: '~src/assets/images/';
$logo-img: '#{$assetPath}logo.png';
#mixin logo {
background-image: url(#{$logo-img});
}
.logo {
max-width: 65px;
#include logo;
}