I am a newbie in Sass / Compass. I tried to generate sprites, it works without any problems.
I cant find how to generate two sprite layouts from one folder with images. I dont want to create 2 folders with the same content (duplicate images only because of 2 or more different sprites layouts).
It is possible to do this?
my code generate one group of sprites (diagonal) and now i want to generate horizontal and vertical ..
$vlajky-spacing: 20px;
$vlajky-layout: diagonal;
#import "vlajky/*.png";
#include all-vlajky-sprites;
I've had this problem, best thing is to generate two sprite maps, all you need to do is put them in separate folders depending on which you want them to appear in. This way you can have separate rules for spacing /positioning too.
#import "vlajky-horizontal/*.png";
#import "vlajky-vertical/*.png";
#include all-vlajky-horizontal-sprites;
#include all-vlajky-vertical-sprites;
Related
In a project that I'm working at, I'm trying to achieve simple thing with Zurb Foundation 6 for Sites.
Over 1280px grid gutters should be 20px, under 1280px grid gutters should be 10px.
I've changed settings.scss as on the screenshot below, but anyway it doesn't work.
Anybody faced the same problem in past??
I want to have in the $grid-margin-gutters map values for large and xlarge breakpoints.
For someone facing the same problem. The answer is: if this $grid-margin-gutters does not work as you expect - please make sure that inside a $grid-margin-gutters map you are putting all the breakpoints starting from the smallest one. So follow the pattern:
$grid-margin-gutters: (
small: 10px,
medium: 10px,
large: 20px,
yourCustomBreakpoint: 30px
);
And don't forget to add these custom breakpoints inside variable $breakpoint-classes: like the following:
$breakpoint-classes: (small medium large yourCustomBreakpoint xxlarge);
Works as expected right now, compile without any errors.
I'm wanting to create retina sprites to support #1x, #2x, #3x, #4x retina displays. I'm using Codekit, hooked up to an external version of Compass. I've tried a few plugins out:
https://github.com/AdamBrodzinski/Retina-Sprites-for-Compass
https://github.com/Gaya/Retina-Sprites-for-Compass
which allow for the easy creation of #1x and #2x, but I can't find a simple solution for creating the other sizes.
I'd like to be able to include the sprite on any class or pseudo class rather than generating a separate sprites stylesheet or block of CSS.
In an ideal world, all the sprites would be on one spritesheet as I don't think I'll be using any javascript to preload and I'd like to have as few HTTPs requests as possible
Thank you for your time,
I have a question related to background image url in Compass. I generated a sprite and I have the following path "images/social/facebook.png" but compass generated the sprite in the folder "images" (images/social-s17cf54cdde.png). When I inspect the element in the site I noticed that the background url isn't correct. I need to access one level up (../) so instead of "background-image: url('/images/social-s17cf54cdde.png');" I need "background-image: url('../images/social-s17cf54cdde.png');". How can I do that?
In the scss file I used these code:
#import "social/*.png";
#include all-social-sprites;
I use Singluritygs and Breakpoints (with the included respond-to) and I want my global gutter width to change according to those breakpoints.
I thought this would work, but it doesn't:
$breakpoints: add-breakpoint('small', 768px);
#include add-grid(12);
#include add-gutter(1);
#include respond-to('small') {
#include add-gutter(1/2);
}
Am I approaching this the wrong way?
Note that adding a grid does work using this technique:
#include respond-to('small') {
#include grid-span(9, 4);
}
Problem and solution
Singularity is not compatible with Respond-To. Or, to be more precise, Respond-To does not provide functionality required by Singularity.
The correct way of defining responsive gutters is described here and looks like this:
#include add-gutter(.25 at 900px);.
Responsive grids and gutters should be defined on top of your Sass, alongside mobile-first grids and gutters.
Example:
$bp-small: 768px;
#include add-grid(12);
#include add-gutter(1);
#include add-gutter(1/2 at $bp-small);
.foo {
#include float-span(1);
#include breakpoint($bp-small) {
#include float-span(1);
}
}
Demo:
http://sassmeister.com/gist/b49bd305f029afe9cd68
Update 1
davidpauljunior
I thought Singlurity was compatible with respond-to, I'm using it to successfully add new grids - see my added note in the question. The docs say that for reponsive grids use Breakpoint, and Breakpoint includes Repond-to in it (github.com/Team-Sass/breakpoint/wiki/Respond-To).
You were doing it wrong.
Singularity maintains a list of grid definitions for various breakpoints (and another list for gutter definitions). When spanning, Singularity asks Breakpoint for the context (current breakpoint) and retrieves corresponding grid and gutter definitions from lists.
When used with Respond-To, Singularity is unable to retrieve the context and considers that it spans item in the mobile-first context.
Instead populating the grid/gutter definition lists with defintions for each breakpoint, you had only one entry in the list -- the mobile first one.
By reapplying add-gutter() inside a media query, you thought that you were setting the gutter definition for that media query. But instead you were overwriting the mobile-first grid definition globally. And due to Respond-To not reporting context to Singularity, it was using the mobile first definition inside the media query.
This is a valid approach per se. In fact, i've being actively using it with Singularity 1.0. But it has an obvious downside: due to the fact that grid/gutter definitions are overridden globally, you end up needing to reapply add-grid() and add-gutter() before every usage of spanning mixins, otherwise there's a change that Singularity will be using definitions that you don't expect. This is especially the case if you organize your Sass code in a large number of small files.
I suggest that you investigate two extensions that i wrote:
Breakpoint Slicer -- a very quick and efficient syntax for Breakpoint. It's better than Respond-To, and has full support for Singularity.
Singularity Quick Spanner -- a tool with a number of shortcut mixins for Singularity. One of them is designed to ease the approach of reapplying grid/gutter definitions every time.
Update 2
davidpauljunior
I still don't see why if grids can be redefined globally within Respond-to media queries, why gutters can't. Also, you said I only have 1 entry 'the mobile first one', but that entry was the screen size after mobile first (768px).
You have to understand that #include add-gutter(1/2); overwrites the mobile-first gutter definition regardless of whether you execute it inside a media query or not.
Above i have already explained (and provided a link to documentation) how media query-aware grids and gutters should be defined. Repeating:
lolmaus
The correct way of defining responsive gutters is described here and looks like this:
`#include add-gutter(.25 at 900px);`.
This is how your initial attempt actually works: http://sassmeister.com/gist/c530dfe7c249fad254e9 Please study this example and its output, i hope you will understand now.
davidpauljunior
The idea was that for no media query (mobile first) it would take the global gutter, for my first media query (768 and up) I would reset the global gutter and so on. I've set them all using variables now. Perhaps I'm just missing something about Respond-To.
Again, i have already said that this is a valid approach. My last SassMeister link proves that it is already working for your initial attempt.
And Respond-To is suitable for this situation: it doesn't report the media query context to Singularity, but you're not having Singularity take the media query context into account, you're having it use only the mobile-first definition all the time.
Just don't forget to reapply grids and gutters every time you span a new element, just to make sure that you're doing it in the desired context.
You can make the job of resetting the grid/gutter definitions easier with my reset-grid() helper.
According to documentation http://compass-style.org/help/tutorials/spriting/sprite-layouts/
There is a way to create 'smart' sprite layout, because I'm not satisfied with vertical one.
hello.sass
#orange-layout:smart
#import "orange/*.png"
#include all-orange-sprites
I'll try to generate it by command compass compile test
But it doesn't work for me. I'm still receiving 'vertical' sprite.
Problem was in using # instead of $. Working version $orange-layout:smart