SUSY2 - 网格，跨度速记与分离模式

的index.htmlSUSY2 - 网格，跨度速记与分离模式

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset="utf-8" /> 
     <title>Working with Susy 2 Grid Layouts</title> 
     <link rel="stylesheet" href="css/app.css" type="text/css" media="screen" title="no title" charset="utf-8"> 
     <link rel="stylesheet" href="css/normalize.css" type="text/css" media="screen" title="no title" charset="utf-8"> 

     <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0/pure-min.css"> 

    </head> 
    <body> 

     <div class="notice"><h3>Susy is GREAT.. But really..!</h3></div> 
     <div class="container"> 
      <div class="one"><strong>1</strong><br /> 
       @include span(8)<br /> 
       @include prefix(1) <em>//padding</em><br /> 

      </div> 

      <div class="buttons"> 
       <a href="#" class="pure-button">A Pure Button</a> 
      </div> 
      <div class="notice">this is some notice</div> 
     </div> 
    </body> 
</html>

app.scss

@import 'susy'; 

$susy: (
    flow: ltr, 
    output: float, 
    math: fluid, 
    column-width: false, 
    container: 1140px, 
    last-flow: to, 
    columns: 12, 
    gutters: 1/8, 
    gutter-position: after, 
    global-box-sizing: border-box, 

    debug: (
     image: show, 
     color: rgba(green, .25), 
     output: background, 
     toggle: top right 
    ), 
); 

@include global-box-sizing(border-box); 

img { 
    width: 100%; 
    height: auto; 
} 

.notice { 
    @include full; 
    background-color: yellow; 
} 

.notice { 
    padding: 5px 8px; 
} 

.container { 
    @include container; 
    font-size: small; 
} 

em { 
    background-color: yellow; 
    color: black; 
    font-weight: bold; 
} 

.one { 
    @include span(8); // can be narrow(default), wide & wider 
    @include prefix(1); 

    height: 200px; 
    background-color: blue; 
    color: white; 
} 

.buttons { 
    @include span(1 at 2 fluid isolate); // shouln't this be 1 at 10 as it is still in context of 12??? 
}

不宜与isolate模式跨度的简写，指定列10，而不是的2，因为我仍然在12列的背景下，前8个被 .one div占据？ Susy中的其他所有东西都具有逻辑性，并且我没有任何问题，但是这个问题会让我失望。

但是，如果我指定：

.buttons { 
    @include break; // which does clear:both on this element 
    @include span(1 at 10 fluid isolate); 
}

，那么我得告诉它是第10列。这是否应该像这样工作？

来源

2014-09-01 branquito

由于Susy不知道DOM，所有定位是相对于默认流程。隔离可以解决这个问题，如果给定上下文中的所有内容都是孤立的 - 因为这会将所有内容从水平流中抽出。但是当你只隔离一个元素时，它会将其自身置于其他元素之外。

来源

2014-09-24 04:55:29

SUSY2 - 网格，跨度速记与分离模式

回答

相关问题