Susy网格有susy-breakpoint和固定排水沟

时间:2014-06-16 07:50:54

标签: css css3 sass gutter

我已经开始使用Susy,我对它的功能印象非常深刻。 目前我正在创建一个网络,我有4个媒体查询:

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

最后两个$ small和$ large我希望在px和10px排水沟中有两个固定宽度的列。 我不希望排水沟在%bacause因为我想确保在所有浏览器中结果看起来相同。

因此对于固定的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),以便更好地控制网格?

由于没有人回答,我以“我自己的方式”为了获得固定的排水沟和colomns。

设置为:

$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

但主要问题仍然是开放的: - 固定网格和排水沟的最佳做法是什么?

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

  

span(px)

我该如何设置 $susy如果我在%

中不使用span和colums

列:24,   列宽:40px,

1 个答案:

答案 0 :(得分:0)

您的设置图使用了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-widthgrid-padding', so those have been removed. Split gutters will leave you with half-gutter padding on the grid ( 5px ). If you want a full 10px`的设置,您可以执行以下操作:

.container {
  padding: 0 gutters();
}