從網格容器中推入/拉出元素

Question

是否可以從容器中拉出元素，同時保持它們與主網格對齊？

在圖像波紋管中，我有一個im試圖實現的表示。假設我的所有文本（包括第一列中的較小細節）位於跨越第2列和第3列的容器上。然後，我希望較小的文本從該容器中拉出一列到左側，實際移動到第1列，同時與主副本保持一致。

紅框是主網格，藍色是內部容器元素。

這對Singularity可能嗎？

Answer 1

這是完全有可能的奇異！

要將元素從容器中拉出，只需使用負邊距。但是，適當的寬度和邊距大小需要一些棘手的數學：

<div id=container> 
    <div id=a>a</div> 
    <div id=b>b</div> 
    <div id=c>c</div> 
</div> 

$grids: 1 2 2 
$gutters: .25 


#container 
    +grid-span(2,2) 

#b 
    $coefficient: (1 + 2 + 2)/(2 + 2) 
    $width: column-span(1, 1) * $coefficient 
    $gutter: gutter-span() * $coefficient 

    width: $width 
    margin-left: 0 - $width - $gutter 

    float: left 
    clear: both 

+layout(2 2) 
    #a, #c 
    +grid-span(2, 1) 

結果：

演示：http://sassbin.com/gist/6953993/

注意的是，拉列的寬度和位置做完美匹配網格。這可能是由於瀏覽器中的四捨五入錯誤，或者我的數學可能是錯誤的。

Answer 2

不得以目前的形式，雖然現在你可能會發現這個有用：https://github.com/Team-Sass/toolkit#nested-context