CSS calc () फंक्शन में Sass Variable

Question

मैं calc()एक सास स्टाइलशीट में फ़ंक्शन का उपयोग करने की कोशिश कर रहा हूं , लेकिन मुझे कुछ समस्याएं हो रही हैं। यहाँ मेरा कोड है:

$body_padding: 50px

body
    padding-top: $body_padding
    height: calc(100% - $body_padding)

यदि मैं 50pxअपने body_paddingचर के बजाय शाब्दिक का उपयोग करता हूं , तो मुझे वही मिलता है जो मैं चाहता हूं। हालांकि, जब मैं चर पर स्विच करता हूं, तो यह आउटपुट होता है:

body {
    padding-top: 50px;
    height: calc(100% - $body_padding); }

मैं यह कैसे पहचान सकता हूं कि calcफ़ंक्शन के भीतर वेरिएबल को बदलने की आवश्यकता है ?

Comments

संयुक्त राज्य अमेरिका में एक मिश्रण में वैरिएबल के

— cimmanon

@ user3705055 आपको कैल्क की जरूरत है क्योंकि सैस 100% - 50px की गणना नहीं कर सकता क्योंकि इकाइयाँ अलग हैं। यह केवल ब्राउज़र द्वारा गणना की जा सकती है, एक बार यह जानता है कि मूल्यों को जोड़ने से पहले कंटेनर 100% px में बदलने के लिए कितना बड़ा है। यह सटीक कारण है कि कैल्क मौजूद है।

— मोग ०

Answer 1

इंटरपोल करें :

body
    height: calc(100% - #{$body_padding})

इस मामले के लिए, बॉर्डर बॉक्स भी पर्याप्त होगा:

body
    box-sizing: border-box
    height: 100%
    padding-top: $body_padding

Comments

box-sizing: border-box;मेरी राय में, निश्चित रूप से जाने का आदर्श तरीका होगा। सामान्य तौर पर, बॉक्स साइजिंग मॉडल को टी

— ब्रैंडिटो

बहुत धन्यवाद! मैं सीएसएस मार्ग से जाने वाला थाcalc(100% - var(--body_padding))

— सिलार

Answer 2

अपनी संपत्ति के $variablesअंदर का उपयोग करने के लिए calc():

HTML:

<div></div>

एससीएसएस:

$a: 4em;

div {
  height: calc(#{$a} + 7px);
  background: #e53b2c;
}

Comments

यह लगभग 5 साल पहले से स्वीकृत उत्तर में क्या जोड़ता है?

— random_user_name

किसी कारण से, मुझे यह उत्तर स्पष्ट है। मैं बहुत सारे scss का काम नहीं करता, इसलिए यह "स्पष्ट" था और मेरे लिए समझना आसान था।

— 2b77bee6-5445-4c77-b1eb-4df3e5

यह निश्चित रूप से स्वीकृत की तुलना में एक स्पष्ट जवाब है। 'इंटरपोलेट:' का मतलब मेरे लिए कुछ भी नहीं था।

— जैक्स मैथ्यू

@JacquesMathieu sass-lang.com/documentation/interpolation - यदि इसका आपके लिए कोई मतलब नहीं है और यह इतने वोटों के साथ उत्तर है, तो शायद आपको समझना चाहिए कि उपद्रव क्या है। बस मेरे दो सेंट ...

— ए।

@ए। चियासा यकीन है, कि प्रक्षेप को परिभाषित करता है। हालाँकि ओपी और मुझे एसएएसपी में प्रक्षेप का पता नहीं था, अन्यथा यह प्रश्न कभी नहीं पूछा जाता। इस प्रकार केवल एक शब्द बताते हुए कि परिभाषा के बिना किसी ने पहले कभी नहीं सुना होगा या कोई भी ढोंग सभी समावेशी उत्तर बनाने में मदद नहीं करता है। हालांकि यह लिंक निश्चित रूप से मददगार है। यह देखकर अच्छा लगेगा कि स्वीकार किए गए जवाब पर।

— जैक्स मैथ्यू

Answer 3

भले ही इसका सीधा संबंध न हो। लेकिन मैंने पाया कि अगर आप ठीक से स्पेस नहीं देते हैं, तो CALC कोड काम नहीं करेगा।

इसलिए यह मेरे काम नहीं आया calc(#{$a}+7px)

लेकिन यह काम कर गया calc(#{$a} + 7px)

मुझे इसका पता लगाने के लिए कुछ समय लगा।

Answer 4

मैंने यह कोशिश की है तो मैंने अपना मुद्दा ठीक कर लिया है। यह सभी मीडिया-ब्रेकप्वाइंट की गणना स्वचालित रूप से दी गई दर (आधार-आकार / दर-आकार) द्वारा की जाएगी

$base-size: 16;
$rate-size-xl: 24;

    // set default size for all cases;
    :root {
      --size: #{$base-size};
    }

    // if it's smaller then LG it will set size rate to 16/16;
    // example: if size set to 14px, it will be 14px * 16 / 16 = 14px
    @include media-breakpoint-down(lg) {
      :root {
        --size: #{$base-size};
      }
    }

    // if it is bigger then XL it will set size rate to 24/16;
    // example: if size set to 14px, it will be 14px * 24 / 16 = 21px
    @include media-breakpoint-up(xl) {
      :root {
        --size: #{$rate-size-xl};
      }
    }

@function size($px) {
   @return calc(#{$px} / $base-size * var(--size));
}

div {
  font-size: size(14px);
  width: size(150px);
}

Answer 5

यहाँ SASS / SCSS और एक गणित फार्मूला शैली का उपयोग करते हुए वास्तव में सरल समाधान है:

/* frame circle */
.container {
    position: relative;
    border-radius: 50%;
    background-color: white;
    overflow: hidden;
    width: 400px;
    height: 400px; }

/* circle sectors */
.menu-frame-sector {
    position: absolute;
    width: 50%;
    height: 50%;
    z-index: 10000;
    transform-origin: 100% 100%;
  }

$sector_count: 8;
$sector_width: 360deg / $sector_count;

.sec0 {
    transform: rotate(0 * $sector_width) skew($sector_width);
    background-color: red; }
.sec1 {
    transform: rotate(1 * $sector_width) skew($sector_width);
    background-color: blue; }
.sec2 {
    transform: rotate(2 * $sector_width) skew($sector_width);
    background-color: red; }
.sec3 {
    transform: rotate(3 * $sector_width) skew($sector_width);
    background-color: blue; }
.sec4 {
    transform: rotate(4 * $sector_width) skew($sector_width);
    background-color: red; }
.sec5 {
    transform: rotate(5 * $sector_width) skew($sector_width);
    background-color: blue; }
.sec6 {
    transform: rotate(6 * $sector_width) skew($sector_width);
    background-color: red; }
.sec7 {
    transform: rotate(7 * $sector_width) skew($sector_width);
    background-color: blue; }

समाप्त करने के लिए, मैं दृढ़ता से आपको समझने के लिए सुझाव देता हूं transform-origin, rotate()और skew():

https://tympanus.net/codrops/2013/08/09/building-a-circular-navigation-with-css-transforms/

Answer 6

आप अपने मौखिक का उपयोग कर सकते हैं #{your verbal}

Comments

यह एक अजीब जवाब की तरह लगता है। मुझे लगता है कि आप का मतलब है variableलेकिन यह देखते हुए कि ओपी जानता है कि एक चर क्या है (वे $body_paddingअपने कोड में निर्दिष्ट करते हैं ) आपका उत्तर क्या जोड़ता है?

— माइक पूले

मेरे पास जवाब है

— गिर्राज

Answer 7

इसे इस्तेमाल करे:

@mixin heightBox($body_padding){
   height: calc(100% - $body_padding);
}

body{
   @include heightBox(100% - 25%);
   box-sizing: border-box
   padding:10px;
}

Comments

ऊपर दिए गए स्वीकृत उत्तर की तुलना में यह कैसे बेहतर है? यह भी एक ही काम करने के लिए प्रतीत नहीं होता ...?

— जूल्स