引导 SASS 结果答案

【问题标题】：Bootstrap SASS result引导 SASS 结果
【发布时间】：2015-09-28 17:46:51
【问题描述】：

我使用带有 SASS 的 Bootstrap 3.3.5。但是 CSS final 的文件很奇怪。

我这样写：

section.strat-01 {
    @include make-row();

    .strat-01-img {
        @include make-xs-column(12);
        @include make-sm-column-offset(1);
        @include make-sm-column(4);
        @include make-sm-column-pull(6);    
    }

    .strat-01-txt {
        @include make-xs-column(12);
        @include make-sm-column(6);
        @include make-sm-column-push(5);
    }
}

我有这个，双重属性：

section.strat-01 .strat-01-img {
            position: relative;
            float: left;
            width: 100%;
            min-height: 1px;
            padding-left: 15px;
            padding-right: 15px;
            position: relative;
            min-height: 1px;
            padding-left: 15px;
            padding-right: 15px; 
}

怎么了？为什么不合并双重属性？

【问题讨论】：

你期待什么结果？
没有双重属性的代码。例如，我有两次“位置”。结果很奇怪不是吗？
当您编写的代码显式声明双重属性时，您为什么会期望这种情况？

标签： css twitter-bootstrap-3 sass

【解决方案1】：

来自多个 mixin 的重复属性永远不会组合在一起...

【讨论】：

感谢您的回答。那么如何避免双重属性呢？
你的代码不应该为媒体查询生成 CSS 吗？

【解决方案2】：

我认为您在这里要做的只是将其拆分为 cmets 中提到的多个媒体查询。

你的输出 CSS 看起来“笨拙”的原因是因为 SASS 只是一个预编译器，无论你放入什么都会出来，因此在同一个选择器中使用多个 mixin 只会让你返回它们的所有值。

CSS 不过滤的原因是它会简单地覆盖或扩展之前定义的规则/选择器，这就是 CSS 的工作原理（层叠样式表）

无论哪种方式，您都不需要做很多工作来使其正常工作，您想要以正确的分辨率应用正确的 CSS 就是将其拆分为媒体查询，例如

$my-sm-res: 768px //for instance
$my-xs-res: 480px //for instance

@media (max-width: $my-sm-res)
    .section.strat-01
        .strat-01-img
            @include make-sm-column-offset(...)
            @include make-sm-column(...)
            @include make-sm-column-pull(...)

@media (max-width: $my-xs-res)
    .section.strat-01
        .strat-01-img
            @include make-xs-column-offset(...)
            @include make-xs-column(...)
            @include make-xs-column-pull(...)

这里的示例是当您的屏幕分辨率为 480px 或更低时，将为您提供 xs 样式，并为您提供 md 屏幕分辨率为 768px 或更低时的样式。

希望对您有所帮助，GL！

编辑

我在这里使用的是 SASS 格式，这在技术上不是有效的 CSS（SCSS 也不是真正的，但如果你去掉那些时髦的部分，你将得到 valid CSS 而不是你的 SASS还是得改。）

要使示例适用于您的情况，您只需添加缺少的 {} 对，并在每个 prop: val 对的末尾添加 ; 分号。

More on SASS vs SCSS（有兴趣的朋友）

Some basics on CSS (MDN)

【讨论】：