5

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

 class="large-6 small-3 columns"

有没有办法通过 Foundation SASS mixin 来做到这一点？我在这里找到的列的唯一混合是

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

对于我得到的，我不能在这里指定 veiwports。

有什么想法吗？先感谢您

4

5 回答 5

5

我做了一些混入来更容易处理： 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：对于窗口宽度 768px 及以上，覆盖 $phone-grid 的网格列数。

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

IE：

@include rgrid(3,6); => 3 columns for phone, 6 columns for desktop.
@include rgrid(6); => 6 columns.
于 2013-04-06T02:43:32.580 回答
3

我认为您可以通过@extendFoundation 类而不是@includeFoundation mixin 来获得它。通过这种方式，您可以获得 Foundation 构建到其网格类中的所有内容，以及堆叠它们的能力。

在 CSS 中分配你想要的类： 

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

而不是在 HTML 中：

<div class="large-6 small-3 columns">...<div>
于 2013-06-03T23:04:20.983 回答
2

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

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

但你不需要发明任何东西！只需使用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)

耶！

于 2013-03-28T15:59:38.920 回答
1

对于这些事情，您应该使用语义类。

class="something-descriptive"

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

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

@media screen and (min-width: 700px) {
    .something-descriptive {
        @include grid-column(6)
    }
}
于 2013-03-28T09:02:04.423 回答
1

使用 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 演示类行为。

于 2013-03-30T18:31:40.953 回答