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 50px
alih-alih body_padding
variabel 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 calc
fungsi?
Jawaban:
Interpolasi :
Untuk kasus ini, kotak batas juga cukup:
sumber
box-sizing: border-box;
akan menjadi cara yang ideal untuk pergi, menurut pendapat saya, tentu saja. Secara umum, model ukuran kotak harus membuat tcalc(100% - var(--body_padding))
Untuk digunakan
$variables
dicalc()
dalam properti ketinggian Anda:HTML:
SCSS:
sumber
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.
sumber
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)
sumber
Berikut ini adalah solusi yang sangat sederhana menggunakan SASS / SCSS dan gaya rumus matematika:
Sebagai penutup, saya sangat menyarankan Anda untuk mengerti
transform-origin
,rotate()
danskew()
:https://tympanus.net/codrops/2013/08/09/building-a-circular-navigation-with-css-transforms/
sumber
Anda bisa menggunakan verbal Anda
#{your verbal}
sumber
variable
tetapi mengingat bahwa OP tahu apa variabel itu (mereka menentukan$body_padding
dalam kode mereka) apa yang ditambahkan jawaban Anda?Coba ini:
sumber