Susy: विभिन्न स्क्रीन आकारों के लिए अलग-अलग लेआउट का उपयोग करें

Question

मैं सूसी का उपयोग कर मोबाइल की पहली वेबसाइट बना रहा हूं और विभिन्न स्क्रीन आकारों के लिए अलग-अलग लेआउट करना चाहता हूं। प्रत्येक लेआउट में कॉलम, कॉलम चौड़ाई और गटर चौड़ाई का अपना सेट होगा।

मैं यह कैसे कर सकता हूं?

---

मेरे प्रयास:

1. पुरानी Susy विधि

वर्ष Susy में, आप इसे इस तरह करना होगा:

$base-font-size: 10px; 
$show-grid-backgrounds : true; 


$total-columns  : 4; 
$column-width  : 6.250em; 
$gutter-width  : 1em; 
$gutter-padding  : $gutter-width; 

body { 
background:pink;  
} 


@media only screen and (min-width: 480px) { 
$total-columns  : 3; 
/*$column-width  : 12.567em; 
$gutter-width  : 3em; 
$gutter-padding  : $gutter-width;*/ 

body { 
background:yellow; 
} 


} 

@media only screen and (min-width: 600px) { 
$total-columns  : 6; 
/*$column-width  : 7.500em; 
$gutter-width  : 2em; 
$gutter-padding  : $gutter-width;*/ 

body { 
background:blue;  
} 

} 

@media only screen and (min-width: 768px) { 
$total-columns  : 6; 
/*$column-width  : 7.500em; 
$gutter-width  : 2em; 
$gutter-padding  : $gutter-width;*/ 

body { 
background:green; 
} 

} 

@media only screen and (min-width: 960px) { 
$total-columns  : 6; 
/*$column-width  : 8.833em; 
$gutter-width  : 3em; 
$gutter-padding  : $gutter-width;*/ 

body { 
background:red; 
} 

} 

[पृष्ठभूमि रंग इतना है मैं बता सकता हूं कि यह काम कर रहा है]

नई सूसी में, जब मैं ऐसा करता हूं, तो स्क्रीन आकार के बावजूद स्तंभों की संख्या हमेशा 6 होती है। वे सही कॉलम आकार भी नहीं हैं।

2. ब्रेकप्वाइंट विधि न्यू Susy एक नई break point method आप विभिन्न लेआउट के लिए विभिन्न स्तंभों निर्दिष्ट कर सकते हैं जो है। यह मैं इसे कैसे इस्तेमाल किया है है:

$base-font-size: 10px; 
$show-grid-backgrounds : true; 


$total-columns  : 4; 
$column-width  : 6.250em; 
$gutter-width  : 1em; 
$gutter-padding  : $gutter-width; 

body { 
background:pink;  
} 

.layout-primary { 
    @include container; 
    @include susy-grid-background; 
} 


@include at-breakpoint(480px 3) { 
    .layout-primary { 
    @include container; 
} 

} 

@include at-breakpoint(600px 6) { 
    .layout-primary { 
    @include container; 
} 
} 

@include at-breakpoint(768px 6) { 
    .layout-primary { 
    @include container; 
} 
} 

जब मैं इस कोड का उपयोग, कॉलम अब हमेशा 4 में, फंस रहे हैं लेआउट की परवाह किए बिना। आप अलग-अलग कॉलम चौड़ाई/पैडिंग मान निर्दिष्ट करने के लिए इस विधि का भी उपयोग नहीं कर सकते हैं।

सूसी इतनी भयानक है कि मुझे पता है कि मैं कुछ गलत समझ रहा हूं। लेकिन मैंने दस्तावेज़ों पर जाने और विभिन्न चीजों की कोशिश करने में काफी समय लगाया है, और यह नहीं देख सकता कि मैं क्या गलत कर रहा हूं।

मुझे पता है कि मैंने इस प्रश्न before से पूछा है, लेकिन यह पुराने सूसी संस्करण के लिए था।

Answer 1

प्रत्येक ब्रेकपॉइंट पर पृष्ठभूमि में 4-कॉलम देखने का कारण यह है कि आपने 4-कॉलम संदर्भ में केवल @include susy-grid-background; घोषित किया है। मुझे लगता है कि किसी ने ब्रेकपॉइंट/पृष्ठभूमि शॉर्टकट बनाने के लिए पहले से ही एक बग दायर किया है, ताकि जल्द ही आ जाएगा। इस बीच, आपको उस मिश्रण को फिर से कॉल करना होगा जहां आप container पर कॉल करेंगे।

@include at-breakpoint(600px 6) { 
    .layout-primary { 
    @include container; 
    @include susy-grid-background; 
    } 
} 

लेकिन तुम सही हो, at-breakpoint केवल इस बिंदु पर स्तंभ गिनती में परिवर्तन के लिए अनुमति देता है। मैं इसे विस्तारित करना चाहता हूं, इसलिए यदि आप जिथब पर एक बग फाइल करते हैं, तो मैं खुशी से इसे देख लूंगा। इस बीच एक with-grid-settings मिश्रण है जो आपको सभी मूलभूत सेटिंग्स को बदलने की अनुमति देता है (मैं जल्द ही वहां उन्नत सेटिंग्स प्राप्त करने की उम्मीद कर रहा हूं)।

@include at-breakpoint(600px 6) { 
    @include with-grid-settings(6,6em,1em,1em) { 
    .layout-primary { 
     @include container; 
     @include susy-grid-background; 
    } 
    } 
}