Skip to main content
 首页 » 编程设计

singularitygs中删除缩略图网格中的填充

2025年01月19日76yxwkf

请看一下这个要点: http://sassmeister.com/gist/6d575ec85663865fa567

在那里你可以看到通过float-span实现的placehold.it缩略图网格 我现在需要的是:

  • 每行第一个.item的padding-left应该为0

  • 每行最后一个.item的padding-right应该为0

这最终会出现在缩略图网格中,与其余内容完美对齐(例如 lorem ipsum 文本)

用奇点来实现这一目标的最佳方法是什么?

更新2014-07-21

我需要的可以在这个屏幕中看到:

demo

我不需要其他填充样式,我需要删除每行中第一个和最后一个项目的填充。这不能通过 css 完成,因为 sass 计算会错误。

更新2014-07-30

根据各种来源,我成功地建立了这个 mixin:

@mixin thegrid($layout, $cols, $el: "div", $thegutter: .1){ 
 
  @include layout($layout, $gutter: $thegutter) { 
 
  @for $i from 1 through $cols { 
    @if $i == 1 { 
      #{$el}:nth-child(#{$cols}n+#{$i}) { 
        @include isolation-span(1, $i, left); 
      } 
    } 
    @else if $i < $cols { 
      #{$el}:nth-child(#{$cols}n+#{$i}) { 
        @include isolation-span(1, $i, none); 
      } 
    } 
    @else { 
      #{$el}:nth-child(#{$cols}n+#{$i}) { 
        @include isolation-span(1, $i, right); 
      } 
    } 
   } 
  } 
} 

可以称为例如通过:

$layout: 1 1 1; 
@include thegrid($layout, 3, $el: ".item"); 

示例如下:http://sassmeister.com/gist/7a45960747ad3d4bbf56

请您参考如下方法:

不知道你的意思。

您正在应用具有绝对值的装订线。这就是 Singularity 所说的固定排水沟。

Singularity 通过对网格元素应用填充来实现固定装订线。

填充可以应用两种样式:

  • split:装订线大小除以二,所得值将用作每个网格项的左右填充。
  • 相反:装订线大小的值作为右填充应用于除占据最后一列的项目之外的每个项目。

因此,如果您对分开的排水沟不满意,请切换到相反的排水沟。这是默认行为,因此您只需注释掉 @include add-gutter-style('split');

如果您对任一装订线样式不满意,那么您可以手动删除不需要的填充。这没有多大意义,因为如果您将零填充应用于占据第一列和最后一列之外的项目,则会扭曲网格。如果您仅将它们应用于占据第一列和最后一列的项目,您基本上会获得与相反装订线样式相同的设置。

如果您绘制所需布局的铅笔图,您可能会得到更好的帮助。

更新2014-07-21

好的,现在你的意思很清楚了。

所以你基本上希望外层有分开的排水沟,而内层有相反的排水沟。您已经在使用覆盖网格设置所需的 layout() mixin,因此您可以告诉它覆盖装订线样式,例如。例如:

@mixin layout(2, $gutter-style: 'opposite') { 

不幸的是,由于 Singularity 通过填充创建固定的装订线,它们只能在分割模式下发挥良好的作用。在相反的模式下,固定排水沟会产生不均匀的列。

所以你必须使用相对间距:

@mixin layout(2, 0.1, $gutter-style: 'opposite') { 

您必须记住以下几点:

  1. 分别跨越每行中的最后一项。

    使用相反的装订线样式,每行中的最后一项很特殊:它不包含右侧装订线。因此,您必须告诉 Singularity 哪一项是行中的最后一项。

    为此,我们将使用 :nth-child(Xn + Y) 选择器,其中 X 是行中的项目数, Y 是该行中目标项目的数量。由于我们的目标是最后一项,XY 将相等:

    @include float-span(1); 
     
    &:nth-child(4n + 4) { 
      @include float-span(1, last); 
    } 
    
  2. 隔离媒体查询。

    一旦对每个断点执行此操作,您最终将得到应用于不同断点中的不同项目的样式。这些样式不会被覆盖,因此将从较小的断点泄漏到较大的断点,从而破坏布局。

    您可以手动覆盖它们,但这是一项吃力不讨好的工作。相反,隔离您的媒体查询,以免样式泄漏:

    $beforeMediumBreakpoint: max-width 799px; 
    $mediumBreakpoint:       800px; 
     
    // Mobile view (formerly without a media query) 
    @include breakpoint($beforeMediumBreakpoint) { 
    

演示:http://sassmeister.com/gist/dd9f1af025900d7e63db

PS 我的一条建议:不要使用固定装订线和分割模式。使用流体装订线和默认的相反模式。这将为您省去很多麻烦!您始终可以通过向最外层容器应用填充来模拟分割装订线。

您可以做一些数学计算来计算容器的相对填充,该填充将等于网格项之间的间距!借助数学的魔力,您甚至可以将底部边距应用于等于网格装订线的网格项,从而生成漂亮的统一缩略图网格。

我创建了一个漂亮的扩展 Singularity Quick Spanner这可以减少您设置缩略图网格所需的工作量。 See it in action (注意垂直装订线等于水平装订线)。