Susy-next 画布示例

Question

有没有人有使用 Susy-next（2.0 测试版）显示画布布局的工作示例

与此类似http://oddbird.net/2012/11/27/susy-off-canvas/ 但使用最新的 susy (susy-next) ？

我曾尝试简单地替换上面示例中缺少的几个 mixin，但我认为我找不到正确的类似物，例如。我用断点替换了断点，用列替换了跨列（并使参数保持不变）

但是，我只是得到无样式的文本（甚至不是调试网格背景）

我安装了断点插件（查看 susy-next 代码，它似乎可以检测是否存在，然后可以使用它）。

在这个特殊的时刻 - 我不太明白就 $layout 变量而言要传递给 span mixin 的内容（同样，我只是试图逐行复制上面引用的旧示例，可能与 susy-next 有更好的习语遵循）

标记：

<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 的一团糟，所以我只是使用相同的技术从头开始编写了一个演示。还有许多其他方法可以进行画布外布局，您可以将 Susy 与其中任何一种一起使用。我不知道这是最好的画布外解决方案，但它是一个简单的演示。