用于小型和大型（流体/响应）列的 Zurb Foundation 4 SCSS 混合

Posted 2023-03-06

【中文标题】用于小型和大型（流体/响应）列的 Zurb Foundation 4 SCSS 混合

【英文标题】：Zurb Foundation 4 SCSS mixins for small and large(fluid/responsive) columns

【发布时间】：2013-03-18 15:29:00

【问题描述】：

我正在构建一个公司响应式网站，并首次同时使用 SASS 和 Foundation 4 CSS 框架。到目前为止，一切都很好。 但是，我在这里遇到了 mixins 的“问题”。 如果我想要一个在大视图中大小为 6、在小视图中大小为 3 的列，我可以使用内置的 CSS 类

 class="large-6 small-3 columns"

有没有办法通过 Foundation SASS mixin 来做到这一点？我发现here 的列的唯一混合是

@include grid-column($columns, $last-column, $center, $offset, $push, $pull, $collapse, $float);

就我所得到的，我无法在此处指定 veiwports。

有什么想法吗？ 提前谢谢你

【参考方案1】：

对于这些你应该使用语义类。

class="something-descriptive"

在你的 sass 中包含不同大小的不同 mixin，如下所示：

.something-descriptive 
    @include grid-column(3)


@media screen and (min-width: 700px) 
    .something-descriptive 
        @include grid-column(6)
    

【讨论】：

谢谢！但我想知道的是他们是否有内置的 SASS mixin。不过我会检查他们的@media 设置并尝试自己实现它。

他们有也没有：他们没有像@include small-grid-column(6)这样的明确的东西，但他们确实提供了变量，所以人们可以写@media #$small .something-descriptive @include grid-colum(6) ——在这里读到最后：@ 987654321@

【参考方案2】：

但我想知道的是他们是否有内置的 SASS 混入。不过我会检查他们的@media 设置并尝试自己实现。

不，他们没有。 :( 见文档：http://foundation.zurb.com/docs/media-queries.html

但你不需要发明任何东西！只需使用漂亮的respond-to Compass 扩展程序Snugug。

除了按照响应的自述文件中描述的名称调用媒体查询之外，您还可以通过它们的编号来触发它们。

干净缩进语法中的示例：

// Declaring the breakpoint ranges
$breakpoints: 'xs' (0 400px), 's' (401px 600px), 'm' (601px 800px)

// Declaring a function to retrieve a breakpoint by number
@function bp($number)
  @return nth(nth($breakpoints, $number),1)

// Calling a media query traditionally by a name
.bar
  +respond-to('s')
    @include grid-column(6)

// Calling a media query by its number
.foo
  +respond-to(bp(2))
    @include grid-column(6)

耶！

【参考方案3】：

使用 Sass Mixins，您必须使用媒体查询来显式更改网格。我解决这个问题的方法是创建一个 Mobile First 站点，然后将定义网格的 Sass 代码复制到 2 个媒体查询中，如下所示：

// Mobile Grid
@media only screen and (max-width: 768px)  ... 
// Desktop & Tablet Grid
@media #$small  ... 

我找不到任何明确的例子来说明它是如何工作的。根据我收集到的信息，您应该能够在 Sass 中定义网格，然后仅使用 @media #$small 媒体查询覆盖它，但实际上我无法让它工作。我尝试在另一个网格之前、之后等进行媒体查询，结果是第一次设置网格时它保持不变。

这是一个更长的例子。在#dashboard 的情况下，它在移动设备上堆叠并居中，在台式机/平板电脑上以 3 列为中心。这将是 class="small-10 small-centered large-4 columns" 用于使用演示类。

// Mobile Grid
@media only screen and (max-width: 768px) 
  #dashboard  @include grid-row;
    & > #stats  @include grid-column(10, false, true); 
    & > #records  @include grid-column(10, false, true); 
    & > #results  @include grid-column(10, false, true); 
  


// Desktop & Tablet Grid
@media #$small 
  #dashboard  @include grid-row;
    & > #stats  @include grid-column(4, false, false); 
    & > #records  @include grid-column(4, false, false); 
    & > #results  @include grid-column(4, false, false); 
  

注意：您可以对此进行扩展并使用 mixins 设置更多断点，但这似乎模拟了默认的 Zurb F4 表示类行为。

【参考方案4】：

我制作了一些 mixin 以便于处理： https://gist.github.com/jofralogo/5324278

@mixin rgrid($phone-grid:"",$desktop-grid:"")
    @extend .small-#$phone-grid;
    @extend .large-#$desktop-grid;
    @extend .columns;

这个 mixin 提供了一种使用 F4 网格类和媒体查询的简单方法。

$phone-grid：网格列数。

$desktop-grid：在窗口宽度为 768 像素及以上时覆盖 $phone-grid 的网格列数。

只能声明一个参数来定义每个窗口宽度的值。

即：

@include rgrid(3,6); => 3 columns for phone, 6 columns for desktop.
@include rgrid(6); => 6 columns.

【讨论】：

我希望扩展解决方案是防弹的，但事实并非如此。 Foundation uses attribute selectors 不能以这种方式扩展。这是一个为什么它不起作用的例子：cdpn.io/faHey

我真的很喜欢你的方法，因为它减少了 CSS 重复。我已经向 Zurb 团队提出了这个问题。如果您担心语义，请在此处提出您的意见：github.com/zurb/foundation/issues/3049

【参考方案5】：

我认为您可以通过 @extend 一个 Foundation 类而不是 @include 一个 Foundation 混合来获得它。这样，您就可以获得 Foundation 构建到其网格类中的所有内容，以及堆叠它们的能力。

在 CSS 中分配你想要的类：

.my-super-semantic-div 
    @extend .large-6, .small-3, .columns;

而不是在 HTML 中：

<div class="large-6 small-3 columns">...<div>

【讨论】：

显然你不能。 SCSS 编译器说：Can't extend .small-4 .columns: can't extend nested selectors

你可以让它在类之间使用逗号。 @extend .large-6, .small-3, .columns;