73371

Susy 2.1.3 issue regarding layout change on breakpoint

Question:

Help me out you sassy susy's, I am at my breaking point! I am trying to make the most efficient layout for my project, and I have come across something I havn't been able to figure out with Susy/breakpoint.

I want the layout columns to change at the breakpoints and not have to change all the individual spans of the div's (as there will be many different span widths with this way. Instead of just 1 and changing 3 or 4 different column layouts).

Right now the only way I was able to get this to work was by changing the spans of the divs and keeping the columns unchanged, but I would like the divs to always stay the same size and then just drop into place depending on how many columns are left to fill.

I think it is just the way I am writing the @include. I have tried doing container/layout inside the breakpoint instead of with-layout with no success. I know this is probably going to be a simple fix that I am just not seeing.

Edit: Also something I have noticed is that no matter how I change things the div is always taking the default $susy map and is not changing it at breakpoint.

SCSS:

@import 'susy'; @import 'breakpoint'; $layout1: layout(12 .125 split fluid center); $layout2: layout(16 .125 split fluid center); $layout3: layout(24 .125 split fluid center); .container { @include container; @include with-layout($layout1); background: orange; @include breakpoint(600px) { @include with-layout($layout2); background: red; } @include breakpoint(1000px) { @include with-layout($layout3); background: blue; } } .testbox { @include span(1); }

html:

<div class="container"> <div class="testbox">hello</div> <div class="testbox">hello</div> <div class="testbox">hello</div> <div class="testbox">hello</div> <div class="testbox">hello</div> <div class="testbox">hello</div> <div class="testbox">hello</div> <div class="testbox">hello</div> </div>

Answer1:

with-layout only changes the settings used for Susy mixins/functions <em>nested inside it</em>:

@include with-layout($layout2) { // code nested here will use the $layout2 settings }

You have nothing nested inside any call to with-layout - therefor no changes. This is exactly what @cimmanon was trying to explain in the comments. Similarly, @media only changes things nested directly inside it — so your colors change fine, but your spans don't. The colors are actually nested, the spans aren't.

Because Sass is pre-processed, span(1) cannot have multiple outputs unless it is called multiple times. Right now you call it once, so it has one output. If you call it multiple times inside different layout contexts, you can get different outputs.

// This will give you different spans at different breakpoints: @include breakpoint(600px) { @include with-layout($layout2) { @include span(1); background: red; } } // you can also use the susy-breakpoint shortcut: @include susy-breakpoint(1000px, $layout3) { @include span(1); background: blue; }

Recommend

  • Add an item into a list recursively
  • Example Oozie job works from Hue, but not from command line: SparkMain not found
  • Passing value from Servlet to JSF Action method in WebLogic
  • finding symmetric difference/unique elements in multiple arrays in javascript
  • jquery limit lines in a paragraph and apply three periods to the end
  • How can I fill all space of a div 100% with 3 divs with the same size?
  • How to prompt user that edits have been made upon changing pages or sorting in Kendo Grid
  • Keep Sql Connection open for iterating many requests? Or close each step?
  • QTP UFT Unable to find row count from table
  • How to distribute an event to all nodes in a (Wildfly) cluster?
  • Binary Tree Traversal Sum Of Each Depth
  • Client side validation mvc dropdown
  • Pre-populated SQLite Database not reading properly in Android Studio
  • Python/Javascript: WYSIWYG html editor - Handle large documents fast and/or design theory
  • Deploying a CodeRush plugin from the Community Site
  • IE6 changes DOCTYPE to a bad one
  • What is the correct way to synchronize a shared, static object in Java?
  • How to override value that appears in a dropdown in the rails_admin gem
  • Remove changes from one element when event occurs on another element?
  • Excel's Macro-Recorder usage
  • jQuery ready not fired after rails link_to is clicked
  • How to use carriage return with multiple line?
  • Listbox within Listbox and scrolling trouble in Windows Phone 7 Silverlight
  • Android full screen on only one activity?
  • Yii2: Config params vs. const/define
  • Disable Enter in editText android
  • Change multiple background-images with jQuery
  • Algorithm for a smudge tool?
  • Android screen density dpi vs ppi
  • DirectX11 ClearRenderTargetViewback with transparent buffer?
  • How to check if every primary key value is being referenced as foreign key in another table
  • Change an a tag attribute in JavaScript based on screen width
  • Weird JavaScript statement, what does it mean?
  • R: gsub and capture
  • jqPlot EnhancedLegendRenderer plugin does not toggle series for Pie charts
  • Comma separated Values
  • Windows forms listbox.selecteditem displaying “System.Data.DataRowView” instead of actual value
  • python regex in pyparsing
  • need help with bizarre java.net.HttpURLConnection behavior
  • How to load view controller without button in storyboard?