Susy-下一个画布示例

Question

有人有使用Susy (2.0测试版)显示画布布局的工作示例吗？

类似于这个http://oddbird.net/2012/11/27/susy-off-canvas/，但最新的苏西(苏西-下一个)？

在上面的例子中，我试图简单地替换几个缺失的混合器，但是我认为我找不到正确的类似物。我用断点替换了at-断点，用列替换了span-列(并保留了相同的参数)

但是，我只是得到了未格式化的文本(甚至没有调试网格背景)。

我已经安装了断点插件(查看susy-下一段代码，它似乎检测到是否存在，然后它可以使用它)。

在这个特殊的时刻--我不知道在$layout变量的范围内将什么传递到span中(再次尝试复制上面逐行引用的旧示例，可能是susy--接下来有更好的习惯用法要遵循)

标记：

<div class="container">
  <header>
    <a href="#left" class="toggle">show-left</a>
    <a href="#right" class="toggle">show-right</a>
    header
  </header>
  <div class="left" id="left">left</div>
  <div class="main">main</div>
  <div class="right" id="right">right</div>
 <footer>footer</footer>

​

风格：

// copied from http://oddbird.net/2012/11/27/susy-off-canvas/


@import "compass";
@import "susy";

@import "config";




// --------------------------------------------
// settings

$total-columns : 5;
$column-width : 4em;
$gutter-width : 1em;
$grid-padding : 1em;

$medium-columns : 8;
$large-columns : 12;

$container-width : container-outer-width($large-columns);



// for susy-next we need layout structure

$my-susy-medium: (
    columns: $medium-columns,
    show-grids: show, // hide,
);



$my-susy-large: (
    columns: $large-columns,
    show-grids: show, // hide,
);



//  global variable used as default $layout

$susy: (
  columns: 12,
  show-grids: show, // hide,
);



// --------------------------------------------
// layout

@include border-box-sizing;




.container {
    @include container;
//    @include show-grid;
  overflow: hidden;
}

// --------------------------------------------
// small

$anchor : 1;
$side : $total-columns - $anchor;

.left {
  @include span($side);
  margin-left: -100%;
  .show-left & { margin-left: 0; }
}

.main {
  @include span($total-columns);
  margin-right: - 100%;
  .show-right & { margin-left: - space($side); }
}

.right {
  @include span($side omega);
  margin-right: -100%;
  .show-right & { margin-right: 0; }
}

// --------------------------------------------
// medium

$main : 5;
$side : $medium-columns - $main;

@include susy-breakpoint($my-susy-medium) {
  [href="#left"] { visibility: hidden; }

  .left {
    @include span($side);
    margin-left: 0;
    .show-right & { margin-left: - 100%; }
  }

  .main {
    width: columns($main);
    .show-right & { margin-left: 0; }
  }

  .right {
    width: columns($side);
    .show-right & { margin-right: 0; }
  }
}

// --------------------------------------------
// large

$main : 6;
$side : ($large-columns - $main)/2;

@include susy-breakpoint($my-susy-large) {
  [href="#right"] { visibility: hidden; }

  .left {
    @include span($side);
    .show-right & { margin-left: 0; }
  }

  .main {
    width: columns($main);
  }

  .right {
    @include span($side omega);
  }
}

// --------------------------------------------
// styles (for demo only)

.container {

    @include susy-breakpoint($my-susy-medium) { @include show-grid; }
    @include susy-breakpoint($my-susy-large) { @include show-grid; }
    text-transform: uppercase;

}

header, footer {
  @include clearfix;
  clear: both;
  min-height: 3em;
  padding: 1em;
  background: rgba(#fcf,.75);
  text-align: center;
}

.toggle { text-transform: none; }
[href="#left"] { float: left; }
[href="#right"] { float: right; }

.left, .right, .main {
  @include transition(.3s all ease);
  height: 20em;
  padding: 1em;
}
.left, .right { @include opacity(0); }

.left {
  background: rgba(#cff,.75);
  .show-left & { @include opacity(1); }
  @include susy-breakpoint($my-susy-medium) {
    @include opacity(1);
    .show-right & { @include opacity(0); }
  }
  @include susy-breakpoint($my-susy-large) {
    &, .show-right & { @include opacity(1); }
  }
}

.main {
  background: rgba(#eee,.75);
  &:after {
    @include leader;
    content: " [adjust your browser width to see the demo in action]";
    display: block;
    text-align: center;
    font-style: italic;
    text-transform: none;
  }
}

.right {
  background: rgba(#ffc,.75);
  .show-right & { @include opacity(1); }
  @include susy-breakpoint($my-susy-large) { @include opacity(1); }
}

Answer 1

对不起，这段代码是一堆旧的和新的苏西，所以我只是从头到尾写了一个演示，使用同样的技术。还有许多其他方法可以在画布上进行布局，您可以将Susy与其中的任何一个一起使用。我不知道这是不是最好的画布解决方案，但这是一个简单的演示。