#064: 实现 BuySellAds 区域 | CSS-Tricks

我们有一个 BuySellAds 区域外观的模型，所以让我们开始实际构建它。BuySellAds 网站提供了我们网站上显示广告所需的代码。我们复制并粘贴它。

我们试图关闭 BSA 注入到网站上的 CSS 以对它们进行样式设置（因为我们将自己处理），但不幸的是，如果我们现在关闭它，它也会影响到实时网站，所以我们现在只能与注入的 CSS 作斗争。

我们把剩下的时间花在定位和设置广告的样式，以达到我们想要的效果。由于我们已经有了很多东西，比如用于字体堆栈和颜色的 mixin 等等，所以这非常容易。

我们遇到了一些在这个系列中多次遇到的问题，在这些问题中，如果能够 @extend 一个只存在于另一个文件中的类，那就太好了，不幸的是，你无法做到这一点。在这个例子中，我们试图让一个 BSA 注入的 div 的样式与 .module 一样，这是一个典型的 extend 用例，但可惜的是，我们必须复制和粘贴一些样式。

我们思考了 flexbox 是否可以帮助我们，但决定现在还为时过早。它将使布局更容易，并为我们提供相同的高度。好吧，我们将把它放在未来的愿望清单上。

williammalo2

# 2012 年 9 月 26 日

太可惜了 (box-sizing: margin-box) 不存在……它将使做边距变得很容易。

CWSpear

# 2012 年 10 月 12 日

@extend 确实可以跨文件工作。我不知道是否是因为你使用的是旧版本。我正在使用 SASS 3.2.1。

我在另一个文件 (_typography.scss) 中有一个类，我尝试在 style.scss 中的另一个类上方和下方导入它，该类扩展了 typography 中的某些东西，它运行良好。

唯一需要注意的是，当你使用 @extend 时，它会被放置在原始样式表的样式表中，所以请记住这一点，因为样式表中权重相同的较低选择器会覆盖上面的选择器。（例如，如果你试图更改颜色，如果在样式表中扩展了低于你的东西，你可能会遇到问题）。

Chris Coyier

评论永久链接# 2012 年 10 月 12 日

真的吗。

这很有趣，我必须尝试一个简化的测试用例项目，看看是否可以使它工作。的确可能是 Sass 版本，但我没有读到关于这方面的任何内容。我的项目中可能还有一些奇怪的事情，很难知道。

不幸的是，你可能会厌倦我在未来的视频中不断抱怨它，因为它一遍又一遍地出现。

nickhempsey

# 2012 年 11 月 8 日

嘿 Chris,

我刚开始使用 SASS（顺便说一句，我非常喜欢它），但我认为我找到了一种方法使字体堆栈中的 !important 可选。这可能不是最好的方法，但这是一个开始。

@mixin font-stack-brand($important) {
    $stack: 'font 1, font 2, font 3, etc';
    @if $important == 'important' {
        font-family: $stack !important }
    @else {
        font-family: $stack;
    }
}

然后你可以通过简单地将 important 添加到函数调用中来实现它。

.important {
    @include font-stack-brand(important);
}

.not-important {
    @include font-stack-brand(0);
}

我尝试了一种更二进制的方法 0 = false，1 = true。但“1”由于某种原因一直失败。这真的很简单。

干杯。

nickhempsey

# 2012 年 11 月 8 日

我弄清楚了为什么 true/false 不起作用。你不能用引号括住 1。

@mixin font-stack-brand($important) {
    $stack: font, font, font, etc;
    @if $important == 1 {
        font-family: $stack !important; 
    } @else {
        font-family: $stack;
    }
}

所以现在这样就行了


.important {
    @include font-stack-brand(1);
}

.not-important {
    @include font-stack-brand(0);
}

评论

发表评论 取消回复

发表评论取消回复