config rb is running default values.
the folder structure is also the default one.
in my scss file i do.
#import "icons/*.png";
#mixin sprite_css($name) {
#include icons-sprite($name);
height: icons-sprite-height($name);
width: icons-sprite-width($name);
display:block;
}
.btn {#include sprite_css(deltag);} //deltag is the name of a png image in the sprite.
Prior to this i made a folder under the images folder, called icons
here i put all my png files in.
The generated css code looks like this.
.icons-sprite, .icons-deltag, .icons-deltag_grey, .icons-deltag_mouseover, .icons-facebook_del, .icons-faneblad, .icons-soegefelt, #container .btn, #container .btn_over {
background: url('/images/icons-s93e62b2fff.png') no-repeat;
}`
notice the background path is set without the trailing dots infront of images folder, so my CSSfile that is placed in the stylesheets folder is now looking for an image folder inside the stylesheets folder, so obviously the files are not loaded. I cant seem to change this anyway. changing config rb to relative_assets = true is not working.
I want the css file to point the sprint to.
background: url('../images/icons-s93e62b2fff.png') no-repeat;
that is the correct path, how can i achieve this?
The Compass config.rb file is loaded each time you run a Compass command. If you are running compass watch you must exit the process and then start it again in order to reload changes to the config.rb file.
Related
I'm a bit newer to sass, but when I was learning it the Sass website said to start using #use instead of import, so after a lot of trial and error I finally figured out how to use it pretty much the same as import.
Note: I'm using Prepros for compiling.
I have this mixin in it's own file inside of a mixins folder:
// scss/mixins/_flex.scss
#mixin flex($flex-flow: row, $justify-content: center, $align-items: center) {
display: flex;
justify-content: $justify-content;
align-items: $align-items;
flex-flow: $flex-flow;
}
I tried #useing it in my main _mixins.scss file:
// scss/_mixins.scss
#use "mixins/flex" as *;
Then I tried using it in another one of my files containing common elements:
// scss/_common_elements.scss
#use "mixins" as *;
.flex {
#include flex();
}
Then I receive the error inside of Prepros log: Undefined Mixin where I call the #include flex(); line (inside of _common_elements.scss)
It was working until I decided to put the mixins in their own separate folder, but this is the same as how it's setup inside of Bootstraps source code.
This whole process of using #use has been really confusing.
Does anyone know why I might be getting this error?
I managed to fix it!
ALSO: If you can help me edit this question / answer to better explain it with proper language, please post suggestions and I'll update it.
In the _mixins.scss file I needed to use #forward "mixins/flex" instead of #use "mixins/flex" as *;:
Like this:
// scss/_mixins.scss
#forward "mixins/flex";
#forward "mixins/overlay";
#forward "mixins/etc...";
I wish they would've made this something more clear on the actual sass #use documentation.
Here are the actual docs to #forward.
to use #use command and other new features of sass, you need to install dart sass, and not node-sass;
https://www.npmjs.com/package/sass
I'm using SASS sprites: http://compass-style.org/help/tutorials/spriting/
'channel' is the folder name in 'images' that contains my images to be sprited. The following does create an image sprite:
#import "compass/utilities/sprites";
#import "channel/*.png";
#include all-channel-sprites;
However the image path in the CSS is slightly wrong. Its output is this:
background-image: url('/images/channel-s78ec12c377.png')
But I actually need this:
background-image: url('../images/channel-s78ec12c377.png')
I've tried changing my import to this but it throws an error:
#import "../channel/*.png";
Turns out it was to do with the config.rb file. It needed this line:
relative_assets = true
I want to use #import in my scss file. It was working okay, but now I do #import "vars"; (I have _vars.scss file in the same dir) and Prepros returns error saying such file doesn't exists. What is wrong?
style.scss:
body {
background: white
}
#import "vars";
_vars.scss:
$grey: #777;
$violet: #490a3d;
$text: #414141;
$separator: #d6d8d8;
$title: #0d0d0d;
$white: #fff;
I solved it. Problem was with Prepros (too bad, it's a great piece of software). It turned out,my directory name was the cause of all this. It was named [projects], since I keep there all my "temp" stuff. I moved the files to other directory and it works great.
I've just started with sass today and hit my first roadblock. I don't know how to use font-face inside my scss files. Here's what I've tried, inside my app.scss file:
//do I need this line? I have installed compass
#import "compass/css3";
#include font-face("myfont", font-files("myfont.eot", "myfont.woff", "myfont.ttf", "myfont.svg#myfont"));
And this is what I get rendered:
#font-face {
font-family: "myfont";
src: url('/assets/css/fonts/myfont.eot') format('embedded-opentype'), url('/assets/css/fonts/myfont.woff') format('woff'), url('/assets/css/fonts/myfont.ttf') format('truetype'), url('/assets/css/fonts/myfont.svg#myfont') format('svg');
}
My config.rb file:
http_path = "/"
css_dir = "assets/css"
sass_dir = "assets/sass"
images_dir = "assets/img"
javascripts_dir = "assets/js"
fonts_dir = "assets/fonts"
And my right now my file structure is this www.mydomain.com/nameofmyproject and inside I have a folder called assets that contains css, sass, img, fonts, js folders
EDIT: Since this seems to be an issue with the paths I will edit my question. I'm working on a subdirectory here and firebug shows me a 404 for my font files, with the following url: www.mydomain.com/assets/css/fonts So it's both ignoring that I'm on a subdirectory and that I changed my fonts_dir to be inside assets and it goes to the default, inside the css directory.
When updating your config.rb file, You have to restart compass watch. Took me hours to figure that out. Hope this helps someone.
Yeah my problem was a mix of issues, not restarting compass watch was not helping me debug the problem correctly and having a messed up installation was the problem at hand. I reinstalled and then started from scratch and it ended working just fine.
In the scss of RefineryCMS gem, they are targeting an image for background like this:
body {
min-height: 100%;
margin: 0;
padding: 0;
font-size: 10px;
font-family: Verdana;
line-height: 1.5em;
background: #303030 image_url('refinery/page_bg.png') repeat;
}
And when is compiled, it will be like this:
background: #303030 image_url('refinery/page_bg.png') repeat;
But, page_bg.png is in the assets folder: assets/refinery/page_bg.png
If I try www.mydomain.com/assets/refinery/page_bg.png I can see the image
So, image_url('refinery/page_bg.png') in the compiled scss is missing the prefix assets/
How can I fix this?
I tried to create a folder in public folder named refinery and put page_bg.png inside it, but, I didn't work, and www.mydomain.com/refinery/page_bg.png won't show the image .
Is there a solution for this? any one can help? fixing the assets prefix is of course better, but, I don't mind using the public folder directly ..
The asset-pipeline config defines some directories as asset directories . This means the reference to the content in asset directories is without assets in front. For example , in most default configs the asset directories are : app/assets , lib/assets and vendor/assets . You can place your .png background image in each of their subfolders with the name image and refer to it just like this : background: url(your_image.png) .
EDIT : According to this discussion, if deploying to Hiroku , there should be sass-rails included in the process of assets precompilation .