I have this susy settings:
$susy: (
columns: 8,
gutters: 1/4,
global-box-sizing: border-box,
);
Sometimes I need different gutters instead 1/4.
See image for example:
And the code:
.wrap {
#include clearfix;
#include container (500px);
.box-1 {
#include span(4 of 8);
}
.box-2 {
#include span(4 of 8 last);
}
.box-3 {
#include span(4 of 8 wide no-gutter);
}
.box-4 {
#include span(4 of 8 last);
}
.box-5 {
#include span(3.95 of 8 wide no-gutter);
}
.box-6 {
#include span(4 of 8 last);
}
}
I tried this without success:
#include span(4 of 8 wide (gutter-override: 2px));
I found a way to fix it but not if it is correct
#include span(3.95 of 8 wide no-gutter);
Thanks
You can change the layout like this
#include with-layout(12 1/8 fluid float after) {
.box-5 {
#include span(2 of 12);
}
.box-6 {
#include span(10 of 12 last);
}
}
Where the 1/8 is the gutter width.
Another solution:
.box-5 {
float:left;
width: span(4 of 8 wide) - 1%;
}
.box-6 {
float:right;
width: span(4 of 8);
}
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
In scss, I have a code as below. I will like to convert that to a mixin with parameters passed for rotate and skew degrees... May somehow help me in converting this to a mixin?
&:first-child {
#include transform(rotate(0deg) skew(60deg));
}
&:nth-child(2) {
#include transform(rotate(30deg) skew(60deg));
}
&:nth-child(3) {
#include transform(rotate(60deg) skew(60deg));
}
&:nth-child(4) {
#include transform(rotate(90deg) skew(60deg));
}
&:nth-child(5) {
#include transform(rotate(120deg) skew(60deg));
}
&:nth-child(6) {
#include transform(rotate(150deg) skew(60deg));
}
I thought of doing like below. However, it does not seem to be working
#include widget-angle(n);
and the mixin
#mixin widget-angle($num) {
&:nth-child(#{$num}n) {
#include transform(rotate((30 *(#{$num}n-1)) deg) skew(60deg));
}
}
You have a mistake here: (30 *(#{$num}n-1), you have to remove the n and don't use interpolation if you are operating with numbers, leave a space before and after the subtraction sign:
#include transform(rotate((30 *($num - 1))deg) skew(60deg));
I ended up having like below
#mixin widget-angle($num) {
&:nth-child(#{$num}) {
#include transform(rotate((30 *( $num - 1 ))+deg) skew(60deg));
}
}
And,
#for $i from 1 through 6 {
#include widget-angle($i);
}
In following code sample I am trying to define width of .l-branding div to 5 grids on mobile devices and changing the width to 3 grids on breakpoint $tab. With in the breakpoint its working as desired but for mobile devices the grid-span is not making any changes at all. Similar is the case with .l-region--navigation and .l-region--header
Am I doing some thing wrong ?
.l-branding {
#include grid-span(5, 1); //mobile
background:url(../../../images/bg-footer-credits.png) center center;
text-align:center;
#include breakpoint($tab){
#include grid-span(3, 1);
height:104px;
}
}
// end l-branding
.l-region--navigation {
#include grid-span(7, 6); //mobile
#include breakpoint($tab){
#include grid-span(6, 4);
}
}
.l-region--header {
#include grid-span(12, 1); //mobile
clear:both;
#include breakpoint($tab){
#include grid-span(3, 10);
clear:none;
}
}
This question already has answers here:
Make backward nesting in scss?
(2 answers)
Closed 6 years ago.
Current code:
.parent-1 {
.child {
#include set-position-offset(10px, 20px);
}
}
.parent-2 {
.child {
#include set-position-offset(20px, 30px);
}
}
.parent-3 {
.child {
#include set-position-offset(30px, 40px);
}
}
Is there a way to simplify the above code?
Like the following style:
.child {
{some operator}.parent-1 {
#include set-position-offset(10px, 20px);
}
{some operator}.parent-2 {
#include set-position-offset(20px, 30px);
}
{some operator}.parent-3 {
#include set-position-offset(30px, 40px);
}
}
A trailing ampersand - selector & { ... } - should do the trick:
.child {
.parent-1 & {
#include set-position-offset(10px, 20px);
}
.parent-2 & {
#include set-position-offset(20px, 30px);
}
.parent-3 & {
#include set-position-offset(30px, 40px);
}
}
http://thesassway.com/intermediate/referencing-parent-selectors-using-ampersand
you can use looping, like this :
#for $i from 1 through 3 {
.parent-#{$i} {
.child {
#include set-position-offset(10px * $i, (10px * $i) + 10);
}
}
}
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.