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
Related
Im working on a new project and started to use grunt-sass instead of grunt-contrib-sass because its alot faster. I also removed compass. The thing now is that i cannot find a way to add 'susy' grid and 'breakpoint' anymore. I used to put this in a config.rb file but im not using this anymore because im not using compass.
So i added all susy style in my project and thats works fine but its not my preferred method. But cant find a way to add breakpoint.
Is there a way to add these? Or do i have to use compass for this?
Sorry for my bad english, not very good at it.
No need for Compass, there's a new susy-media breakpoint Mixin designed to work with LibSass which is what you are essentially using via grunt-sass. That's what I use and it works great. So you'd define some Susy grid variables and breakpoints in a _vars.scss partial for example:
// Define susy.
$susy: (
columns: 12,
gutters: .8,
);
// Define some breakpoints.
$bp-narrow: 30em; // 480px
$bp-med: 48em; // 768px
Now put it all together, say in _layout.scss for example:
// the breakpoint (media query)
#include susy-media($bp-med) {
// now a grid
.l-foobar-wrap {
.foo {
#include span(7)
}
.bar {
#include span(5 at 8)
}
}
}
For more info, read the susy docs, it's all there for you and this works with grunt-sass (LibSass). It's part of my everyday workflow.
Note, as an alternative for really nice media query rendering and retina workflows, I now use Include Media rather than susy-media and it also works fine with LibSass.
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);
I’ve hacked around this before by writing my own mixins, but I get a feeling there must be an inbuilt method in Susy to get around this problem.
I have a mobile-first grid which uses my default $grid-padding, say 1.5em, but once I hit my first breakpoint I switch to a wider $grid-padding-tablet, perhaps 3em, and so on through other breakpoints.
In addition, some elements also use the bleed mixin to give the visual impressions of infinite width.
Is there an easy way, just using something like #include container rather than building my own media queries and mixins to accomplish this?
The built-in technique for this is the with-grid-settings mixin (documentation):
#include at-breakpoint($tablet) {
#include with-grid-settings($padding: $grid-padding-tablet) {
// your tablet code here
}
}
Let's say i have a grid of articles (2 columns), inside another column.
What's the best way to achieve this without having to explicitly tell singularity on which column should the article be.
Is it the only option to declare it with pseudo classes?
article:nth-child(1n){
#include grid-span(1,1);
}
article:nth-child(2n){
#include grid-span(1,2);
}
Thanks.
There is an even shorter way than Scott aka user2242314 has suggested above::
$grids: 12;
$gutters: 1/3;
.column {
#include float-span(1);
&:last-child {
#include float-span(1, 'last'); }}
Unfortunately, there's a bug in Singularity that prevents from using this short method, even though it's suggested by Singularity documentation.
I've fixed the bug and submitted a pull request. Wait for Scott or Sam aka Snugug to accept it and release an updated gem (of version 1.0.7 or later). Then run gem update or bundle update and you're able to use the cleanest solution.
You can use the float output style but you are still going to have to deal with the extra padding on your right column.
http://sassmeister.com/gist/5256403 - you may have to select singularity from the drop-down menu to make this link work.
With floats, writing “last” in the location column is equivalent to “omega” in Susy. Dealing with that extra padding is still going to be tricky but at least your columns are floating next to each other without nth.
If you are still unsatisfied, you can write your own output style. Not sure what CSS will do the trick but at any rate, the CSS Singularity generates is completely customizable. I have yet to fully document but you can add your own output styles: https://github.com/Team-Sass/Singularity/tree/1.x.x/stylesheets/singularitygs/api
I have been trying out the Susy plugin for Compass (SASS), but I noticed that it isn't working as intended for me.
I took the index.html and screen.scss from the official Susy tutorial, compiled the SCSS and put it up on my server. As you can see it looks just like it's supposed to (on all browsers I tested it on):
What I did next was the following:
Copy the <article> in the <div role="main"> and paste it six times
In screen.scss, change the column-span (div[role="main"] > article) accordingly: from #include columns(6,9); to #include columns(1,9);
But now those new elements don't align to the grid at all, they are off by a clearly visible space. I tested this in recent versions of FF, Safari and Chrome, and only FF seems to display it correctly. Screenshot is from Chrome:
I also uploaded the source for everyone to inspect here.
Is this a general problem with Susy that the grid isn't correct or am I doing something wrong? If the first, does anybody know a workaround? I also tried with percentages and pixels, but neither worked.
Susy isn't just another grid system like all the others. It was designed to fulfill a very specific purpose: grids that are fluid on the inside. The units you use to create the grid are applied to the container, not to each column. Everything inside is built with percentages. What you are seeing is normal. It's true of all fluid grids, because of sub-pixel rounding. It's not a bug, it's a part of building responsive web sites.
If you need pixel-exact grids, Susy is the wrong tool for you. It all depends what you are trying to build.
Re-size your browser to see how it works. You'll notice the grids snapping-to and floating within a few pixels of their guides, but the grid stays intact and never triggers the horizontal scroll-bar.
Cheers!
-e