.scss, media quires, @content и bourbon neat

Я использую Bourbon Neat, но я хочу, чтобы скомпилированный css не повторял медиа-запрос для каждого элемента, а сначала скомпилировал его для того, чтобы сделать мобильный..scss, media quires, @content и bourbon neat

Мой выглядит СКС как этот

#logo { 
     @include span-columns(3); 
     @include media($mobile) { 
      @include span-columns(2); 
      } 

    } 

    nav { 
     @include span-columns(6); 
     text-align: center; 
     li { 
      display: inline-block; 
      } 
      @include media($mobile) { 
       @include span-columns(2); 
       text-align: right; 
       } 
    } 

    #social { 
     @include span-columns(3); 
     text-align: right; 
     li { 
      display: inline-block; 
      } 

     @include media($mobile) { 
      display:none; 
      } 

}

Как я могу добиться чистого организованной скомпилированный CSS?

Вот что я на данный момент:

#logo { 
    display: block; 
    float: left; 
    margin-right: 2.35765%; 
    width: 23.23176%; } 
    #logo:last-child { 
    margin-right: 0; } 
    @media screen and (max-width: 480px) { 
    #logo { 
     display: block; 
     float: left; 
     margin-right: 7.42297%; 
     width: 46.28851%; } 
     #logo:last-child { 
     margin-right: 0; } } 

nav { 
    display: block; 
    float: left; 
    margin-right: 2.35765%; 
    width: 48.82117%; 
    text-align: center; } 
    nav:last-child { 
    margin-right: 0; } 
    nav li { 
    display: inline-block; } 
    @media screen and (max-width: 480px) { 
    nav { 
     display: block; 
     float: left; 
     margin-right: 7.42297%; 
     width: 46.28851%; 
     text-align: right; } 
     nav:last-child { 
     margin-right: 0; } } 

#social { 
    display: block; 
    float: left; 
    margin-right: 2.35765%; 
    width: 23.23176%; 
    text-align: right; } 
    #social:last-child { 
    margin-right: 0; } 
    #social li { 
    display: inline-block; } 
    @media screen and (max-width: 480px) { 
    #social { 
     display: none; } }

Я попытался с помощью техники @content, делая это на вершине:

$mobile: new-breakpoint(max-width 480px 4); 

@mixin breakpoint($point) { 
    @if $point == small { 
    @include media($mobile) { @content; } 
    }

и изменение @include к этому:

#logo { 
    @include span-columns(3); 
    @include breakpoint(small) { 
     @include span-columns(2); 
     } 

}

Любая помощь будет оценена :)

источник

2013-08-29 user1910388

возможно дубликат [? SASS заполнитель для запроса информации] (http://stackoverflow.com/ вопросы/17619493/sass-placeholder-for-media-query) – cimmanon

Просто примечание: правила 'css' применяются в том порядке, в котором они находятся в файле' css'. Компилятор будет поддерживать этот порядок при переводе с 'scss' на' css', потому что, не зная кода 'html', невозможно определить, изменили ли правила перемещения стиль вашего документа. –

@cimmanon большое спасибо за показ мне SASS Placeholder для медиа-запроса? Насколько я понимаю, нет такой вещи, как мобильный первый css при использовании. Scss? у вас просто есть css-каскадирование до тех пор, пока оно не попадет в медиа-запрос, который дублируется под каждым элементом или классом/идентификатором? – user1910388

Для кодирования мобильных устройств сначала необходимо создать стандартные стили для мобильных устройств, а затем использовать медиа-запросы, чтобы увеличить масштаб вашего дизайна на больших экранах. Кроме того, обязательно используйте тег min-width вместо max-width и вводите правила для конкретных макетов только тогда, когда они вам понадобятся.

Вы можете прочитать больше о мобильном первых здесь: http://adamkaplan.me/grid/

Примера использования Бурбона Аккуратный:

ul.navigation-list { 
    display:none; 
     @include media($large-screen) { 
      display:block; 
     } 
    }

источник

2015-05-25 01:17:59

.scss, media quires, @content и bourbon neat

ответ

Смежные вопросы