How to use {{}} syntax in css file. Because I've a css file which refrences some background images.
....css code
background-image: url({{asset(assets/images/landing_page/index.png)}};
In the console it gives the following error:
127.0.0.1:8000/assets/images/landing_page/index.png 404 (Not Found)
it is not showing how can i refrence it with or without {{}} this syntax.
This should work.
background-image: url({{url('assets/images/landing_page/index.png')}});
Related
I'm using Tailwind CSS with PostCSS via Gulp. Just about everything works great. I'm trying to reference values from the config theme object in my CSS. I'm able to do the following just fine:
height: theme('spacing.12');
However, when I try to use theme() inside of calc() (just like in the documentation):
height: calc(100vh - theme('spacing.12'));
I get a Parse error from gulp-postcss ("Expecting 'SUB', 'LPAREN'....")
Is this a Tailwind bug?
It turns out it was an issue in my tool chain. Specifically, I was using the node package postcss-cssnext - which it turns out is deprecated. Once I removed this from my Gulp file, the error went away:
I've started Vim (v8) and have proper syntax highlighters in place for css3. I am using postcss plugin called precss to provide for "SASS" like syntax in my code.
However, when I used a nested selector with "&:last-child" or &:first-child, the syntax throws an error. It doesn't break the code or anything, but that "red" error is so distracting for me. Check the screen shot below.
Anyone can figure out how to make this error go?? I use a plugin called vim-css3-syntax and it includes scss syntax highlighting.
Edit: Got it fixed by downloading https://github.com/cakebaker/scss-syntax.vim and then adding au BufRead,BufNewFile *.css set filetype=scss.css
Thanks in advance.
The fact that you are using SCSS syntax (nested blocks, &, etc.) in CSS makes your CSS invalid.
If you want to avoid syntax errors you have two paths:
stop using SCSS syntax in your CSS files,
make sure your file is recognized as what it is: SCSS.
I would consider the first path to be the most sensible. After all who writes JavaScript in a *.rb file or SCSS in a *.css file? But if you choose the second you can simply do:
setf scss
--- edit ---
Suppose we have this code:
body {
background-color: white;
}
It's both valid CSS and valid SCSS because SCSS is a superset of CSS. Any valid CSS is automatically valid SCSS. Vim will happily display it without any error, no matter what file extension (*.css, *.scss) and filetype (css, scss).
Now, suppose we have this code:
body {
h1 {
background-color: $brand-1;
}
}
It's valid SCSS but not valid CSS. If you write that code in a *.css file with the css filetype, you get errors because it's not CSS. If you write that code in a *.scss file with the scss filetype you don't get errors because it's valid SCSS.
I have a line like the following in my .css:
background-image: url(#{resource['gfx/logos.png']}),url(#{resource['gfx/background.png']});
And the above code works perfectly, but NetBeans 4.0 marks lines with #{} code in them as errors. When I am using JSF that allows dynamic css, is there a way I can configure NetBeans to not consider these lines errors? When I do introduce an error it makes it easy for me to be unaware of the error because of these false errors.
Given the fact that this is actually a CSS validation error which is caused because the url() isn't in the right syntax for an URI, enclosing the entire EL expression in doublequotes should theoretically solve the problem.
Thus, so:
background-image:
url("#{resource['gfx/logos.png']}"),
url("#{resource['gfx/background.png']}");
I am experimenting with SASS and am trying to load a simple sytlesheet using scss in my sinatra application.
The route handler in main.rb is
get('/styles.css'){ scss :styles }
In the layout (using the slim view renderer), I am using the css file as:
link rel="stylesheet" href="/styles.css"
I've removed the stylesheet from public folder and created the styles.scss inside the views folder, but am unable to get the css file in the rendered page.
Solved the problem.
The main problem was that I had an error in the sass file which caused it to fail silently.
on searching for the generated css file at http://localhost:4567/styles.css, the error was reported. On a hover option, &:hover {
background: darken($background, 20%);
I had a $ in place of the '&' symbol.
Cakephp is giving me some problems as I have set as below (I have tried any number of urls, through localhost, placing it in webroot and giving reference from that file, giving full route from localhost (this is a local test ubuntu machine, not a 3rd party server), etc, etc but it just doesn't show up.. I am using a custom layout that overrides the default layout and, as far as I can tell, it contains no reference to any sort of background image.. here is from my css file:
body {
background-image: url('http://localhost/site1/app/webroot/img/bg1.jpg');
font-family:'lucida grande',verdana,helvetica,arial,sans-serif;
font-size:90%;
}
I have tested that this works fine with a regular HTML file, I am hoping someone has an idea of what cake is up to that is giving me this problem.. thanks
EDIT: I have tested and I can display exactly the same image within a DIV (as its background) from the same css file.. something in Cakephp is overriding the body background-image setting, but I can't figure out what.
Place images in webroot/img
Place CSS in webroot/css
Write relative paths to references images in CSS styles:
background: url('../img/imagename.png');
You spelling for background is wrong:
ackground-image: url('/root/Desktop/bg1.jpg');
If that is not the case in your actual code, make sure that you are specifying the correct path, try adding a dot before /root/
background-image: url('./root/Desktop/bg1.jpg');