Question

有没有人有一个使用Susy-next（2.0 beta）显示画布外布局的工作示例

与此http://oddbird.net/2012/11/27/susy-off-canvas/类似，但最新的susy（susy-next）？

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

但是，我只是简单的文本（甚至不是调试网格背景）

我安装了断点插件（查看似乎存在的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的混乱，所以我只是wrote a demo from scratch，使用相同的技术。还有很多其他方法可以做画布外布局，你可以将Susy与其中任何一个一起使用。我不知道这是最好的非画布解决方案，但这是一个简单的演示。

Susy-下一个画布上的例子

1 个答案: