SSS Değişkeni CSS calc () işlevinde

1345

Bu calc()işlevi Sass stil sayfasında kullanmaya çalışıyorum , ancak bazı sorunlar yaşıyorum. İşte benim kod:

$body_padding: 50px

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

Değişkenim 50pxyerine değişmez değeri kullanırsam body_paddingtam olarak istediğimi alırım. Ancak, değişkeni değiştirdiğimde, bu çıktı:

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

Sass'ın calcişlev içindeki değişkeni değiştirmesi gerektiğini tanımasını nasıl sağlayabilirim ?

css sass css-calc

— GJK
kaynak

10

Usa a Değişken bir Mixin içinde

— cimmanon

19

@ user3705055 Sass, birimler farklı olduğu için% 100 - 50 piksel hesaplayamadığından kalkeye ihtiyacınız var. Değerleri eklemeden önce kabın% 100'ü piksele dönüştürmek için kabın ne kadar büyük olduğunu bildikten sonra bu ancak tarayıcı tarafından hesaplanabilir. Kireç oluşumunun nedeni tam da budur.

— Mog0

2543

İnterpolat :

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

Bu durumda sınır kutusu da yeterli olacaktır:

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

— Sam
kaynak

3

box-sizing: border-box;bence, elbette gitmek için ideal bir yol olurdu. Genel olarak, kutu boyutlandırma modeli t

— Brandito

Çok teşekkürler! Ben css rotası ile gitmek üzereydimcalc(100% - var(--body_padding))

— Sylar

51

Height özelliğinizin $variablesiçinde kullanmak için calc():

HTML:

<div></div>

SCSS:

$a: 4em;

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

— Joao DA SILVA MARLY
kaynak

11

Bu yaklaşık 5 yıl önceki kabul edilen cevaba ne katar?

— random_user_name

6

Nedense bu cevabı daha net buluyorum. Ben scss iş bir sürü yapmayın, bu yüzden bu "plainer" ve anlamak için daha kolay oldu.

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

4

Bu kesinlikle kabul edilenden daha açık bir cevaptır. 'İnterpolat:' benim için hiçbir şey ifade etmiyordu.

— Jacques Mathieu

3

@JacquesMathieu sass-lang.com/documentation/interpolation - Bu sizin için bir şey ifade etmiyorsa ve bu kadar çok oyla bir cevapsa, muhtemelen yaygara hakkında ne olduğunu anlamalısınız. Sadece iki sent ...

— A. Chiesa

1

@A. Chiesa emin, bu enterpolasyonu tanımlar. Ancak OP ve ben SASS'ta enterpolasyonu bilmiyorduk, aksi halde bu soru asla sorulmayacaktı. Bu yüzden, daha önce hiç bir tanım veya herhangi bir iddia olmadan duymamış olabilecek bir kelimeyi belirtmek, her şey dahil bir yanıtın yaratılmasına yardımcı olmaz. Bu bağlantı kesinlikle yardımcı olur. Kabul edilen cevapta görmek güzel olurdu.

— Jacques Mathieu

9

Doğrudan ilgili olmasa da. Ancak, boşlukları düzgün koymazsanız CALC kodunun çalışmadığını buldum.

Bu benim için işe yaramadı calc(#{$a}+7px)

Ama bu işe yaradı calc(#{$a} + 7px)

Bunu çözmem için bir ara beni aldı.

— Udit
kaynak

2

Bunu denedim sonra sorunumu çözdüm. Tüm medya kesme noktalarını verilen hıza göre otomatik olarak hesaplar (taban boyutu / hız boyutu)


$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);
}

— Serkan KONAKCI
kaynak

0

İşte SASS / SCSS ve matematik formülü stilini kullanan gerçekten basit bir çözüm:

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

Sonuç olarak, şiddetle anlamak önermek transform-origin, rotate()ve skew():

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

— Carl LD
kaynak

-2

sözlü sözünü kullanabilirsin #{your verbal}

— Girraj
kaynak

3

Bu garip bir cevap gibi görünüyor. Demek istediğim variableama OP bir değişken ( $body_paddingkodlarında belirttikleri ) ne olduğunu biliyor göz önüne alındığında cevabınız ne ekliyor?

— Mike Poole

Cevap

— verdim

-6

Bunu dene:

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

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

— Mas Hary
kaynak

3

Bu yukarıdaki kabul edilen cevaptan nasıl daha iyi? Aynı şeyi yapmıyor bile ...?

— Jules