使用 Compass 和 Blueprint 创建一个填充框 mixin

发布于 2024-08-05 20:51:49 字数 348 浏览 4 评论 0原文

界面应该是这样的

+box(optional_padding_value_in_columns)

它不应该破坏网格。（如果放置在跨越 7 个单位的列中，则该框应保持在 7 个单位之内。）

Compass _scaffolding.sass 实际上包含这个小数字：

// Mixin +box to create a padded box inside a column.
=box
  :padding 1.5em
  :margin-bottom 1.5em
  :background #E5ECF9

但是填充会炸毁网格。

原文

The interface should look like this

+box(optional_padding_value_in_columns)

It shouldn't break the grid. (If placed in column that spans 7 units, then the box should stay within the 7 units.)

Compass _scaffolding.sass actually includes this little number:

// Mixin +box to create a padded box inside a column.
=box
  :padding 1.5em
  :margin-bottom 1.5em
  :background #E5ECF9

But the padding blows up the grid.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

趁微风不噪 2024-08-12 20:51:50

+box mixin 适用于列内使用的块元素。 1.5em 填充与蓝图列宽不成比例，因此将其放在列元素上会破坏布局。

回复收藏 0 原文

前事休说 2024-08-12 20:51:50

试试这个：

// You can supply one padding value or all 4
=padded_column(!n, !p1, !p2=!p1, !p3=!p1, !p4=!p1)
  +column(!n)
  :padding= !p1 !p2 !p3 !p4
  !width = !blueprint_grid_width * !n + (!blueprint_grid_margin * (!n - 1)) - !p2 - !p4

.padded_box
  +padded_column(!two_columns_secondary, 10px, 0, 5px, 15px)
  :background #f0f0f0

Try this:

// You can supply one padding value or all 4
=padded_column(!n, !p1, !p2=!p1, !p3=!p1, !p4=!p1)
  +column(!n)
  :padding= !p1 !p2 !p3 !p4
  !width = !blueprint_grid_width * !n + (!blueprint_grid_margin * (!n - 1)) - !p2 - !p4

.padded_box
  +padded_column(!two_columns_secondary, 10px, 0, 5px, 15px)
  :background #f0f0f0

回复收藏 0 原文

~没有更多了~