带有 susy 断点和固定排水沟的 Susy 网格答案

【问题标题】：Susy grid with susy-breakpoint and fixed gutters带有 susy 断点和固定排水沟的 Susy 网格
【发布时间】：2014-08-05 23:51:56
【问题描述】：

我已经开始使用 Susy，它的功能给我留下了深刻的印象。目前我正在创建一个有 4 个媒体查询的网站：

$mobile: 767px;
$tablet: 768px;
$small: 960px;
$large: 1200px;

对于最后两个 $small 和 $large，我希望有两列固定宽度为 px 和 10px 排水沟。我不想在 % 中出现排水沟，因为我想确保在所有浏览器中结果看起来都是一样的。

所以对于固定的colomnus，我使用susy-breakpoint

@include susy-breakpoint($small, 24 1/1.5 split) {
    .container {
        @include container($small);
    }
    .main{
        .navigationWrap{
            @include span(24);
        }
        .articleWrap {
            @include span(668px);
        }
        .advertisment {
            @include span(240px);
            .advBanner{
                float: right;
            }
        }
    }

} // END of 960px mq

@include  susy-breakpoint($large, 24 1/1.5 split) {

    .container {
        @include container($large);
    }

    .main{
        .navigationWrap{
            @include span(24);//span(4);
        }
        .articleWrap {
            @include span(900px);
        }
    }

} // END of 1200px mq

所以，我的主要问题是：使排水沟固定而不是 %（如 1/1.5）以更好地控制网格的方法和最佳实践是什么？

由于没有人说脏话，我想出了“我自己的方式”来获得固定的排水沟和柱子。

设置如下：

$susy: (
  columns: 24,
  column-width: 40px,
  gutter-width: 10px,
  grid-padding: 10px,
  gutter-position: split,
  global-box-sizing: content-box,
  math: static
);

和主scss：

//from 960px to 1200
@include breakpoint($small) {
    .container {
        @include container($small);
    }
    .header{
        .header-logoWrap{
            @include span(242px);
        }
        .header-bannerWrap {
            @include span(678px);
            img {
                float: right;
            }
        }
    }
    .main{
        .navigationWrap{
            @include span(930px);
        }
        .articleWrap {
            @include span(670px);
        }
        .advertisment {
            @include span(250px);
            .advBanner{
                float: right;
            }
        }
    }

} // END 960px to 1200

// from 1200 final
@include breakpoint($large) {
    .container {
        @include container($large);
    }
    .header{
        .header-logoWrap{
            @include span(242px);
        }
        .header-bannerWrap {
            @include span(918px);
            img {
                float: right;
            }
        }
    }   
    .main{
        .navigationWrap{
            @include span(1170px);
        }
        .articleWrap {
            @include span(910px);
        }
        .advertisment {
            @include span(250px);
            .advBanner{
                float: right;
            }
        }
    }
} // END of 1200px mq

但主要问题仍然悬而未决： - 固定网格和排水沟的最佳做法是什么？

在我建议的代码中，我正在使用

跨度（像素）

如何设置 $susy 以防我在 % 中不使用带列的 span

列数：24，列宽：40px，

【问题讨论】：

标签： css sass gutter

【解决方案1】：

您的设置地图混合使用了 susy1 和 susy2 术语。 Susy 忽略了大多数这些设置。我想这就是你想要的：

$susy: (
  columns: 24,
  column-width: 40px,
  gutters: 10px/40px, 
  gutter-position: split,
  global-box-sizing: content-box,
  math: static
);

gutters 设置始终是相对的，但输出不会是 - 因为您使用的是 static 数学。您也可以在流体网格中使用静态排水沟，但这是一个不同的问题。在边缘没有名为gutter-width 或grid-padding', so those have been removed. Split gutters will leave you with half-gutter padding on the grid (5px). If you want a full10px` 的设置，你可以这样做：

.container {
  padding: 0 gutters();
}

【讨论】：