This is certainly easiest to show with some code:
.container{
.gallery {
ul {
#include clearfix;
}
li {
#include span-columns(1,4);
&:nth-child(4n) {
#include omega;
}
}
}
#include at-breakpoint($large-columns) {
.gallery {
li {
#include span-columns(1,3);
&:nth-child(4n) {
#include remove-omega;
}
&:nth-child(3n) {
#include omega;
}
}
}
}
}
I'm starting out with 4 columns with the 4th being omega, then I want to change over to 3 columns, with the 3rd being omega. The correct elements are floated left/right correctly, but every 4th gets a wrong margin-right...
Am I doing this right? Or rather, what am I doing wrong?
Thanks for reading,
/Andy
your question is misleading because we don't know the value of $large-columns. I assumed that value might be 59em 3 - but that works perfectly. It seems the value is actually just 59em - which is causing your problem.
If you set a breakpoint without a column-count, Susy calculates a new context based on your $column-width and $gutter-width settings. That doesn't cause any problem for span-columns(1,3) because you override the global context with an explicit one (3). But remove-omega also needs to know the context (in order to apply gutters) and you don't pass one - so it uses the global context.
You have two options:
You can change the breakpoint: at-breakpoint(59em 3)
You can pass an explicit context: remove-omega(3).
Related
I have the following SASS rules:
p {
margin: 0;
}
#include desktop() {
p {
margin: 0;
}
}
The mixin is like this:
#mixin desktop() {
#media screen and (min-width: 1200px) {
#content;
}
}
Elsewhere in the codebase there's a margin being set on desktop, hence in this case I need to explicitly remove it on the desktop breakpoint too, just having the first p selector rule doesn't cut it.
Is there a neat way to combine the selectors as it feels verbose having the same margin: 0 rule twice? I realise there's probably something more fundamentally wrong here with the inheritance, but that's outside the scope of the question. I don't want to use !important.
Many thanks.
Is there a neat way to combine the selectors? Sure there is… Just use another mixin:
#mixin para {
p {
margin: 0;
}
}
#include para;
#include desktop {
#include para;
}
You clearly already know how to use mixins, so I'm assuming your question is really about whether you can nest one mixin within another (yes), or whether you can include selectors within a mixin (yes).
I started upgrading a website from Singularity 1.1.2 to 1.4.0 and immediately hit a wall when it came to using multiple grids in the same style sheets. I have five different grids on this site. Previously I was able to set variables for each of the grids and gutters, like so...
$copy-grids: 2;
$copy-grids: add-grid(4 at $breakpoint-xs-min, $copy-grids);
$copy-grids: add-grid(6 at $breakpoint-l-min, $copy-grids);
$copy-gutters: $gutter-width;
$front-grids: 1;
$front-grids: add-grid(2 at $breakpoint-2up-min, $front-grids);
$front-grids: add-grid(3 at $breakpoint-3up-min, $front-grids);
$front-grids: add-grid(4 at $breakpoint-4up-min, $front-grids);
$front-gutters: breakpoint-to-base-em($front-gutter-width);
...
Then I was able to pass these variables to custom mixins using Singularity's layout() function, like this...
// Mixins for the main content body copy.
#mixin copy-layout {
#include layout($copy-grids, $copy-gutters) {
// All the things!
#content;
}
}
#mixin copy-grid-span($span, $location) {
#include copy-layout {
#include grid-span($span, $location);
}
}
// Mixins for the front page.
#mixin front-layout {
#include layout($front-grids, $front-gutters) {
$gutter-styles: 'split' 'fixed';
// All the things!
#content;
}
}
#mixin front-grid-span($span, $location) {
#include front-layout {
#include grid-span($span, $location);
}
}
...
This let me use my custom mixins in place of the standard grid-span() mixins to easily implement any of my defined grids. For instance:
#block-bean-front-page-message {
margin-bottom: $front-gutters;
#include breakpoint-1up() {
width: 100%;
padding: 0 $front-gutters/2;
}
#include breakpoint-2up-to-4up() {
#include front-grid-span(1, 2);
}
#include breakpoint-4up(true) {
#include front-grid-span(3, 2);
}
}
The problem is that, in Singularity v1.4, grid and gutter settings are no longer saved to normal sass variables. Instead they are saved as keyed values in the global $Singularity-Settings map. The keys used for these values are hard coded in the add-grid(), add-gutter(), and add-gutter-style() mixins, none of which accept a custom variable name. This appears to effectively prevent me from defining more than one grid. So while the layout() mixin still exists, I no longer have variables I can pass into it for my grid and gutter settings, breakng my custom layout wrapper mixins.
I've posted this as an issue on Github and I understand a more permanent fix may be in the works. But in the mean time, I'm hoping there is a workaround I can use to accomplish multiple grids using the current release of Singularity.
It looks like I'm able to achieve what I'm after by overriding the add-grid(), add-gutter(), and add-gutter-style() mixins like so:
#mixin add-grid($grid-definition, $grid-key: 'grids') {
$Grid-Map: ();
#if sgs-has($grid-key) {
$Grid-Map: sgs-get($grid-key);
}
#else {
$New-Map: sgs-set($grid-key, $Grid-Map)
}
$Add-Grid: add-grid($grid-definition, $Grid-Map);
$HOLDER: sgs-set($grid-key, $Add-Grid);
}
#mixin add-gutter($gutter-definition, $gutter-key: 'gutters') {
$Gutter-Map: ();
#if sgs-has($gutter-key) {
$Gutter-Map: sgs-get($gutter-key);
}
#else {
$New-Map: sgs-set($gutter-key, $Gutter-Map)
}
$Add-Gutter: add-gutter($gutter-definition, $Gutter-Map);
$HOLDER: sgs-set($gutter-key, $Add-Gutter);
}
#mixin add-gutter-style($gutter-style-definition, $gutter-style-key: 'gutter styles') {
$Gutter-Style-Map: ();
#if sgs-has($gutter-style-key) {
$Gutter-Style-Map: sgs-get($gutter-style-key);
}
#else {
$New-Map: sgs-set($gutter-style-key, $Gutter-Style-Map)
}
$Add-Gutter-Style: add-gutter-style($gutter-style-definition, $Gutter-Style-Map);
$HOLDER: sgs-set($gutter-style-key, $Add-Gutter-Style);
}
Then I can define my grids like this...
#include add-grid(2, 'copy grids');
#include add-grid(4 at $breakpoint-xs-min, 'copy grids');
#include add-grid(6 at $breakpoint-l-min, 'copy grids');
$copy-grids: sgs-get('copy grids');
#include add-gutter($gutter-width, 'copy gutters');
$copy-gutters: sgs-get('copy gutters');
#include add-grid(2, 'front grids');
#include add-grid(2 at $breakpoint-2up-min, 'front grids');
#include add-grid(3 at $breakpoint-3up-min, 'front grids');
#include add-grid(4 at $breakpoint-4up-min, 'front grids');
$front-grids: sgs-get('front grids');
#include add-gutter($front-gutter-width-em, 'front gutters');
$front-gutters: sgs-get('front gutters');
$front-gutter-styles: 'split' 'fixed';
...giving me variables which I can pass into the layout function. Right now everything seems to be working, except for the gutter styles, which don't seem to have any effect on output, but that's a different issue.
I am trying to do a Singularity layout with a main container and a sidebar. In the main container I'd like to have a list of floated elements that will get line breaks at each 3.
Here's the relevant gist:
http://sassbin.beta.caliper.pl/gist/8704970/
Unfortunately width(1) + width(2) + width(3) != width(main). What am I doing wrong? I have to use the grid for items 1..N, because they need to align elements in the page's header (not included in the gist).
So after approaching the topic with a fresh mind I managed to get the expected positioning.
Here's a new gist for everyone to compare:
http://sassbin.beta.caliper.pl/gist/8900975/
There where a few things that needed changing:
Add body { margin: 0 } to align the #include background-grid() visualizations with the act.
Remove all borders and replace them with backgrounds to get rid of 1px differences.
Change grid inside item container with #include layout() to match the container's grid-span.
Style items with nth-child and #include float-span().
Specify last for the last item in a row to avoid unexpected line breaks.
The crucial part of the code is:
#main {
#include grid-span(9,1);
background: yellow;
#include layout(9) {
.item {
&:nth-child(3n+2) {
#include float-span(3,1);
background: blue;
}
&:nth-child(3n+0) {
#include float-span(3,1);
background: red;
}
&:nth-child(3n+1) {
#include float-span(3,last);
background: green;
}
}
}
}
I'm using SASS to create a responsive site. At the moment, my code is structured into a number of partials:
Some default colours and sizes
Overall Layout
Partial for each element
As a result of this organisation I'm finding that I'm ending up with the media queries being declared numerous times through the resulting CSS - it just feels messy. As a result I've been working with a few ideas to keep the current structure, but end up with a simpler resulting code.
My idea goes something like this:
A variable contains a list of the partials to #import
A variable contains a list of the media query sizes (always using min-width, therefore this list is nothing more than a string of numbers)
Each partial (_footer.scss, _header.scss) would then contain a #mixin titles something like - content-footer, content-header, etc
Those #mixin's would take a single variable relating to the media-query and output the appropriate code for that condition.
style.scss would #import each partial from the list,
then cycle through each media-size and partial respectively, calling the function and media size.
The above process would result in something like this being effected...
#import 'footer';
#import 'header';
#include content-footer(0);
#include content-header(0);
#include content-footer(320);
#include content-header(320);
#include content-footer(640);
#include content-header(640);
etc..
My question is this - how do I call the dynamically titled #mixin? Something like content-#{$partial} seems like it should work, but doesn't.
I suppose if this doesn't work, then I could re-import the partial each time, but this seems overkill...
#import 'footer';
#include content(0);
#import 'header';
#include content(0);
#import 'footer';
#include content(320);
#import 'header';
#include content(320);
#import 'footer';
#include content(640);
#import 'header';
#include content(640);
Personally I find comfort in declaring media queries at many places throughout the document. It feels object oriented and it's really easy to keep track of what's actually going on. I'm usually interested in editing one module in particular, not the entire layout, so it makes more sense to me.
I have a mixin that looks something like this:
$mq-small: 30em;
$mq-medium: 50em;
$mq-large: 70em;
#mixin mq($size) {
#if $size == small { #media only screen and (min-width: $mq-small) { #content; } }
#else if $size == medium { #media only screen and (min-width: $mq-medium) { #content; } }
#else if $size == large { #media only screen and (min-width: $mq-large) { #content; } }
}
Which allows me to write media queries like this:
.element {
// generic rules
#include mq(medium) {
// size-specific rules
}
}
Which creates this output:
.element {
// generic rules
}
#media only screen and (min-width: 50em) {
.element {
// size-specific rules
}
}
Then, when the project is ready to be deployed, I merge the media queries manually in the output CSS into one place to remove bloat.
It's not perfectly clean, but it's also not necessary and the workflow is awesome. Last I heard, this merging is supposed to happen automatically in future versions of SASS. Perhaps that's just a rumor, though, but it would be nice.
I am using the singularitygs for the first time. I was wondering how to remove the left/right margins (gutters)? Like the alpha/omega options in the 960gs. Is there anything like that?
Thank you. I am aware of the $location.
I did not describe my problem properly
so the following scenario:
<article>
<div class="teaser"></div>
<div class="teaser"></div>
<div class="teaser"></div>
<div class="teaser"></div>
</article>
<sidebar></sidebar>
$grids: 12;
$gutters: .2;
article {
#include grid-span(8);
}
sidebar {
#include grid-span(4, 9);
}
.teaser {
#include float-span(4, 1, 8);
&:nth-child(odd) {
// here i want to remove the right-margin - because otherwise the containers are not floating. dirty way would be: margin-right: 0 !important;
}
}
Singularity has a location variable as the second argument. #include grid-span($width, $location);You can change $location to 1 if it is the first column on your grid or 12 if it is the last column on your 12 column grid.
By default Singularity uses the isolation method of writing grids so this location value is important for moving things around on your grid. You can switch to more traditional floats by writing $output: float;
Actually there is an option to set the gutters which is add-gutter(x);.
For example:
.sidebar {
#include add-gutter(0);
#include grid-span(2, 1);
}
.main {
#include add-gutter(0);
#include grid-span(10, 3);
}
From the docs: https://github.com/at-import/Singularity/wiki/Creating-Grids#gutter-styles.