1

所以这就是问题所在。我对 Susy 有点陌生，所以我不完全确定完成此任务的最佳方法，但我希望根据 body 类和已在下面设置的媒体查询将布局应用于 .hfeed div .

这就是为什么。我正在为 WordPress 执行此操作，并且使用应用于正文的 CSS 类来设置不同的布局。具体来说，这两个类是 .full-width-content 和 .content-sidebar。我需要选择器跨越整个容器或分别位于当前定义的区域。因此，我想要设置样式的特定选择器将是“.full-width-content .hfeed”和“.content-sidebar .hfeed”。我尝试将它们设置为包含不同的容器，但这不起作用。

我是否应该简单地将这一部分从定义的网格中分离出来并按类选择然后进行媒体查询？

在 susy 中实现这一目标的最佳方法是什么？

//susy grid definitions, footer sits outside the susy grid def

#wrap {
    @include container( $total-columns, $break-tablet, $break-desktop );

    @include at-breakpoint( $break-tablet ) {
        #header     { @include span-columns( $break-tablet omega ); }
        #title-area { @include span-columns( 5, $break-tablet ); }
        #header .widget-area { @include span-columns( 4 omega, $break-tablet ); }
        #nav        { @include span-columns( $break-tablet omega ); }
        .hfeed      { @include span-columns( 6, $break-tablet ); }
        #sidebar    { @include span-columns( 3 omega, $break-tablet ); }
    }

    @include at-breakpoint( $break-desktop ) {
        #header     { @include span-columns( $break-desktop omega ); }
        #title-area { @include span-columns( 5, $break-desktop ); }
        #header .widget-area { @include span-columns( 5 omega, $break-desktop ); }
        #nav        { @include span-columns( $break-desktop omega ); }
        .hfeed      { @include span-columns( 7, $break-desktop ); }
        #sidebar    { @include span-columns( 4 omega, $break-desktop ); }
    }
}
4

1 回答 1

1

对我来说，这是一个 CSS 特殊性的顺序问题。我从 WordPress 的悲惨经历中知道，如果您要从 21-11 之类的东西制作一个儿童主题，那么您将为此付出很多努力。因此，如果您尝试进行更改但不起作用 - 请确保检查您的元素并查看您的规则是否被其他样式应用或覆盖。我相信你已经知道我们的 WordPress 主题有很多这个问题。

根据您设置 CSS 结构的方式：

• 移动优先 - 小屏幕到大屏幕 • 大屏幕到小屏幕

您的代码可能如下所示：

CSS顶部的大屏幕或小屏幕的默认样式-首先处理>然后>媒体查询以在屏幕尺寸更改时覆盖这些指令>发生这种情况时会更改的任何内容都在这里。

/* 默认样式 */ body {...}

/* 智能手机样式 */

@媒体查询{

body.class .container { ... }

}

我不确定这是否对你有帮助，我只是想帮助你一些方向。我很想看看其他人对此有什么看法。

使用 WordPress 主题和 SASS 时要记住的一点是，确保您了解 CSS 特定性的成本——您越具体，生成页面的时间就越多。使用 SASS 很容易变得过于具体。

祝你好运，我的朋友。抱歉，如果这没有帮助。

于 2012-12-04T17:45:52.213 回答