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
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 Bulma with Webpack 4. I'm trying to change the colour of button.is-primary to be pink instead of turquoise.
Here's the entire contents of my .scss file.
#charset "utf-8";
#import url('https://fonts.googleapis.com/css?family=Poppins:600');
$body-size: 14px;
$primary: $pink;
#import "../../node_modules/bulma/bulma.sass";
This is getting me the following error on build.
1>Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
1>
1>$primary: $pink;
1> ^
1> Undefined variable: "$pink".
Now, if I set $primary to be a specific hex colour it builds fine, so this issue seems to be because I'm trying to use the existing colour variable $pink. It does make sense to me that it hasn't been defined at that point, but the docs clearly say that I can add my overrides before importing Bulma, and their example does the same thing.
Can anyone point me in the right direction?
EDIT: here's the documentation screen I'm looking at.
https://bulma.io/documentation/customize/with-webpack/
I note that in their example they do set new values for derived variables BUT only where they've redefined the intial value, like this...
$pink: #FA7C91;
If I change my .scss file as follows it does then compile and work as expected.
#charset "utf-8";
#import url('https://fonts.googleapis.com/css?family=Poppins:600');
$body-size: 14px;
$pink: #FA7C91;
$primary: $pink;
#import "../../node_modules/bulma/bulma.sass";
This should clarify things for you: https://versions.bulma.io/0.7.0/documentation/overview/customize/
// 1. Import the initial variables
#import "../sass/utilities/initial-variables";
// 2. Set your own initial variables (optional)
$pink: #ffb3b3;
// 3. Set the derived variables
// Use the new pink as the primary color
$primary: $pink;
In my case, I forgot that I was importing Bulma via its compiled .css file.
Of course, you cannot override the Sass variables that way because after compilation they don't exist. To override Bulma's variables you need to import its .sass file(s), not its .css file.
Sharing in case anyone else makes the same mistake.
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 been messing around with Compass, using the Scout GUI, for a day now and sprites are driving me crazy.
Compass is creating the sprite but it seems the CSS is pointing to the wrong place.
The import statement looks like:
#import "images/icon/*.png";
And, here's how I'm calling it:
h1{
#include icon-sprite("social");
The link that is getting created in the CSS is:
http://localhost/images/icon-s25f42076dc.png
I would like it to be:
http://localhost/compass/images/icon-s25f42076dc.png
This is my config.rb:
http_path = ""
css_dir = "css"
sass_dir = "scss"
images_dir = "images"
relative_assets = true
Change 'relative_assets' to false.
Figured it out:
Import path needs to be
#import "../compass/images/icon/*.png";
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.