There is a grid span(12)
There are two blocks of text
.main-container
.content text text text text text text text text text
.sidebar text text text text text text text text text
Want to do so
Write the code
span(6 at 1) //
span(3 as 9) //
But don't get desired. Here's the whole code.
$debug: (image: show, color: rgba(#66f, .25), output: background, toggle: top right)
$susy: (columns: 12, gutters: 1/4, math: fluid, gutter-position: inside, debug: $debug)
.main-container
#include container(80%)
.content
width: 100%
height: 100%
#include span(6 at 1)
.sidebar
width: 100%
height: 100%
#include span(3 at 9)
I thought that the flag at designed exactly for this purpose. But experiment has shown that I'm wrong. On this question - how to work with the flag at? ow to achieve the desired result using the at?
The at flag is only used in this way for isolation output ('output': 'isolate'). That's because floats are relative, and Susy doesn't know their original position unless you isolate them. Isolation is useful in some cases, but it's better to use push and pull to move floated elements into relative positions when needed. Something like this:
.content {
height: 100%;
#include span(6);
#inlcude push(1);
}
.sidebar {
height: 100%;
#include span(3);
#include push(1);
}
If you do use isolation, it would be something like this:
.content {
height: 100%;
#include span(isolate 6 at 2); // position is 1-indexed
}
.sidebar {
height: 100%;
#include span(isolate 3 at 9);
}
I removed width: 100% because span overrides width anyway.
Related
I've been introduced to the gridlover tool. It provides SASS variables like:
$scale0: (
fontSize: 1em,
line: 1.5em,
autoLineCount: 1,
autoLineHeight: 1.5em
);
But I can't figure out what all the values correspond to.
I understand that I can use each one using map-get. fontSize is obviously used to set font-size and line looks like line-height.
.some-class {
font-size: map-get($scale0, fontSize);
line-height: map-get($scale0, line);
}
But what are autoLineCount and autoLineHeight? Are these SASS keywords? What am I suppose to do with them?
I've spent the past 4 hours trying to find a way to create a sprite image with Compass and sass that also automatically scales each individual image for use with the background-size property.
Nothing I've found works, can't believe it's that difficult.
Does any one have a working example?
Edit: This is what I have so far
#mixin resize-sprite($map, $sprite, $percent) {
$spritePath: sprite-path($map);
$spriteWidth: image-width($spritePath);
$spriteHeight: image-height($spritePath);
$width: image-width(sprite-file($map, $sprite));
$height: image-height(sprite-file($map, $sprite));
#include background-size(ceil($spriteWidth * ($percent/100)) ceil($spriteHeight * ($percent/100)));
width: ceil($width*($percent/100));
height: ceil($height*($percent/100));
background-position: 0 floor(nth(sprite-position($map, $sprite), 2) * ($percent/100) );
}
#mixin resize-sprite-set($map, $percent, $only...) {
$name: sprite_map_name($map);
#each $sprite in sprite_names($map) {
#if length($only) == 0 or index($only, $sprite) != false {
.#{$name}-#{$sprite} {
#include resize-sprite($map, $sprite, $percent);
}
}
}
}
The mixin returns no errors.
$my-icons-spacing: 10px; // give some space to avoid little pixel size issues on resize
#import "my-icons/*.png";
$my-icons-sprite-dimensions: true;
#include all-my-icons-sprites;
// the fun part
.small-icons { // overriding all sprites
#include resize-sprite-set($my-icons-sprites, 40); // 40% sized
}
.some-part-of-my-site {
#include resize-sprite-set($my-icons-sprites, 40, logo, ok); // will create overrides only for sprites "logo" and "ok"
}
I get the following error message from the above implementation when I try to compile. Via Prepros App.
remove ../images/my-icons-s9e77ab1ef1.png
create ../images/my-icons-s9e77ab1ef1.png
error style.scss (Line 62 of _mixins.scss: Undefined mixin 'resize-sprite-set'.)
identical ../css/style.css
I've also done some research on this. This gist is what I came up with:
https://gist.github.com/apauly/7917906
Update:
The solution depends on three key-parts:
scale width
scale height
get background-position
0.
Grab the dimensions for both, the complete sprite and the single icon:
$icon-file: sprite-file($map, $icon);
$icon-width: image-width($icon-file);
$icon-height: image-height($icon-file);
$sprite-file: sprite-path($map);
$sprite-width: image-width($sprite-file);
$sprite-height: image-height($sprite-file);
1.
Consider a div displaying a sprite as its background. Set background-size: 100%; to make sure, that the background sprite covers the full width of the div.
If one would use width: 100%;, the result would be something like this:
+----------------+
|--| |
|----------------|
|--------| | <--- This is the sprite image we want to display
|------| |
+----------------+
So we need to enlarge our background to get something like this: (the div should have overflow:hidden though)
+----------------+
|---------| |
|-----------------------|
|----------------| | <---
|-------------| |
+----------------+
To achieve that, just divide the width of the complete sprite by the width of the single icon:
width:percentage($sprite-width / $icon-width);
2.
This one is basically inspired by a blog post form tkenny:
http://inspectelement.com/tutorials/a-responsive-css-background-image-technique/
The resulting sass code is this:
display: block;
height: 0;
padding-bottom: percentage($icon-height / $icon-width);
background-size: 100%;
3.
The rest is just some basic math to calculate the top spacing of the icon inside of the sprite as a relative value:
Get the space from the top in pixels (a negative value):
$space-top:floor(nth(sprite-position($map, $icon), 2));
Sass will need a px-value
#if $space-top == 0 {
$space-top: 0px
}
Set the background position with percentages:
background-position:0 percentage(
-1 * $space-top / ( $sprite-height - $icon-height )
);
Here's a mixin for resizing sprites that works beautifully
#mixin resize-sprite($map, $sprite, $percent) {
$spritePath: sprite-path($map);
$spriteWidth: image-width($spritePath);
$spriteHeight: image-height($spritePath);
$width: image-width(sprite-file($map, $sprite));
$height: image-height(sprite-file($map, $sprite));
#include background-size(ceil($spriteWidth * ($percent/100)) ceil($spriteHeight * ($percent/100)));
width: ceil($width*($percent/100));
height: ceil($height*($percent/100));
background-position: 0 floor(nth(sprite-position($map, $sprite), 2) * ($percent/100) );
}
and the github it came from:
https://gist.github.com/darren131/3410875
I have a 2 column grid and two divs which I both want to span a single column starting in the first column. I want these to stack on top of each other but they are being overlayed on top of each other. Here is the scss:
#first {
background: red;
height: 30px;
#include grid-span(1, 1);
}
#second {
background: red;
height: 30px;
#include grid-span(1, 1);
}
I've fixed it by inserting an additional div between these two divs and using #include clearfix; or alternatively I can fix it by using #include isolate-span(2,1,'both'); on the second div.
Is there a more 'best practice' way of clearing a row like this?
As discussed in this similar question, Singularity doesn't clear your floats for you when you're using Isolation output (isolation being when each float is isolated from one another's position, as opposed to float where they are not).
The short version of that answer is to use the CSS clear property, as explained very well in the Mozilla Developer Docs
I want to be able to do the following:
height: 25% - 5px;
Obviously when I do that I get the error:
Incompatible units: 'px' and '%'.
Sass cannot perform arithmetic on values that cannot be converted from one unit to the next. Sass has no way of knowing exactly how wide "100%" is in terms of pixels or any other unit. That's something only the browser knows.
You need to use calc() instead. Check browser compatibility on Can I use...
.foo {
height: calc(25% - 5px);
}
If your values are in variables, you may need to use interpolation turn them into strings (otherwise Sass just tries to perform arithmetic):
$a: 25%;
$b: 5px;
.foo {
width: calc(#{$a} - #{$b});
}
There is a calc function in both SCSS [compile-time] and CSS [run-time]. You're likely invoking the former instead of the latter.
For obvious reasons mixing units won't work compile-time, but will at run-time.
You can force the latter by using unquote, a SCSS function.
.selector { height: unquote("-webkit-calc(100% - 40px)"); }
$var:25%;
$foo:5px;
.selector {
height:unquote("calc( #{$var} - #{$foo} )");
}
IF you know the width of the container, you could do like this:
#container
width: #{200}px
#element
width: #{(0.25 * 200) - 5}px
I'm aware that in many cases #container could have a relative width. Then this wouldn't work.
Sorry for reviving old thread - Compass' stretch with an :after pseudo-selector might suit your purpose - eg. if you want a div to fill width from left to (50% + 10px) of screen you could use (in SASS indented syntax):
.example
background: red
+stretch(0, -10px, 0, 0)
&:after
+stretch(0, 0, 0, 50%)
content: ' '
background: blue
The :after element fills 50% to the right of .example (leaving 50% available for .example's width), then .example is stretched to that width plus 10px.
Just add the percentage value into a variable and use #{$variable}
for example
$twentyFivePercent:25%;
.selector {
height: calc(#{$twentyFivePercent} - 5px);
}
What's wrong with this multiple background CSS line. Firefox 4 ignores it (as it does when there's a syntax error).
background: rgba(255,0,0,0.2), url("static/menubg.jpg");
The solutions is using:
{-moz-linear-gradient(top, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.5) 100%), url(bg.png) repeat 0 0;}
instead of:
rgba(0, 0, 0, 0.5)
The syntax for background in CSS3 Backgrounds is [ <bg-layer> , ]* <final-bg-layer>, which means zero or more <bg-layer>s and then a single <final-bg-layer>, separated from each other by commas. See http://www.w3.org/TR/css3-background/#the-background
A <final-bg-layer> is defined as:
<final-bg-layer> = <bg-image> || <bg-position> [ / <bg-size> ]? ||
<repeat-style> || <attachment> || <box>{1,2} ||
<'background-color'>
whereas a <bg-layer> is:
<bg-layer> = <bg-image> || <bg-position> [ / <bg-size> ]? ||
<repeat-style> || <attachment> || <box>{1,2}
(both definitions at http://www.w3.org/TR/css3-background/#ltbg-layergt ).
Or in simple terms, only the lowest background layer can include a background color. So yes, your CSS is in fact a syntax error.
Oh, and looks like https://developer.mozilla.org/en/css/multiple_backgrounds had some errors in it. I've fixed them.
You should note that because gradients are treated as images it is acceptable and works to put in a gradient that has the same top and bottom colour.
It should be background: rgba(255,0,0,0.2) url("static/menubg.jpg"); without the ,
Oddly enough it seems to come down to the order of the parameters; the background-image then background-color:
background: url('http://davidrhysthomas.co.uk/linked/astrid_avatar.png') no-repeat 50% 50%, rgba(255,180,0,0.8);
Works (JS Fiddle demo), while background-color then background-image:
background: rgba(255,180,0,0.8), url('http://davidrhysthomas.co.uk/linked/astrid_avatar.png') no-repeat 50% 50%;
Does not (JS Fiddle).
The above tested on Chromium 11 and Firefox 4, both on Ubuntu 11.04.
Edited to note that this does, indeed, come down to the order; as definitively answered in #Boris' answer.
Going off of Oscar's nice solution (thanks!), here is how I implemented it using SASS/Compass to automate browser prefixing
#include background( linear-gradient( color-stops(rgba(255, 66, 78, 0.25), rgba(255, 66, 78, 0.25)) ), image-url('/img/cardboard_flat.png') );
This supports Webkit, Firefox, but not IE9 (because of the gradient). Then I remembered the awesome compass rgbapng Ruby gem for generating PNGs: https://github.com/aaronrussell/compass-rgbapng
#include background( png_base64( rgba(255, 66, 78, 0.25) ), image-url('/img/cardboard_flat.png') );
Now, this supports IE9+ and the rest of the browsers that support multiple backgrounds.
If you still need IE8 support, you could either use a multi-background polyfill, or style an ::after pseudo element and absolutely position it, with a z-index of -1:
html {
height: 100%;
}
body {
background: url('/img/cardboard_flat.png');
position: relative;
padding: 1px 0;
min-height: 100%;
&:after {
content: "";
position: absolute;
background: png_base64( rgba(255, 66, 78, 0.25) );
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: -1;
}
}