সিএসএস ক্যালকের () ফাংশনে সাস ভেরিয়েবল

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

মিক্সিনে মার্কিন যুক্তরাষ্ট্রের

— সিমানম্যান

@ user3705055 আপনার ইউনিট আলাদা হওয়ায় সাস 100% - 50px গণনা করতে পারে না বলে আপনার ক্যালক দরকার। এটি কেবলমাত্র ব্রাউজার দ্বারা গণনা করা যেতে পারে, একবার যখন এটি জানে যে মানগুলি যুক্ত করার আগে 100% পিক্সে রূপান্তর করতে পাত্রে কত বড় is এটি ক্যালকের উপস্থিতির সঠিক কারণ।

— মোগ 0

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()উচ্চতার সম্পত্তিটির অভ্যন্তরে ব্যবহার করতে :

এইচটিএমএল:

<div></div>

SCSS:

$a: 4em;

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

Comments

এটি প্রায় 5 বছর আগে থেকে গৃহীত উত্তরে কী যুক্ত করে?

— এলোমেলো_উজার_নাম

কোনও কারণে, আমি এই উত্তরটি আরও স্পষ্ট মনে করি। আমি প্রচুর স্ক্যাসের কাজ করি না, সুতরাং এটি "প্লেয়ার" এবং আমার পক্ষে বোঝা সহজ।

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

এটি অবশ্যই স্বীকৃতের চেয়ে পরিষ্কার উত্তর। 'ইন্টারপোলেট:' মানে আমার কাছে কিছুই ছিল না।

— জ্যাক ম্যাথিও

@ জ্যাক্কস ম্যাথিউ সাস- lang.com/docamentation/interpolation - যদি এটি আপনার কাছে কোনও অর্থ না বোঝায় এবং এগুলি এত বেশি ভোটের উত্তর দিয়ে থাকে তবে সম্ভবত আপনার বুঝতে হবে যে এলোমেলোটি কী। মাত্র আমার দুটি সেন্ট ...

— এ। চিয়াসা

@A। চিয়াসা নিশ্চিত, এটি অন্তরঙ্গকরণের সংজ্ঞা দেয়। তবে আমি ওপি এবং এসএএসএস-এ ইন্টারপোলেশন জানতাম না, অন্যথায় এই প্রশ্নটি কখনই জিজ্ঞাসা করা হত না। সুতরাং কেবল একটি শব্দ উল্লেখ করে সংজ্ঞা ছাড়া বা এর আগে কখনও কোনও শব্দ শোনা যায়নি বা কোনও ভণ্ডাম সমস্ত অন্তর্ভুক্ত উত্তর তৈরি করতে সহায়তা করে না। যদিও সেই লিঙ্কটি অবশ্যই সহায়ক। গৃহীত উত্তরে তা দেখে ভাল লাগত।

— জ্যাক ম্যাথিউ

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

এসএএসএস / এসসিএসএস এবং গণিতের সূত্রের স্টাইল ব্যবহার করে এখানে একটি সহজ সমাধান রয়েছে:

/* 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; }

উপসংহারে, আমি আপনাকে দৃ strongly়ভাবে বোঝার পরামর্শ দিই 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

উপরের গৃহীত উত্তরের চেয়ে এটি কীভাবে ভাল? এমনকি একই জিনিসটি করাও মনে হচ্ছে না ...?

— জুলে