.scss，media quires，@content and bourbon neat

我使用的是Bourbon Neat，但我希望編譯後的CSS不要爲每個元素重複媒體查詢，而要先按順序對其進行編譯。.scss，media quires，@content and bourbon neat

我SCSS看起來像這樣

#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

可能重複http://stackoverflow.com/問題/ 17619493/sass-placeholder-for-media-query） – cimmanon

只需注意：'css'規則按照它們在'css'文件中的順序進行應用。當從'scss'轉換爲'css'時，編譯器會保持這個順序，因爲如果不知道'html'代碼，就沒有辦法確定移動規則是否會改變文檔的樣式。 –

@cimmanon非常感謝您向我展示媒體查詢的SASS佔位符？所以，據我瞭解，使用.scss時，沒有像移動第一CSS這樣的事情？你只是有css級聯下來，直到它擊中每個元素或class/id下重複的媒體查詢？ – user1910388

爲了對移動優先進行編碼，您需要爲移動設備製作標準樣式，然後使用媒體查詢將您的設計擴展到更大的屏幕上。此外，請務必使用min-width標記而不是max-width，並且只在需要時才引入佈局特定的規則。

你可以閱讀更多關於移動先在這裏：使用波旁整潔http://adamkaplan.me/grid/

例子：

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

[？SASS佔位符媒體查詢]（的

來源

2015-05-25 01:17:59

.scss，media quires，@content and bourbon neat

回答

相關問題