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.
Related
Lets start out by saying that I am not great at writing CSS...so this may require some patience
I was following this tutorial: https://css-tricks.com/float-labels-css/
And it was my first time seeing CSS written with the following syntax:
form {
width: 320px;
float: left;
margin: 20px;
/* This is the part I am confused about */
> div {
position: relative;
overflow: hidden;
}
}
Maybe this is a stupid question, but is this the same as
form {
width: 320px;
float: left;
margin: 20px;
}
form > div {
position: relative;
overflow: hidden;
}
?
I am trying to utilize this syntax but I cannot quite figure it out. Can someone explain it to me please? :) Also, does this syntax have a name? I am having trouble even looking it up. Thank you!
Look for scss/sass. You will then write .scss files and then compile those to .css. You can simply install it via npm and then tell your IDE to automatically compile the files on save - or will have to make npm watch the files if you editor doesn't support it. But yeah, simply look for "how to install scss"
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.
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.
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.