来自Susy文档:http://susy.oddbird.net/guides/reference/#ref-grid-background
SUSY GRID BACKGROUND
将Susy Grid显示为任何容器上的背景图像.// susy-grid-background(); .page {@include susy-grid-background; }
如果您将元素用作Container,则需要将背景应用于元素,以使此网格背景正确调整大小.
我的CSS的片段:
$total-cols : 16;
$column-width : 4em;
$gutter-width : 1em;
$grid-padding : $gutter-width;
html { background: #fff no-repeat left top; }
.standard {
@include container;
@include susy-grid-background; /* Susy */
在我的哈姆尔:
%body.standard
无论我尝试过什么,网格总是显示12列.有人会非常友好地指出我需要的方向让这个调试工具工作吗？
susy(1.0.rc.1)指南针(0.13.alpha.0)
我试图解决亚像素舍入误差已经有一段时间了,但到目前为止,我一次又一次地失败了.我试图在Sass和Susy的帮助下完成这项努力.我在上次尝试中使用的mixin来自Github上的Susy问题跟踪器(我已经使用了空格,列以及按下左边/右边边缘的属性,就像那里建议的那样):
@mixin isolate($location, $context: $columns, $dir: 'ltr') {
@if $dir == 'ltr' {
margin-right: -100%;
margin-left: space($location, $context);
}
@else if $dir == 'rtl' {
margin-left: -100%;
margin-right: space($location, $context);
}
}
我的Scss如下所示:
.imggrid{
@include with-grid-settings($gutter: 0.1%){
$y:2;
li{
@include span-columns(2,12);
@for $x from 1 through 30
{
&:nth-child(#{$x}){
@include isolate($y,12);
$y: $y + 2;
@if $y > 12{
$y: 2;
}
}
}
@include nth-omega(6n);
}
}
}
首先,我为图像网格创建了一个自定义装订线.然后我定义了一个变量y,以两个步骤迭代,以便能够调用isolate mixin(isolate(2,12)isolate(4,12)etc).对于大于12的值,该值在最后的for循环中重置为2.然后我跨越一列,每个李走过30张图像.每次调用迭代隔离mixin.在for循环后,我添加了@include nth-omega(6n); 在每个第六个元素之后获得一个新行.
但不知怎的,它根本不起作用.前四行缺少第一个图像,而最后一行缺少前五个元素.任何想法和建议表示赞赏.谢谢拉尔夫
使用:
使用以下SCSS:
$susy: (
columns: 12,
column-width: 5em,
gutter-width: 1em,
gutter-position: after,
grid-padding: gutter-width,
);
$small: 36em;
$medium: 50em;
$large: 65em;
.hlt-container{
@include at-breakpoint($small) {
@include span(6);
@include nth-omega(2n);
margin-bottom: gutter(12);
}
@include at-breakpoint($small $large) {
&:last-child:nth-child(odd){
float: none;
clear: both;
margin-right: auto;
margin-left: auto;
}
}
@include at-breakpoint($large) {
@include span(4);
@include remove-nth-omega(2n,12);
@include nth-omega(3n);
margin-bottom: 0;
}
}
我首先得到错误:
error source/scss/style.scss (Line 10 of source/scss/01-molecules/02-blocks/_00-highlight-block.scss: Undefined mixin 'at-breakpoint'.)
如果我删除了at-breakpoint样式,它会继续运行并再次阻塞remove-nth-omega:
error source/scss/style.scss …
有没有人有使用 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 …每当我尝试保存在codekit中链接的.scss文件时,我都会收到以下错误:
"Compass无法编译项目中的一个或多个文件:
/Applications/CodeKit.app/Contents/Resources/engines/compass/bin/../lib/compass/configuration/data.rb第161行的LoadError:没有要加载的文件 - 可以使用--trace运行来查看完整的回溯"
有谁知道为什么？在我解决这个问题之前我无法继续.我试图更新和卸载/安装所有这些宝石以及codekit本身.
有人可以帮帮我吗？提前致谢!
我喜欢将Codekit用于带有Susy和Breakpoint的Compass-Poject.
@import "compass";
@import "compass/reset";
@import "susy";
@import "breakpoint";
但是有一条错误消息"要导入的文件未找到或不可读:断点".
我可以在Codekit2中使用Breakpoint吗？
谢谢!