苏西排水沟大小

Question

我是使用Susy的新手。我刚刚下载并安装到我的应用程序中。我正在使用苏西 2.2

我试图创建一个简单的页面/网格，其中包含 2 列等宽 （50%）。我面临的问题是每列只有 44.4444% 宽，第一列的margin-right为 11.111%

.HTML：

<div class="container">
    <p>Welcome to my ToDo List, please sign in or register</p>
    <div class="log-in-section>
        <p>User name: <input type="text" name="username"></p>
        <p>Password: <input type="text" name="password"></p>
        <button>Log In</button>
    </div>
    <div class="register-section>
        <button>Register</button>
    </div>
</div>

.CSS：

@import '_susy';
.container {
    @include container (12);
    width: 980PX;
    margin: 0 auto;     
    position: relative;
}
.log-in-section {
    @include span(1 of 2);
    border-right: 1px dashed red;
    @include breakpoint(medium) {
        @include span(1 of 1);
    }
}
.register-section {
    @include span(1 at 2 of 2);     
    @include breakpoint(medium) {
        @include span(1 of 1);
    }
}

如何减小默认装订线大小？如何确保log-in-section的border-right显示在屏幕中间？

Answer 1

你应该看看 Susy 设置 （susydocs.oddbird.net/en/latest/settings/）。gutters设置就是您要查找的。此外，gutter-position也值得一看。

此外，通常（取决于网格和网格设置）您需要使用 mixin last声明最后一个网格列：

.register-section {
    @include last;
    ... /* More styles */