Bootstrap SASS结果

Question

I use Bootstrap 3.3.5 with SASS. But the CSS final's file is strange.

I write that :

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);
    }
}

And I have that, double properties :

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; 
}

What's wrong ? Why the double properties are not combined ?

Answer 1

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

Answer 2

What I think you want to do here is just split this up into multiple media queries as mentioned in the comments.

The reason your output CSS seems 'dumb' is because SASS is only a pre compiler, whatever you put into it comes out and thus using multiple mixins in the same selector are simply giving you back all their values.

The reason CSS doesn't filter this is because it will simply overwrite or extend rules / selectors defined earlier which is how CSS works (Cascading Style Sheets)

Either way you don't have a lot of work to do to make it work, all you'll want for the correct CSS to be applied at the correct resolution is to split it in media queries eg

$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(...)

This example here is what will give you the xs styling when your screen has a resulution of 480px or less and will give you the md styling for when your screen has a resolution of 768px or less.

Hope it helps, GL!

EDIT

I'm using the SASS format here which is technically not valid CSS (nor is SCSS really but if you pull out the sassy bits you'll be left with valid CSS instead of SASS that you still have to change.)

For the example to work in your situation all you'd need to do is add the missing {} pairs and add ; semicolons at the end of each prop: val pair.

More on SASS vs SCSS (for those interested)

Some basics on CSS (MDN)