SASS का उपयोग करके आप मीडिया क्वेरी कैसे करते हैं?

Question

मैंने एसएएसएस दस्तावेज के माध्यम से पढ़ा है और केवल एसएएस सिंटैक्स के बजाय एसएसएस सिंटैक्स का उपयोग करके मीडिया क्वेरी कैसे करें (एसएएस वह है जिसमें घुंघराले ब्रेसिज़ या सेमीकॉलन के बिना सख्त सफेद स्थान है)। सास सिंटैक्स का उपयोग करके आप मीडिया क्वेरी कैसे करते हैं?

Answer 1

@media screen and (min-height: 500px) 
    body 
    margin-top: 100px 

Answer 2

मैं उदाहरण

.jumbotron h1.pickup 
    @include LATO 
    font-size: 50px 
    color: white !important 
    @media (max-width: 767px) 
     font-size: 36px 
    @media (max-width: 500px) 
     font-size: 30px 

Answer 3

यह सास mixins उपयोग करने के लिए एक महान जगह की तरह दिखता है के लिए केवल कुछ गुण में लागू करने के लिए पसंद करते हैं।

आप "कोष्ठक" (mixin उपयोग घोषणा indencion भीतर मेरे मामले में)

भीतर सब कुछ अंदर लोड करने के लिए सास @content उपयोग कर सकते हैं यहाँ आप सास mixin संरचना मैं मीडिया क्वेरी से निपटने के लिए उपयोग किया है। यह आपको कार्यान्वयन की स्वतंत्रता देने के तरीके में लिखा गया है।

आप कुछ कस्टम कॉन्फ़िगरेशन प्रीसेट कर सकते हैं और यदि आप चाहते हैं तो इसका उपयोग करें या आप इसे अनुकूलित कर सकते हैं। यहां तक ​​कि आप कई अलग-अलग मीडिया क्वेरी मिक्स्ड हैंडलर पा सकते हैं, मैं व्यक्तिगत रूप से मिश्रित संरचना में उन्हें परिभाषित करने के बजाय मिश्रण में वैल्यू इंजेक्ट करना पसंद करता हूं।

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

_mixins.sass

// mixin 
=media($type1, $size1: null, $type2: null, $size2: null) 
    @if ($type1) and ($size1) and ($type2) and ($size2) 
    @media ($type1: $size1) and ($type2: $size2) 
     @content 
    @elseif ($type1) and ($size1) and not ($type2) and not ($size2) 
    @media ($type1: $size1) 
     @content 
    @elseif ($type1) and not ($size1) and not ($type2) and not ($size2) 
    $map: $type1 
    @if map-has-key($map, "type2") and map-has-key($map, "size2") 
     @media (#{map-get($map, "type1")}: #{map-get($map, "size1")}) and (#{map-get($map, "type2")}: #{map-get($map, "size2")}) 
     @content 
    @else 
     @media (#{map-get($map, "type1")}: #{map-get($map, "size1")}) 
     @content 
    // ... add more conditions if aproppriate 
    @else 
    @error "Upsss...." 

_variables.sass

// width definition (optional) 
$xs: "30em" 
$s: "36em" 
$m: "42em" 
$ml: "48em" 
$l: "54em" 
$xl: "60em" 
$xxl: "65em" 

// options - types of restriction (optional) 
$minw: "min-width" 
$maxw: "max-width" 
$minh: "min-height" 
$maxh: "max-height" 

// preset configuration (optional) 
$mobile: ("type1": $minw, "size1": $s) 
$tablet: ("type1": $minw, "size1": $m) 
$laptop: ("type1": $minw, "size1": $ml) 
$desktop: ("type1": $minw, "size1": $l) 
$tv: ("type1": $minw, "size1": $xxl) 
$wide: ("type1": $minw, "size1": $m, "type2": $maxh, "size2": $s) 

main.sass

@import variables 
@import mixins 

// use examples1 -------------- using variables 
+media($minw, $xs) 
    p 
    font-size: 1em 
    padding: 0px 

// use examples2 -------------- using both varible and string 
+media($minw, "1000px") 
    p 
    font-size: 2em 
    padding: 10px 

// use examples3 -------------- using strings only 
+media("min-width", "62.5em") 
    p 
    font-size: 3em 
    padding: 15px 

// use examples4 -------------- using predefind configuration 
+media($tablet) 
    p 
    font-size: 4em 
    padding: 20px