I've just been following the Sass tutorial. For some reason though the Sass file is not correctly generating the css. The terminal says the css is invalid but I'm pretty sure it's not. I've tried changing it too just in case there was a problem...
What have I done wrong?
Sass Version: Sass 3.1.10
Error message:
error sass/test.sass (Line 3: Invalid CSS after "80%":
expected expression (e.g. 1px, bold), was ";")
.sass file contents:
/* style.scss */
#navbar {
width: 80%;
height: 23px;
}
Based on your error message (error sass/test.sass) I can tell you're using the .sass extension for a Scss file. Change your file name to style.scss.
Sass and Scss use two different and incompatible syntaxes.
Try either:
/* style.scss */
#navbar {
width: 80%;
height: 23px;
}
Or:
/* style.sass */
#navbar
width: 80%
height: 23px
Note the difference in file extension and syntax.
Related
Is there something about #media queries that I'm missing because I keep seeing the following compilation error from my SCSS file:
Error: Invalid CSS after "}": expected 1 selector or at-rule, was ""
on line 584 of site/assets/scss/_custom-styles.scss
>> }
I have placed my media query between 2 normal CSS styles. Is this ok. Why am i seeing this error:
.homeDivParent {
height:100%;
background-image: url("/assets/479305270.jpg");
background-position: 20% 0%;
background-color: #fafafa;
//background-size: cover;
}
#media (min-width:1400px) {
.homeDivParent {
background-size: cover;
}
}
.whiteFont {
//background-color: rgba(255,255,255,0.1);
color: white;
font-family: 'AbMedium';
}
if saving your .scss too fast, you could miss compiling your sass code repeatedly, so the .css file will be storing the previous compiled styles.
If you find it happening, just make a brief change and save again, check if changed.
ps. I can't comment due my yet low reputation, but I do hope it would be useful in the future.
I have the following piece of code in my .scss file:
.navbar {
min-height: 30px;
&-nav{
li{
a {
padding-top: 5px;
padding-bottom: 5px;
}
}
}
}
It is generating the following error:
Syntax error: Invalid CSS after " &:" expected "{", was "-nav{"
Basically, I want my resulting selector to be .navbar-nav, can anyone let me know how to implement this in Sass 3.4.22
Remove the brackets and semicolons and use indentation:
.navbar
min-height: 30px
&-nav
li
a
padding-top: 5px
padding-bottom: 5px
From RubyDoc:
Sass has two syntaxes. The new main syntax (as of Sass 3) is known as
"SCSS" (for "Sassy CSS"), and is a superset of CSS's syntax. This
means that every valid CSS stylesheet is valid SCSS as well. SCSS
files use the extension .scss.
The second, older syntax is known as the indented syntax (or just
"Sass"). Inspired by Haml's terseness, it's intended for people who
prefer conciseness over similarity to CSS. Instead of brackets and
semicolons, it uses the indentation of lines to specify blocks.
Although no longer the primary syntax, the indented syntax will
continue to be supported. Files in the indented syntax use the
extension .sass.
If you put your example to http://www.sassmeister.com/ it works as expected. They're using v3.4.21.
Maybe try wrapping the & symbol with interpolation helpers #{&}:
.navbar {
min-height: 30px;
#{&}-nav {
li{
a {
padding-top: 5px;
padding-bottom: 5px;
}
}
}
}
It should produce the same result.
What's the best approach to getting Sass (3.4.15) to parse browser CSS property hacks - not using compass or any other library. E.g. '_property' or '*property'.
.hack-test{
display: inline-block;
display: *inline;
}
Invalid CSS after " display: ": expected expression (e.g. 1px, bold), was "*inline;"
I searched around Stack Overflow but could not find anything that could definitively answer this.
You can use sass strings, in such a way that the invalid css is injected as a string.
I put it all inside a mixin for re-use:
$star: "*inline";
#mixin hack-test($selector) {
#{$selector} {
display: inline-block;
display: #{$star};
}
}
So if you try and use the mixin:
#include hack-test('.foo');
The css output will be as desired:
.foo {
display: inline-block;
display: *inline;
}
You can view some SCSS browser hacks I've put on Github here
I don't understnad the compile error of the code pen
What is wrong here, how to make it the right way?
SASS
.box{
width: 400px;
height: 100px;
background: red;
}
You need to set the CodePen up to use .scss syntax instead of .sass syntax. If you do that, it works.
The .sass syntax is not CSS-compatible.
I've just been following the Sass tutorial. For some reason though the Sass file is not correctly generating the css. The terminal says the css is invalid but I'm pretty sure it's not. I've tried changing it too just in case there was a problem...
What have I done wrong?
Sass Version: Sass 3.1.10
Error message:
error sass/test.sass (Line 3: Invalid CSS after "80%":
expected expression (e.g. 1px, bold), was ";")
.sass file contents:
/* style.scss */
#navbar {
width: 80%;
height: 23px;
}
Based on your error message (error sass/test.sass) I can tell you're using the .sass extension for a Scss file. Change your file name to style.scss.
Sass and Scss use two different and incompatible syntaxes.
Try either:
/* style.scss */
#navbar {
width: 80%;
height: 23px;
}
Or:
/* style.sass */
#navbar
width: 80%
height: 23px
Note the difference in file extension and syntax.