我想测试bourbon整洁的网格,我尝试实际上做一个移动的第一个方法网格。 我的结构看起来像:
#general #header .headHaut .headBas #content-global #left-content #content-inner #right-content #footer我的网格设置:
$mobile-size:em(320); $tablet-size:em(720); $desktop-size:em(1000); // Bourbon Neat Breakpoints - règle le nombre de colonnes $mobile: new-breakpoint(min-width $mobile-size 4); $tablet: new-breakpoint(min-width $tablet-size 8); $desktop: new-breakpoint(min-width $desktop-size 12);我的scss:
body #general{ //Approche mobile-first,réglage pour mobile @include outer-container; padding-top: 2em; background: transparent; #header{@include span-columns(4);} #content-global{@include span-columns(2);} #left-content{} #content-inner{} #right-content{} #footer{@include span-columns(4); @include background-size;} @include breakpoint ($desktop) {/* //Dimensions pour les pc*/ background: transparent; #header{@include span-columns(12);} #content-global{@include span-columns(12);} #left-content{@include span-columns(2 of 12);} #content-inner{@include span-columns(8 of 12);} #right-content{@include span-columns(2 of 12);} #footer{@include span-columns(12); @include background-size(auto); } } @include breakpoint($tablet) {/* //Dimensions pour les tablettes*/ } }例如,我根据断点更改背景颜色,在PC屏幕上,颜色被移动设备覆盖..但是列号是正确的...奇怪。
感谢帮助
EDIT1:我需要指定断点来应用mobile的设置。就像这样:
body #general{ //Approche mobile-first,réglage pour mobile @include outer-container; padding-top: 2em; background: transparent; @include breakpoint ($mobile){} #header{@include span-columns(4);} #content-global{@include span-columns(2);} #left-content{} #content-inner{} #right-content{} #footer{@include span-columns(4); @include background-size;} @include breakpoint ($desktop) {/* //Dimensions pour les pc*/ background: transparent; #header{@include span-columns(12);} #content-global{@include span-columns(12);} #left-content{@include span-columns(2 of 12);} #content-inner{@include span-columns(8 of 12);} #right-content{@include span-columns(2 of 12);} #footer{@include span-columns(12); @include background-size(auto); } } @include breakpoint($tablet) {/* //Dimensions pour les tablettes*/ #header{} #content-global{} #left-content{} #content-inner{} #right-content{} #footer{} } }但是我在页面的内部部分遇到了麻烦。我需要指定容器还是仅仅调整mixin的列?
i would to test bourbon neat grid and i try actually to do a mobile first approach grid. My structure look like:
#general #header .headHaut .headBas #content-global #left-content #content-inner #right-content #footerMy grid settings:
$mobile-size:em(320); $tablet-size:em(720); $desktop-size:em(1000); // Bourbon Neat Breakpoints - règle le nombre de colonnes $mobile: new-breakpoint(min-width $mobile-size 4); $tablet: new-breakpoint(min-width $tablet-size 8); $desktop: new-breakpoint(min-width $desktop-size 12);My scss:
body #general{ //Approche mobile-first,réglage pour mobile @include outer-container; padding-top: 2em; background: transparent; #header{@include span-columns(4);} #content-global{@include span-columns(2);} #left-content{} #content-inner{} #right-content{} #footer{@include span-columns(4); @include background-size;} @include breakpoint ($desktop) {/* //Dimensions pour les pc*/ background: transparent; #header{@include span-columns(12);} #content-global{@include span-columns(12);} #left-content{@include span-columns(2 of 12);} #content-inner{@include span-columns(8 of 12);} #right-content{@include span-columns(2 of 12);} #footer{@include span-columns(12); @include background-size(auto); } } @include breakpoint($tablet) {/* //Dimensions pour les tablettes*/ } }For example, i change background color depending on breakpoint, and on a pc screen, the color is override by the mobile one..but columns number is the right one...strange.
thanks for help
EDIT1: i need to specify the breakpoint to apply settings for mobile.Like this:
body #general{ //Approche mobile-first,réglage pour mobile @include outer-container; padding-top: 2em; background: transparent; @include breakpoint ($mobile){} #header{@include span-columns(4);} #content-global{@include span-columns(2);} #left-content{} #content-inner{} #right-content{} #footer{@include span-columns(4); @include background-size;} @include breakpoint ($desktop) {/* //Dimensions pour les pc*/ background: transparent; #header{@include span-columns(12);} #content-global{@include span-columns(12);} #left-content{@include span-columns(2 of 12);} #content-inner{@include span-columns(8 of 12);} #right-content{@include span-columns(2 of 12);} #footer{@include span-columns(12); @include background-size(auto); } } @include breakpoint($tablet) {/* //Dimensions pour les tablettes*/ #header{} #content-global{} #left-content{} #content-inner{} #right-content{} #footer{} } }but i get troubles with inside parts of the page.do i need to specify the container or just span columns mixin is enought ?
最满意答案
你需要确保你@ @import 'neat-helpers'; 在宣布断点之前。 请参阅此处的入门说明: https : //github.com/thoughtbot/neat#getting-started
You need to make sure you @import 'neat-helpers'; before you declare your breakpoints. See the Getting Started instructions here: https://github.com/thoughtbot/neat#getting-started
更多推荐
发布评论