Variabel Sass dalam fungsi CSS calc ()

1347

Saya mencoba menggunakan calc()fungsi ini dalam stylesheet Sass, tetapi saya mengalami beberapa masalah. Ini kode saya:

$body_padding: 50px

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

Jika saya menggunakan literal 50pxalih-alih body_paddingvariabel saya , saya mendapatkan apa yang saya inginkan. Namun, ketika saya beralih ke variabel, ini adalah output:

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

Bagaimana saya bisa membuat Sass mengenali bahwa ia perlu mengganti variabel dalam calcfungsi?

GJK
sumber
10
kemungkinan duplikat Usa a Variable dalam Mixin
cimmanon
19
@ user3705055 Anda perlu calc karena Sass tidak dapat menghitung 100% - 50px karena unitnya berbeda. Ini hanya dapat dihitung oleh browser, setelah mengetahui seberapa besar wadah untuk mengonversi 100% menjadi px sebelum menambahkan nilai. Ini adalah alasan tepat mengapa calc ada.
Mog0

Jawaban:

2544

Interpolasi :

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

Untuk kasus ini, kotak batas juga cukup:

body
    box-sizing: border-box
    height: 100%
    padding-top: $body_padding
sam
sumber
3
box-sizing: border-box;akan menjadi cara yang ideal untuk pergi, menurut pendapat saya, tentu saja. Secara umum, model ukuran kotak harus membuat t
Brandito
Terimakasih banyak! Saya akan pergi dengan rute css dengancalc(100% - var(--body_padding))
Sylar
51

Untuk digunakan $variablesdi calc()dalam properti ketinggian Anda:

HTML:

<div></div>

SCSS:

$a: 4em;

div {
  height: calc(#{$a} + 7px);
  background: #e53b2c;
}
Joao DA SILVA MARLY
sumber
11
Apa yang ini tambahkan ke jawaban yang diterima dari hampir 5 tahun yang lalu?
random_user_name
6
Untuk beberapa alasan, saya menemukan jawaban ini lebih jelas. Saya tidak melakukan banyak pekerjaan scss, jadi ini "lebih jelas" dan lebih mudah bagi saya untuk mengerti.
2b77bee6-5445-4c77-b1eb-4df3e5
4
Ini jelas merupakan jawaban yang lebih jelas daripada yang diterima. 'Interpolasi:' tidak ada artinya bagi saya.
Jacques Mathieu
3
@JacquesMathieu sass-lang.com/documentation/interpolation - Jika itu tidak berarti apa-apa bagi Anda dan ini adalah jawaban dengan begitu banyak suara, mungkin Anda harus memahami apa yang menjadi masalah. Hanya dua sen saya ...
A. Chiesa
1
@SEBUAH. Chiesa yakin, itu mendefinisikan interpolasi. Namun OP dan saya tidak tahu interpolasi di SASS, kalau tidak pertanyaan ini tidak akan pernah ditanyakan. Karena itu, hanya dengan menyatakan satu kata yang mungkin belum pernah didengar sebelumnya tanpa definisi atau alasan apa pun tidak akan membantu dalam menciptakan jawaban yang menyeluruh. Tautan itu tentu sangat membantu. Pasti menyenangkan untuk melihat bahwa pada jawaban yang diterima.
Jacques Mathieu
9

Meskipun tidak terkait langsung. Tetapi saya menemukan bahwa kode CALC tidak akan berfungsi jika Anda tidak menaruh spasi dengan benar.

Jadi ini tidak berhasil untuk saya calc(#{$a}+7px)

Tapi ini berhasil calc(#{$a} + 7px)

Butuh beberapa saat untuk memikirkan ini.

Udit
sumber
2

Saya sudah mencoba ini maka saya memperbaiki masalah saya. Ini akan menghitung semua media-breakpoint secara otomatis dengan laju yang diberikan (ukuran dasar / ukuran tingkat)


$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
sumber
0

Berikut ini adalah solusi yang sangat sederhana menggunakan SASS / SCSS dan gaya rumus matematika:

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

Sebagai penutup, saya sangat menyarankan Anda untuk mengerti transform-origin, rotate()dan skew():

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

Carl LD
sumber
-2

Anda bisa menggunakan verbal Anda #{your verbal}

Girraj
sumber
3
Ini sepertinya jawaban yang aneh. Saya berasumsi maksud Anda variabletetapi mengingat bahwa OP tahu apa variabel itu (mereka menentukan $body_paddingdalam kode mereka) apa yang ditambahkan jawaban Anda?
Mike Poole
Saya telah memberikan jawaban
Girraj
-6

Coba ini:

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

body{
   @include heightBox(100% - 25%);
   box-sizing: border-box
   padding:10px;
}
Mas Hary
sumber
3
Bagaimana ini lebih baik daripada jawaban yang diterima di atas? Bahkan sepertinya tidak melakukan hal yang sama ...?
Jules