CSS ক্যালক() ফাংশন মধ্যে Sass পরিবর্তনশীল




css3 css-calc (3)

আমি calc() ফাংশনটি একটি সাস স্টাইলশীটে ব্যবহার করার চেষ্টা করছি, তবে আমার কিছু সমস্যা রয়েছে। এখানে আমার কোড:

$body_padding: 50px

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

আমি যদি আমার body_padding পরিবর্তনশীলের পরিবর্তে আক্ষরিক 50px ব্যবহার করি, তবে আমি যা চাই তা ঠিক আছে। যাইহোক, যখন আমি পরিবর্তনশীল পরিবর্তন, এই আউটপুট হয়:

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

আমি কিভাবে সাস সনাক্ত করতে পারি যে এটি calc ফাংশনের ভেরিয়েবলটিকে প্রতিস্থাপন করতে হবে?


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/


উচ্চতা সম্পত্তির আপনার calc() এর মধ্যে $variables ব্যবহার করতে:

এইচটিএমএল

<div></div>

SCSS

$a: 4em;

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

প্রবেশ করান:

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

এই ক্ষেত্রে, border-box বাক্সেও যথেষ্ট হবে:

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




css-calc