I've set global settings for susy:
$susy: (
columns: 8,
gutters: 1/4,
);
I want to override the gutters for a couple of span
.tile-left {
#include span(1 of 2 1px);
}
.tile-right {
#include span(1 at 2 of 2 1px);
}
Generated css
.tile-left {
width: 44.44444%;
float: left;
margin-right: 11.11111%;
}
.tile-right {
width: 44.44444%;
float: right;
margin-right: 0;
}
I've also tried these and these don't seem to be working either
#include span(1 of 2 no-gutters);
&
#include span(1 of 2 (gutter-override: 1px));
Looks like the "1px" argument didnt work because gutters can only be defined by a ratio value; Documentation
Furthermore, I've solved my issue of wanting fluid elements and a static gutter by
doing this:
.tile-left {
#include span(1 of 2 (gutter-override: no-gutters, gutter-position: inside-static));
border-right: 1px solid #E5E5E5;
}
.tile-right {
#include span(1 of 2 (gutter-override: no-gutters, gutter-position: inside-static));
}
It looks like when you remove the gutters by passing "gutter-override: no-gutters" it calculates the width with gutters, but then removes the margins; By putting the gutters/margin inside by passing "gutter-position: inside-static" the with is calculated to span to 100% without gutters.
It's not entirely clear in your post what you are trying to achieve. #include span(1 of 2 no-gutters); should remove the gutter output, but won't change the math. If your goal is to change the math so there are no gutters, #include span(50% no-gutters); might be the best option. Or #include span(1 of 2 (gutters: 0)); should give you the same output.
UPDATE: even #include span(1 of 2 0); seems to work. The 0 is understood as a valid gutter ratio.
Related
I've upgraded to Bourbon Neat v2 which includes the addition of gutters on the left and right side of the container grid.
In v1 I could use block-collapse in the span-columns mixin to eat the gutters either side of the element, however, in v2 this mixin has been removed. There is a grid-collapse function in v2 but that doesn't quite work as I expected. My current markup is as below (reduced for brevity):
.wrapper {
#include grid-container; // columns: 12, gutter: 1rem
#include grid-visual(lime);
}
.sidebar {
#include grid-columns(2 of 12);
}
.container {
#include grid-columns(10 of 12);
}
How do I remove the outer gutters, an collapse the gutter between column 2 & 3 so that my sidebar and container sit next to each other?
You were correct in looking at the grid-collapse mixin to take care of this.
To do a flush grid like the one you described, your markup would be:
.wrapper {
#include grid-container;
overflow-x: hidden;
}
.wrapper-inner {
#include grid-collapse;
}
.sidebar {
#include grid-column(2 of 12);
}
.container {
#include grid-column(10 of 12);
}
just expanding on the top answer, you need to also make sure to include grid-collapse within grid-media declarations when using multiple grids due to the fact that grid-collapse is based on your gutter values for each grid.
.wrapper {
#include grid-container;
}
.wrapper-inner {
#include grid-collapse;
#include grid-media($sm-neat-grid, $md-neat-grid, $lg-neat-grid) {
#include grid-collapse;
}
}
.sidebar {
#include grid-column(1 of 1);
#include grid-media($sm-neat-grid, $md-neat-grid) {
#include grid-column(3 of 12)
}
#include grid-media($lg-neat-grid) {
#include grid-column(5 of 15)
}
}
.container {
#include grid-column(1 of 1);
#include grid-media($sm-neat-grid, $md-neat-grid) {
#include grid-column(9 of 12)
}
#include grid-media($lg-neat-grid) {
#include grid-column(10 of 15)
}
}
by the way, my example is using a modified version of grid-media that allows declaring multiple grids that will share the same values but differ in gutter sizes:
// overrides bourbon-neat grid-media to include more than one grid
#mixin grid-media($grids...) {
#each $grid in $grids {
$_media: _retrieve-neat-setting($grid, media);
$_query: _neat-parse-media($_media);
#media #{$_query} {
$_default-neat-grid: $neat-grid;
$neat-grid: map-merge($neat-grid, $grid) !global;
#content;
$neat-grid: $_default-neat-grid !global;
}
}
}
can't for the life of me remember where I got it from but I've used it in all my projects
This question already has answers here:
Sass Interpolation of Mixin, Function, and Variable names
(3 answers)
Closed 8 years ago.
I'm working on a simple mixin to use in conjunction with Grunt Spritesmith. Here is what I've written so far...
#mixin svg($svg, $height, $width) {
background-image:url(../../images/svg/#{$svg}.svg);
background-repeat:no-repeat;
display:block;
height:$height + px;
width:$width + px;
.no-svg & {
#include sprite($#{$png});
}
}
And I would use it like this...
#include svg("logo", 50, 100);
The issue I'm having is that I'm passing in just the name of the image (in this case just 'logo') to use in the background-image url, but then I need to prefix the #include sprite mixin with a dollar like so...
#include sprite($logo);
So all I need to know really is how I would format this line in Sass so that it spits out the passed in $svg variable with a $ prefixing it. This is the line which needs tweaking #include sprite($#{$png}); Thanks.
I'm a bit confused, why don't you just apply #include sprite(#{$svg})
#mixin svg($svg, $height, $width) {
background-image:url(../../images/svg/#{$svg}.svg);
background-repeat:no-repeat;
display:block;
height:$height + px;
width:$width + px;
.no-svg & {
#include sprite(#{$svg});
}
}
#mixin sprite($value) {
background-image:url(../../images/png/#{$value}.png);
...
}
div {
#include svg("logo", 50, 100);
}
OUTPUT
div {
background-image: url(../../images/svg/logo.svg);
background-repeat: no-repeat;
display: block;
height: 50px;
width: 100px;
}
.no-svg div {
background-image: url(../../images/png/logo.png);
...
}
An example : http://sassmeister.com/gist/cdccd858780acbf2d144
This question already has answers here:
Creating or referencing variables dynamically in Sass
(7 answers)
Closed 7 years ago.
Regarding the question, here's an example of what I'm trying to do but I have a feeling that interpolation with SASS doesn't work in outputting variable within a mixin using an argument.
$red: #f00;
#mixin color-accent-class($color) {
.#{$color}-accent {
color: $#{$color};
}
}
#include color-accent-class(red);
Ultimately I'm trying to make the repetitive code below DRY so I'm not repeating myself all sloppy style and I'm wondering if it should be done with #function and/or #each or some other looping action with SASS. Thanks in advance for any guidance!
$blue: #2a62a7;
$red: #db0042;
$purple: #5b3b9f;
$orange: #f7911a;
$light-blue: #46aeed;
$green: #49b842;
#mixin product-accent($color-name, $hexval) {
.product-accent-#{$color-name} {
img {
border: {
left: {
style: solid;
width: 10px;
color: $hexval;
}
}
}
h3, b {
color: $hexval;
}
.button {
#extend .button.#{$color-name};
}
}
}
#include product-accent(black, #000);
#include product-accent(blue, $blue);
#include product-accent(red, $red);
#include product-accent(purple, $purple);
#include product-accent(orange, $orange);
#include product-accent(light-blue, $light-blue);
#include product-accent(green, $green);
Big thanks to #martin-turjak for help with this. Using SASS lists, nth() and a #for loop is what did the trick. Please chime in if there's a cleaner way to do this.
$color-names: black, blue, red, purple, orange, light-blue, green;
$color-hexvals: #000, $blue, $red, $purple, $orange, $light-blue, $green;
#for $i from 1 through length($color-names) {
#include product-accent(nth($color-names, $i), nth($color-hexvals, $i));
}
Can anyone help me with Singularity's isolation-span method? It does not actually clear. I placed an article/div (class .special) with isolation-span(4, 3, 'both') and it is overlaid by the two columns (using grid-spans) which should follow. The 'both' is meant to clear any following divs, but doesn't. I had to add an empty div (id = spacer) after the isolation-span and even then had to give that empty div an isolation-span(1,1, 'both') to make it all clear. I have worked away at this using different positions for the breakpoints and this is the only way to get it to work. I have used 'Bundler' to install Singularity 1.1.2 and the various dependencies as Ruby 2.0 gems. I include the .scss. The .left_inset works fine; it's the .special that won't work without my workaround. The HTML is just a few left and right paragraphs with lorem fillers, with grids of 3, 8($breaktab) and 12($breakdesk). Everything works except the .special isolation-span.
#main {
#special {
border-left: 1px solid white;
border-right: 1px solid white;
padding: 10px;
}
#include breakpoint($breaktab) {
.left {
#include grid-span(4, 1);
}
.right {
#include grid-span(4, 5);
}
.left_inset {
#include isolation-span(3, 2, 'both');
}
.special {
#include isolation-span(4, 3, 'both');
}
}
#include breakpoint($breakdesk) {
.left {
#include grid-span(6, 1);
}
.right {
#include grid-span(6, 7);
}
.left_inset {
#include isolation-span(5, 2, 'both');
}
.special {
#include isolation-span(6, 4, 'both');
}
}
}
#spacer {
#include breakpoint($breaktab) {
#include isolation-span(1, 1, 'both');
}
}
Answer may be to make the .left block into a float-span like this:
#include breakpoint($breaktab) {
.left {
#include float-span(4, 'first');
}
.right {
#include grid-span(4, 5);
}
.left_inset {
#include isolation-span(3, 2, 'both');
}
.special {
#include isolation-span(4, 3, 'both');
}
}
That then compiles correctly and forces the blocks after the isolation-span to clear.
The issue appears to be because you are wrapping both in quotes, which is printing it out as a string. Unquoting them prints them as values and clear works fine. Please file an issue letting us know about the quoting issue and we will take a look at it before Singularity 1.2.0 is released.
I'm beggining with singularitygs (and grids systems), and of course I run into problems. Here it is.
I have this HTML markup:
<div id="wrapper">
<div id="main">
<div id="first-column">content</div>
<div id="second-column">content2</div>
</div>
</div>
I have setup this assymetric grid:
$grids : 97px 263px 263px 97px;
$gutters : 70px;
And this scss:
#wrapper {
#include background-grid;
width: 930px;
margin: 0 auto;
}
#main {
//#include background-grid;
#include grid-span(2, 2); //this element is spanned acros two columns in the middle
}
#first-column {
#include grid-span(1, 1); //should be spanned acros first column in #main
}
#second-column {
#include grid-span(1, 2); //this element should be spanned acros second column in #main
}
The question is how can I makes the inner divs be aware of the fact that #main should have only two columns (and one gutter). Instead it looks like that the #main inherit the default grid setup.
I've tryed lots of options like changing #main grid via #include layout. Or tell the columns to adapt to the correct context by adding #include grid-span(1, 1, 2); (the third number should tell the div that it's in the default grids context.
But with no avail.
I suspect that the problem is in my px definition of the default grid. Because the inner divs gets lots of time only 1.356% wide, and this look kind of suscpicious to me. Am I right? What can I do?
Thanks for any suggestion.
EDIT:
I try add the exact px dimension and in combination with adding the nested context its looks like its supossed, but I think thats its not how it should work??
#block-formblock-contact-form {
#include grid-span(1, 2, 2);
width: 263px;
}
#block-system-main {
#include grid-span(1, 1, 2);
width: 263px;
}
The issue that you're running in to is that, while you've changed your grid to a two column symmetric grid, you haven't changed your gutters in proportion. What Singularity is seeing with how you've currently set it up is that you've got a 2 column grid, each column is width 1, and a gutter of width 70. Now, there are two ways you can solve this. The first is to explicitly state what your sub grid is in relation to the main grid. That would look like the following:
#first-column {
#include grid-span(1, 1, 263px 263px);
}
#second-column {
#include grid-span(1, 2, 263px 263px);
}
or, with #include layout
#include layout(263px 263px) {
#first-column {
#include grid-span(1, 1);
}
#second-column {
#include grid-span(1, 2);
}
}
The second option is to set up the correct ratio for columns to gutters when using sub grids. Singularity works best when it's dealing with small ratios instead of large "absolute" values.
#include layout(2, (70px / 263px)) {
#first-column {
#include grid-span(1, 1);
}
#second-column {
#include grid-span(1, 2);
}
}
Hope this helps!