SCSS - 最好的方式來組織

林與SCSS工作，我想proberly結構代碼.. 在不到它不是一個問題，但你會說這是正常構建像下面的代碼..SCSS - 最好的方式來組織

想象那個按鈕有它自己的文件。

@mixin button-basic { 
    .button { 
     font-size: 14px; 
    } 
} 

@mixin button-max-480 { 
    .button { 
     color: red; 
    } 
} 


@mixin button-max-767 { 
    .button { 
     color: green; 
    } 
} 

@mixin button-max-959 { 
    .button { 
     color: blue; 
    } 
} 

@mixin button-min-960 { 
    .button { 
     font-size: 34px; 
     color: purple; 
    } 
} 


@media print, screen { 
    @include button-basic(); 
}

在我的媒體查詢文件..（想象一下，有多個包括每個媒體查詢類型之內。）

@media (min-width: 960px) { 
    @include button-min-960(); 
} 

@media (max-width: 959px) { 
    @include button-max-959(); 
} 

@media (max-width: 767px) { 
    @include button-max-767(); 
} 

@media only screen and (max-width:480px) { 
    @include button-max-480(); 
}

來源

2016-11-15 Ghost1

我想說的是去代碼審查堆棧交換這一個伴侶。 –

概覽我可以建議將第二，第三和第四個mixin合併成一個單獨的mixin，並將參數傳遞給它。根據參數，使用'@ if'語句可以更改顏色。就像'@mixin button-max（$ size）{' –

你可以用@mixins工作，但我不會推薦這種方法，因爲這變得非常混亂。

我建議對每個變體使用修飾符類，並在聲明中使用media-query。

.button { 

    &--red { 
     color: red; 
    } 

    &--green { 
     color: green; 
    } 

    &--blue { 
     color: blue; 
    } 

    @media (min-width: 768px) { 
     font-size: 1.125rem; 
    } 

    @media (min-width: 960px) { 
     font-size: 1.25rem; 
    } 

}

這樣你就有了一個非常乾淨的代碼庫，並且可以將每個組件/模塊分成它自己的文件。

來源

2016-11-15 14:32:31 marcobiedermann

'但是接下來我會爲每個主要類我都有@media .. 它不僅僅是一個顏色的問題，也可以是容器的大小等。 I看到你的方式，即時通訊只是不確定它的「更好」的方式？：/ – Ghost1

這取決於...我絕對明白你的觀點，我在那裏。我強烈建議使用多個@media規則。正如我所提到的，這樣你可以分割你的模塊並單獨測試每一個模塊。特別是在較大的代碼基礎上，這對於可伸縮性和可維護性來說是完美的。也許這個會幫助你完成你的項目：https：//sass-guidelin.es/ – marcobiedermann

SCSS - 最好的方式來組織

回答

相關問題