How do I pass layout into my sprites calling them like this?
$sprite-global : sprite-map(
"sprites/global/*.png",
$sprite-global-layout: smart
);
That $sprite-global-layout: smart is completely ignored.
According to documentation, it should be applied like this:
$sprite-global-layout: smart;
$sprite-global: sprite-map("sprites/global/*.png");
So, apparently the directory doesn't get appended to the name for the layout variable, so this does in fact work:
$global-layout: smart;
#import "sprites/global/*.png";
Also, there might be issues using sprite maps instead of the #import to set them up; see https://github.com/chriseppstein/compass/issues/1024
I was able to get this to work by inserting them as variables:
$sprites: sprite-map("sprites/*.png", $layout: vertical, $spacing:20px);
Related
I have an extension of Color that stores a colour variable. I am currently using this to set the main colour for the whole app, which currently works.
extension Color{ static var colour: Color = Color.red }
If I set it to red everything turns red. But at the moment I have to hard code what colour it will be. I want to be able to modify this colour during runtime.
I have tried to modify the extension at runtime but I can’t seem to get it working and I’m not sure if it allows you to do this. I’m not sure the best way to approach this.
If anyone has anyway of changing the variable in an extension that would be ideal but if there’s another way, any help would be greatly appreciated. If you have any questions or I haven’t explained something clearly ask away.
Thanks so much
In SCSS, is there a way to output only styles that use certain variables?
I have color variables all in one file, but they are used all over the stylesheet. Now I want to add a different color theme without duplicating all the styles unrelated to color, is that possible?
It's not that easy (and quite error prone) to determine usage of certain variables for output. You could check if they are defined using #if($x) but that might not be what you're looking for.
But I don't think I fully understand what you're trying to achieve...
Is it:
white labeling your app/site (so 'overriding' the original values with new values)?
Having two separate 'themes' exist on their own (unique variables) but avoiding conflicts that might happen due to overlapping styles?
For:
Redefine the variables, given this line: $x = 1; $x = 2; z-index:$x; the z-index will be 2. So something like: #import 'base-theme'; #import 'client-theme' would override every existing variable with the value from client-theme which would mean zero rewrites of existing styles (and only one extra file with the new theme).
You will need to add logic for this, so rewriting styles will be a likely outcome. something like #if($hotpink) { color:$hotpink } #else { color:$original-pink} should work for those, but it will be cumbersome and quite hard to maintain.
My recommendation (for most use-cases): Go with option #1, it will save you a lot of work and debugging.
Hope that helps, feel free to ask if this seems unclear.
I am adding a custom font in my project when I am adding this font using normal CSS that time it's working but when I am using this font in SCSS processor CSS that time it's not working.
I am sharing the screen shot of file and console error.
I do not find where I am doing wrong. Please resolve my problem.
The message is pretty much self-explanatory. The issue is you are using = instead of a : to assign the value to the variable. It should be
$roboto-Regular: 'robotoregular';
Don't be so specific with the variable names, variables are meant to hold dynamic data. If tomorrow, you change the font to some other font, using roboto-Regular as the variable name would make no sense. You should use something like
$base-font: 'robotoregular';
$fallback-font: 'Arial';
font-family: $base-font, $fallback-font;
I have a plasmoid-application which utilises an objects of the Plasma::TextEdit class. And now I could to colorize a text in this objects. I had tried to do this:
m_text->nativeWidget()->setHtml("<font color=\"#777777\">some text</font><br/>other text");
with a couple of variants (like using the span tag with the stile attribute instead of the font, using the red color name instead the #777777), but result was the same.
Any ideas?
It looks like the "bug" was not in the programming: it turns out that there was need to restart the KDE.
Does anybody know why this happens? And what may I do to "flush" some cache or something else in order that the KDE picks a new version of my plasmoid up?
I'm using Compass/Susy for the first time. I'm having an issue when using the #include container mixin. It's automatically applying a clearfix to it. This is not desired. Is there a way to turn this off, or override it?
Yes, you can fork the source of susy and change this file:
https://github.com/ericam/susy/blob/master/sass/susy/_grid.scss
It looks like the pie-clearfix is applied in this mixin: #mixin apply-container
There might be a way to over-write mixins... Or just make another one that is similar to this one - and call that instead.