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.
Related
I've given up with this one, and I don't know where I did wrong.
this is the SCSS
div#home {
background-image: url(/assets/bg/home.jpg);
background-size: cover;
.limiter {
margin-top: $NAVBAR_BODY_START;
}
}
This is the resulting CSS. Take note that div#home are compiled succesfully, along with .limiter class below.
And this is what Chrome rendered. I've tested with Edge, and it was also failed.
Interesting part is that .limiter class inside div#home works. But not div#home where it is nested.
Any idea where it goes wrong?
I think background-image: url(/assets/bg/home.jpg); should be background-image: url("/assets/bg/home.jpg"). Can you give it a try?
Under div#content there seem to be 2 stray styles that don't seem to belong anywhere.
/* ... */
line-height: 1.5em;
font-size: 2vmin;
/* ... */
This may indicate a syntax issue with the 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.
Edge doesn't support styling above this section (no support for clip-path current) so to fix the styling I am trying to write Edge specific CSS.
I'm using LESS and I get an error when I try to to compile because it thinks that #supports is a LESS function. LESS will however recognise that #media is the CSS method.
My question is, how do I make the following code work with LESS or is there a better way to write Edge only CSS
#supports (-ms-ime-align:auto) {
.section {
padding-top: 0px !important;
}
}
UPDATE:
The issue appears to be with Visual Studios LESS compiler not recognising #supports
You are hopefully long-done with this project, but you can force LESS to not pre-process with the tilde and single quotes:
#supports ~'(-ms-ime-align:auto)' {
.section {
padding-top: 0px !important;
}
}
This renders to css as intended using the current Visual Studio 2019 - Web Compiler
I think less, at least for the version I am working on, cannot render #support tag inside a hierarchy.
So I struggled to make something like this work:
#header {
// some CSS...
#supports (-webkit-mask-image: url()) or (mask-image: url()) {
i {
-webkit-mask-size: cover;
mask-size: cover;
}
}
}
And finally, I make it by moving the whole hierarchy inside #support tag like this. A bit of repetition, yet it will do.
#header {
// some CSS...
}
#supports (-webkit-mask-image: url()) or (mask-image: url()) {
#header {
i {
-webkit-mask-size: cover;
mask-size: cover;
}
}
}
I need to make a website responsive built in 2012. I'm editing the style.css file (Wordpress website) but the media query doesn't work for some reason. Already checked the css file online, and the media query is in it.
The website I'm talking about is www.carter-realestate.be
There is nothing wrong with the media query, I've done this a hundred times before.
The style.css file with the media query is online, so you can check it out.
Anybody knows an explanation for this?
You need to add a space between "and" and "("
#media screen and (max-width: 900px){
Trying changing it to:
#media only screen and(max-width: 900px){
body{
background-color: red !important;
color: blue;
}
h1{
font-size: 15em;
}
}
There's some script on your page that's re-writing the #media rules.
Looking at your source code in style.csss I see:
#media all and(max-width: 900px){
body{
background-color: red !important;
color: blue;
}
h1{
font-size: 15em;
}
}
But checking it out in Firebug (via Firefox) I see the code changed in the DOM to:
#media not all {
body {
background-color: #FF0000 !important;
color: #0000FF;
}
h1 {
font-size: 15em;
}
}
Somewhere a script is re-writing the #media rules to "not all".
Try disabling all scripts in the WordPress plugin and refresh the page. If that doesn't work, edit the HTML and comment out any remaining scripts loading. Then add a script or plugin back in one by one until you find which is re-writing the DOM.
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.