I am getting an error while transpiling sass to css, "Line X: Inconsistent indentation: Y spaces were used for indentation, but the rest of the document was indented !Y spaces"
Here is the error state of my sass code:
header
{
margin: 50px;
background-color: #2aa4df;
div
{
}
p
{
margin-top: 0;
}
}
As you can see, near the p style rule I have used a different indentation which produces the error. What I'm wanting to know is why indention is important from a compiler perspective
Indentations errors are not related to sass transpiler, the sass transpiler never mind converting unindented source code. You can try this - https://www.sassmeister.com/ and paste your above code. It works perfectly without any error.
I think there is some css lint setting which is not allowing that indentation and due to that, you are getting those error. Please look for lint settings in your project.
Related
so iv'e started learning sass and i'm now in a spot when i added a class to my html (.circle)
and my sass file is already linked to my css file.
when i typed .circle to my sass file and tried to give him a color i incountred in the next error:
This selector doesn't have any properties and will not be rendered.
error styles.sass (Line 6: Properties are only allowed within rules, directives, mixin includes, or other properties.)
my sass file is really simple by now as i try to play with it:
body
background-color: cadetblue
.circle
color: red
as i said when reaching the .circle i get the error. any ideas?
i used the sass --watch command and i use ruby devkit 2.6.5-1
thanks for helping! im new so i try my best
It seems like the syntax is not correct. Try this instead (remark the indentation on color property):
body
background-color: cadetblue
.circle
color: red
More info about Sass syntax : https://sass-lang.com/documentation/syntax#the-indented-syntax
In my scss file I am importing a third-party css file
#import 'icons/third-party-icons/style';
Unfortunately, this style is missing the value for the color style
.mySelector {
content: "\eac2";
margin-left: -1em;
color: ;
}
As expected, node-sass is throwing the following error:
ModuleBuildError: Module build failed (from
./node_modules/sass-loader/lib/loader.js):
color: ;
^
Style declaration must contain a value
Is there any way to configure node-sass to ignore this invalid property?
In my opinion, that error report is there for a reason, you shouldn't have empty definitions as that is technically an error. In unminified CSS you wouldn't have an issue it would just appear as strikethrough in the element inspector in the browser, but in this case you break the minify process.
Instead of importing it you can download the CSS code if possible and save it in your project locally then solve the issues manually. It won't matter what you do later in your CSS file, the error will appear. Or else you can try to link the CSS in the header. If you are using PHP or similar serverside scripting then create a separate header.php (for example) and include it into every file. This way you will need to copy and paste the link once and you can access the style at every page.
You could override the imported css. The code is looking to use a value, but can't because it's null.
You could include in your style tags:
.mySelector {
color: black !important;
}
That !important will override whatever is imported from the stylesheet, and you class in the body will use that color instead of trying to use the null color.
I've set a class on the body tag, called container and then in my CSS, I've tried using both body.container and simply .container. and yet whatever happens them image is not shown as the body background.
The browsers show clearly in their inspector that it isn't being applied. Weirdly, in Firefox, it shows a red dot next to the beginning of the rule which suggest there's something wrong and you can delete this dot, which makes the rule work and apply correctly.
I'm actually writing pre-processed SASS which is pre-compiled by Rails and weirdly again, running locally where it's compiled on the fly rather than pre-compiled, it works...
Here's a short snippet from the original SCSS file:
body.container {
background: url('background.jpg');
background-size: auto 110%;
background-repeat: no-repeat;
background-attachment: fixed;
font-family: "Tahoma";
.personalization_box {
position: absolute;
}
...
}
And here's a snippet of the output CSS:
#safari_rememberDiv{width:0px;height:0px;display:none}body.container{background:url("background.jpg");background-size:auto 110%;background-repeat:no-repeat;background-attachment:fixed;font-family:"Tahoma"}body.container .personalization_box{position:absolute;top:5%;width:80%;left:10%;height:90%;border-radius:15px;border:2px solid #5B5B5B;background-color:#FFF;overflow:hidden}
I get the following error on CSS validation:
#safari_rememberDiv Lexical error at line 1, column 1010. Encountered: "\ufeff" (65279), after : "" }body.container{background:url("background.jpg");background-size:auto 110%;background-repeat:no-repeat;background-attachment:fixed;font-family:"Tahoma"}
[It's all on one line because it's generated by Rails that way, I can split it into multiple lines for clarity if that helps].
I've resolved the issue and found the cause of the issue.
The two different .scss files pre-processed by SASS within Rails were in different character encodings, which led the pre-compiler to insert a UTF-8 BOM, the red dot, described by \ufeff. By changing the file encoding of this file to ISO-8859-1 (matching the other file) and hence removing some special quote marks later in my CSS (which were inserted using element::before and content:), I was able to resolve the issue.
I am using recess (https://github.com/twitter/recess) to compress the CSS file
div {
color: red
border: 1px solid red
}
p {
color: blue
}
# recess test.css --compress (No output)
As you can see, there is missing colon in the CSS file so recess failed to output anything, but in a real browser it is perfactly ok if only part of the CSS contains error
e.g.
http://jsfiddle.net/VDQLU/ (see the bule color in p, not affecting by error above)
Q. Are there any way to compress the file anyway with recess? Or using other tool?
The reason recess fails, is because that is invalid css. (You probably know that). And the reason it works anyway on the browser you use, is because browsers assume some web developers just wont use correct syntax and also they want to be compatible with legacy websites, not because the semicolons are optional on css, or because css parsers are supposed to have a quirks mode!.
I would use a sed line to clean the css file, and from now on, use correct css code. Here is an example sed line: (backup your css file first!)
sed -i '/{/,/}/ { /[}{]/ !{ /\/\*.*[^(\*\/\t )][\t ]*$/,/\*\// !{ s/\([^(\*\/);\t ]\)[\t ]*$/\1;/ }}}' yourcssfile.css
This sed line will:
Add ;, only to the lines that end without semicolons; that is, if you do have some lines that end with semicolons, you wont end with two semicolons one after another (like ;;)
Check also for commented lines, be on one line like: /* some comment */, or multiple lines.
That does NOT mean the change is automagically done flawlessly; you would probably have to do some manual fixing (and perhaps manual hacking the sed line), but if your css file looks like your example, it should work almost perfect.
Any sort of CSS compression will remove line breaks from your CSS.
Though a browser may understand your code now, without line breaks to help it process the incorrect code, it would just have a single string.
Any compressor that did compress that code wouldn't be doing you any favours as it almost certainly wouldn't be understood by any browser once the line breaks were removed.
Please use the div style like this.
div {color: red;border:solid red;}
its a good solution for your result.
I would like to have the following structure:
sass: rule //coment
But comments with // seems to be accepted only on new lines.
Is there a way to comment a sass rule in the same line the rule is?
The alternative way of writing comments is like this:
/* comment text here */
Be aware that this type of comment will be preserved in your generated css though, unless you use the compressed option.
Yes you can. But only on new lines, or after a property:value pair. Perhaps an obscure bug, but they can break on compile if added after a selector. This May be fixed in a more recent version of SASS, so if you're having compile problems with comments, check the positioning as stated below (or update your version).
i.e.
// This works
.myclass
width: 30px //comment
// This breaks for some on compile
.myclass //comment
width: 30px
// This style is sass only and won't be compiled/output in the final css file
/* this style will be seen in final css file as a normal css comment */