SCSS / SASS के साथ एक प्रतिशत की गणना करें


121

मैं गणना के माध्यम से स्कोर में प्रतिशत में एक चौड़ाई निर्धारित करना चाहता हूं, लेकिन यह मुझे त्रुटियां देता है ..

अमान्य सीएसएस के बाद "...- चौड़ाई: (4/12)%": अपेक्षित अभिव्यक्ति (जैसे 1px, बोल्ड), था ";"

मैं कुछ ऐसा करना चाहता हूं

$my_width: (4/12)%;

div{
width: $my_width;
}

मैं वहां% चिह्न कैसे जोड़ूं?

Px और उन्हें के साथ एक ही सवाल


1
बेला कुछ भी नहीं है। मैं केवल गणना में संख्या की इकाई को जोड़ना चाहता हूं। समान (400/20) px। मेरे पास scss में नंबर और px / em /% कैसे है? इस तरह मेरे पास "वैश्विक चर" हो सकते हैं मैं एक बार बदल सकता हूं
निक गिन्ंतो

$ My_width की तरह एक ब्रैकेट जोड़ने की कोशिश करें: ((4/12)%);
श्री

उफ़ .. क्षमा करें, मुझे इसकी जाँच करने और ऐसा करने का एक और प्रयास करने का मौका नहीं मिला .. {$ my_width: (4/12)%;}
श्री

जवाबों:


211

क्या आपने प्रतिशत कार्य करने की कोशिश की है?

$my_width: percentage(4/12);
div{
width: $my_width;
}

1
वहाँ px और उन्हें के लिए एक समान कार्य है?
निक गिन्ंतो

1
निश्चित नहीं है, लेकिन प्रलेखन के स्रोत खंड में आप अंतर्निहित तर्क देख सकते हैं: Sass :: Script :: Number.new (value.value * 100, ['%']), इसलिए मुझे लगता है कि यदि वे नहीं करते हैं मौजूद आप इसे सीधे कर सकते हैं, या कुछ आवरण कार्य स्वयं बना सकते हैं।
टॉमस

4
Px के लिए @NickGinanto आप बस +pxलाइन के अंत में जोड़ सकते हैं , जैसेwidth: ($foo + $bar) +px
DisgruntledGoat

2
@DisgruntledGoat नहीं, आपको कभी भी किसी भी परिस्थिति में ऐसा नहीं करना चाहिए । इकाइयों को जोड़ना गुणन (जैसे। $foo + $bar * 1px) के माध्यम से किया जाना चाहिए , इस तरह से इकाई को संक्षिप्त करना केवल आपको एक स्ट्रिंग देता है।
साइमन

@cimmanon ने हाल ही में परिवर्तन किया था? मुझे यकीन है कि जब मैंने अपनी टिप्पणी पोस्ट की थी तो ऐसा नहीं था।
असंतुष्टगीतगो

30

दूसरा रास्ता:

$my_width: 4/12*100%;

div{
width: $my_width; // 33.33333%
}

Sass% में मूल्य का उत्पादन करेगा।


13
ध्यान दें कि मुझे इस काम को करने के लिए १०० / ६ * १% का उपयोग करना पड़ा, वरना मैं १६६६.६।% के साथ समाप्त हो गया।
sp00n

मैं कहां से एक प्रलेखन पा सकता हूं जो * 100% वास्तव में करता है?
इनि

1

मैं इसे इस तरह से काम करने में सक्षम था:

div{
   width: (4/12)* 1%;
   }

इस तरह आपको किसी विशेष फ़ंक्शन का उपयोग करने की आवश्यकता नहीं है।

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.