PROSAGA码农传奇-雾计算/网格计算-需要帮助创建基于百分比的SASS网格系统

0# 听风～ | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”>
  <P>
    好的，我花了一个小时来理解你的无评论代码。
  </p>
  <P>
    首先，作为网格单元的“列”和作为实际元素的“列”之间存在歧义。下面我称之为“块”。
  </p>
  <P>
    你正确地覆盖了连续第一个区块的排水沟。因此，沟槽的总数比一行中的块数少一个。
  </p>
  <P>
    但是当你计算块宽时，你会从每一列中减去排水沟，而不考虑排水沟比排水槽少。
  </p>
  <P>
    因此，您应按比例减小块的宽度。
  </p>
  <P>
    工作方案：

</p>
   <pre>
    <code>
      // 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 );
}

</code>
  </pre>
  <P>
    现在你的车轮正在滚动！看到它的实际效果：
    <a href="http://jsfiddle.net/fMeBk/46/">
      http://jsfiddle.net/fMeBk/46/
    </A>
     请记住，浏览器会以略微错误的方式对百分比值进行舍入，因此网格定位可能不是像素完美的。顺便说一句，右对齐连续的最后一个块是必要的，以最小化此舍入误差的视觉效果。
  </p>
  <P>
    老兄，你的代码架构是错误的，你的方法有很多缺点。如果你愿意，我可以给它们命名。
  </p>
  <P>
    你真的应该给Susy另一次尝试。它是SASS的精彩片段，也是学习SASS技术的重要资源。它的源代码在GitHub上有很好的评论和可用。
  </p>
  <P>
    据你所知，你的网格框架的功能是什么？
  </p>
  <P>
    我向你保证，苏西
    的<strong>
      能够
    </强>
     做你想做的。只是解释一个任务，我会尝试利用Susy提出一个优雅的解决方案。
  </p>
  <P>
    PS我不是想阻止你进行实验。实践变得完美！试验
    的<strong>
      是
    </强>
     必要的，你做得很好。我想告诉你的是，你应该遵循一个好的榜样并采用良好的做法，这样你就不会在错误的地方结束。
  </p>
  <P>
    PPS请给我回复我的评价。我花了很多时间来帮助你，而你却把我的答案弄得一团糟。 :(
  </p>
</DIV>

1# v-star*위위 | 2019-08-31 10-32

2# 敢嫁就敢娶 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”>
  <P>
    您没有说明任何具体问题，这是针对StackOverflow规则的。
  </p>
  <P>
    如果没有你对框架结构的解释，很难理解你正在尝试用每个函数和mixin实现什么。
  </p>
  <P>
    我们该如何帮助？
  </p>
  <P>
    无论如何，你的方法有问题有两个原因：
  </p>
  <OL>
    <LI>
      你正试图重新发明轮子。已经有几十个网格框架。
    </LI>
    <LI>
      您使用的是非语义方法。您通过在HTML中应用特定于样式的类来进行样式设计。相反，你的类应该是语义的（即说明块的功能，而不是它们的外观），并且样式应该应用于CSS中的那些类。有了SASS，这很容易。
    </LI>
  </醇>
  <P>
    解决方案：使用
    <a href="http://susy.oddbird.net/" rel="nofollow">
      与Susy
    </A>
    。这是一个很棒的软件，它的作者Eric Meyer在StackOverflow上非常敏感。
  </p>
  <P>
    使用Susy，您的代码可能如下所示：
  </p>
  <P>
    HTML：

</p>
   <pre>
    <code>
      <div id="container">
        <div id="gallery">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
        <div id="promos">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
        <div id="footer">
            <div id="bottom-menu"></div>
            <div id="partners"></div>
            <div id="social-buttons"></div>
        </div>
        <div>
            <div class="col span12"></div>
        </div>
</div>

</code>
  </pre>
  <P>
    上海社会科学院：

</p>
   <pre>
    <code>
      //////////
// Imports
//////////

@import susy

//////////
// Defining variables
//////////

// Main grid properties
$total-columns  : 12      // Number of columns
$container-style: fluid   // The grid should stretch
$max-width      : 1200px  // But not wider than this

// Proportions between column width and gutter between columns
$column-width   : 85%     
$gutter-width   : 100% - $column-width

// Setting margins around the grid
$grid-padding   : 1em     // This will remain absolute
$container-width: 100%    // If you want relative margins, change this instead

//////////
// Applying containers and columns
//////////

// Setting containers in all immediate children of #container
#container > *
  +container /* 锟斤拷 Actual Susy magic! :D */
  max-width: $max-width

// Setting columns
#gallery > *
  +span-columns(1)
  &:last-child             // The last column should be marked with "omega"
    +span-columns(1 omega) // to compensate browsers' calculation errors

#promos > *
  +span-columns(2)
  &:last-child
    +span-columns(2 omega)

// #footer
#bottom-menu
  +span-columns(6)

#partners
  +span-columns(4)

#social-buttons
  +span-columns(2 omega)

</code>
  </pre>
  <P>
    对不起，我没有测试过这段代码，它可能包含错误，但您仍然可以看到这个想法。
  </p>
  <P>
    Susy还可以让您轻松创建响应式网格。他们说Susy将成为Compass中的默认网格引擎。
  </p>
  <P>
    UPD：查看旁边的问题特定答案！
  </p>
</DIV>