排水沟尺寸

Question

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

我试图创建一个简单的 page/grid，它有两列等宽 (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也值得一看

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

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

排水沟尺寸

Susy Gutter Size

css

susy-compass

susy-sass

susy