需要帮助创建基于百分比的SASS网格系统

Question

我的数学是令人震惊的,我不能,因为我的生活让这个计算工作.我正在创建一个CSS网格系统,允许用户指定任意数量的网格列(默认情况下有12个),这些列之间的装订线,列周围的最大宽度以及总宽度内的边距.有希望的结果是每列宽度的百分比宽度和所有列的左边距的百分比.

如果我使用下面的默认值,最大宽度将为1200px,左侧和右侧的内边距将为20,网格的最大允许空间为内部宽度1160.那有意义吗？

我正在使用的是SASS.查看代码中的注释,以查看当前正在工作和不工作的内容.

这是关于jsFiddle的代码:http://jsfiddle.net/mrmartineau/fMeBk/

$gridColumnCount      : 12;   // Total column count
$gridGutterWidth      : 40;   // [in pixels]
$gridColumnPadding    : 30;   // [in pixels]
$gridMaxWidth         : 1200; // [in pixels]
$gridMargin           : 20;   // [in pixels] Space outside the grid

@function gridColumnWidth() {
    @return $gridMaxWidth / $gridColumnCount;
}
// Grid calculations
@function gridColumnWidthCalc($colNumber) {
    // Is correct
    @if $gridGutterWidth == 0 {
        @return percentage($colNumber / $gridColumnCount);
    }
    // Is incorrect
    @else $gridMargin > 0 {
        @return percentage( (($colNumber / $gridColumnCount) - gutterCalc(false) ) );
    }
}

@mixin columns($columnSpan: 1) {
    width: gridColumnWidthCalc($columnSpan);
}
@function gutterCalc($showUnit: true) {
    @if $showUnit == true {
        @return percentage( $gridGutterWidth / ( $gridMaxWidth - ($gridMargin * 2) ) );
    } @else {
        @return $gridGutterWidth / ( $gridMaxWidth - ($gridMargin * 2) ) * 100;
    }
}

@mixin gridColumn() {
    @if $gridGutterWidth > 0 {
        margin-left: gutterCalc();
    }
    @if $gridColumnPadding > 0 {
        padding: $gridColumnPadding + px;
    }
    float: left;
    min-height: 30px;
    position: relative;
    clear: none;
    &:first-child {
        margin-left: 0;
    }
    background-color: pink;
    border: 1px solid red;
}
@for $i from 1 to $gridColumnCount + 1 {
    .span#{$i}  { @include columns($i); }
}

.container {
    padding-left: $gridMargin + px;
    padding-right: $gridMargin + px;
    max-width: $gridMaxWidth + px;
}

.col {
    @include gridColumn();
}


?

Answer 1

好的,我花了一个小时来理解你的无评论代码.

首先,作为网格单元的"列"和作为实际元素的"列"之间存在歧义.下面我称之为"块".

你正确地覆盖了连续第一个区块的排水沟.因此,沟槽的总数比一行中的块数少一个.

但是当你计算块宽时,你会从每一列中减去排水沟,而不考虑排水沟比排水槽少.

因此,您应按比例减小块的宽度.

工作方案:

// Accepts a number of columns that a block should span.
// Returns a percentage width for that block.
@mixin columns($columnSpan: 1) {
    $number-of-blocks-in-container: $gridColumnCount / $columnSpan;
    $total-width-of-all-gutters:    gutterCalc(false) * ($number-of-blocks-in-container - 1);
    $total-width-of-all-blocks:     1 - $total-width-of-all-gutters;
    $width-of-a-single-block:       $total-width-of-all-blocks / $number-of-blocks-in-container;

    width:                          percentage( $width-of-a-single-block );
}

现在你的车轮正在滚动!请参阅它的实际操作:http://jsfiddle.net/fMeBk/46/请记住,浏览器会稍微调整百分比值,因此网格定位可能不是像素完美的.顺便说一句,右对齐连续的最后一个块是必要的,以最小化此舍入误差的视觉效果.

老兄,你的代码架构是错误的,你的方法有很多缺点.如果你愿意,我可以给它们命名.

你真的应该给Susy另一次尝试.它是SASS的精彩片段,也是学习SASS技术的重要资源.它的源代码在GitHub上有很好的评论和可用.

据你所知,你的网格框架的功能是什么？

我向你保证,苏西可以做你想做的事.只是解释一个任务,我会尝试利用Susy提出一个优雅的解决方案.

PS我不是想阻止你进行实验.实践变得完美!尝试是必要的,你做得很好.我想告诉你的是,你应该遵循一个好的榜样并采用良好的做法,这样你就不会在错误的地方结束.

PPS请给我回复我的评价.我花了很多时间来帮助你,而你却把我的答案弄得一团糟.:(