Susy Grid,我学的越多,我就越困惑

时间:2014-02-14 08:43:23

标签: sass susy-compass

我对这个网格概念非常新,我非常习惯:

<header>
<div class="wrap"></div>
</header>

header{width:100;display:inline;min-height:120px;height:100%;}
.wrap{width:960px;display:block;margin:0 auto;padding:0;position:relative;}

现在有了这个新的Heoric尝试用我带来的susy来学习网格;

.den-100{
  @include span-columns(12);
}


    .den-1r { @include span-columns(1) ;}
    .den-2r { @include span-columns(2) ;}
    .den-3r { @include span-columns(3) ;}
    .den-4r { @include span-columns(4) ;}
    .den-5r { @include span-columns(5) ;}
    .den-6r { @include span-columns(6) ;}
    .den-7r { @include span-columns(7) ;}
    .den-8r { @include span-columns(8) ;}
    .den-9r { @include span-columns(9) ;}
    .den-10r{ @include span-columns(10);}
    .den-11r{ @include span-columns(11);}
    .den-12r{ @include span-columns(12);}

    .den-1c { @include isolate(1) ;}
    .den-2c { @include isolate(2) ;}
    .den-3c { @include isolate(3) ;}
    .den-4c { @include isolate(4) ;}
    .den-5c { @include isolate(5) ;}
    .den-6c { @include isolate(6) ;}
    .den-7c { @include isolate(7) ;}
    .den-8c { @include isolate(8) ;}
    .den-9c { @include isolate(9) ;}
    .den-10c{ @include isolate(10);}
    .den-11c{ @include isolate(11);}
    .den-12c{ @include isolate(12);}

所以

我能做到:

<header class="den-100">
<aside class="den-3c den-5r></aside>
<aside class="den-8c den-2r"></side>
</header>

它确实像以前的工作流程一样工作,但现在我很困惑,这是SusyGrid的正确方法吗?

响应怎么样?使用断点和display:block将是正确的方法吗?

我将直接进入免费机票。 MayBe Susy文档对我来说太复杂了......

感谢

0 个答案:

没有答案