susy-compass

问题 It's difficult to tell what is being asked here. This question is ambiguous, vague, incomplete, overly broad, or rhetorical and cannot be reasonably answered in its current form. For help clarifying this question so that it can be reopened, visit the help center. Closed 7 years ago . I was wondering what (if any) shims you use to get the magic grids to respond correctly in SUSY in IE8 and under? On non-susy sites I've always used moderizr or the shim from google and they worked as expected. I

问题 Is it possible to override the default gutter value for a container with base values e.g. like that: $total-columns: 12; $column-width: 60px; $gutter-width: 20px; $grid-padding: 10px; So that you would be able to minimize the gutter from 20px to e.g. only 5px, or any other desired value, on demand. .example{ @include squish(1,1); li{ @include span-columns(2,10); @include nth-omega(5n); } } Is it possible via a mixin, would i have to place another container/layout or should i stick with plain

问题 I'm using Susy. I failed leveraging the content-first approach and decided to go window-px-widths-first At first i tried the content-first approach to grids, but soon i found my site behaving unexpectedly on different devices. It would display a mobile layout where i wanted a tablet layout, etc. I ended up adjusting em values of Susy settings for them to match certain screen widths (px values). The code got ugly and i realized that i wasn't actually using the content-first approach any more.

问题 In the Compass/Sass plugin, Susy, you set the number of columns in the _base.scss file. For a desktop view, I like to have 12 columns. However, this is too many columns for a mobile view. Is there a way to change the number of columns for a mobile display? (I'm make a responsive web design, so both the desktop and the mobile versions of the site will share the same _base file). Thanks! 回答1: UPDATE: Susy 1.0 now has this feature built in using the at-breakpoint mixin. See the docs on the

问题 I just can't figure out what is wrong with my setup with Susy. I am on OS X 10.7.4 I have followed along here: http://susy.oddbird.net/guides/getting-started/ Error Syntax error: File to import not found or unreadable: susy. Load paths: Users/simon/Websites/wpsvntree/trunk/sass /Users/simon/.gem/ruby/1.8/gems/compass-0.11.7/frameworks/blueprint/stylesheets /Users/simon/.gem/ruby/1.8/gems/compass-0.11.7/frameworks/compass/stylesheets Compass::SpriteImporter on line 2 of /Users/simon/Websites

问题 I just can't figure out what is wrong with my setup with Susy. I am on OS X 10.7.4 I have followed along here: http://susy.oddbird.net/guides/getting-started/ Error Syntax error: File to import not found or unreadable: susy. Load paths: Users/simon/Websites/wpsvntree/trunk/sass /Users/simon/.gem/ruby/1.8/gems/compass-0.11.7/frameworks/blueprint/stylesheets /Users/simon/.gem/ruby/1.8/gems/compass-0.11.7/frameworks/compass/stylesheets Compass::SpriteImporter on line 2 of /Users/simon/Websites

问题 I'm working with Sass, Compass and Susy on OSX / Terminal. But I can't get Susy to work together with Sass and Compass. What I've done: sudo gem install sass sass -v Returns: Sass 3.3.0 (Maptastic Maple) sudo gem install compass This seems to also install sass-3.2.14.gem, then the compass-0.12.3.gem. compass -v returns: Compass 0.12.3 (Alnilam) Everything until this point seems to work fine; I can create a Compass project and work with it. Then I try to install Susy: sudo gem install susy -

问题 I am new to Susy and I am trying to utilize span-columns mixin however I am getting the following error: Syntax error: Undefined mixin 'span-columns' I have installed compass-susy-plugin (0.9) and I do not have the Susy gem installed. SCSS Files include screen.scss and _base.scss screen.scss // Imports ------------------------------------------------------------------- @import "base"; @import "typography"; /* Layout ------------------------------------------------------------------*/

问题 I am having the following HTML: <div class='layout-wrap'> <div class='mod-header'> <a class='logo' href="#"></a> <nav> <a class="action" href="#">Join now</a> <ul class="tour"> <li><a href="#">item 1</a></li> <li><a href="#">item 2</a></li> <li><a href="#">item 3</a></li> </ul> <ul class="search"> <li><a class="find" href="#">search</a></li> </ul> </nav> </div> </div> See also: http://jsfiddle.net/mulderp/fZ8cW/ And CSS: .logo { text-indent: -9999px; float: left; width: 16rem; } nav { float:

问题 I am creating a completely fluid design portfolio site that has a design thumbnail gallery page showing a grid of thumbnail tile links which a viewer can click to see the full art work. Since the site is completely fluid, the tile widths only match the tile height 3 times as one switches between the 3 responsive states since the heights are locked in place. How can I make the height match the width of each thumbnail tile? Here is the code: @import compass @import susy @import normalize $total