Hitung persen dengan SCSS / SASS

121

Saya ingin mengatur lebar dalam persentase dalam scss melalui perhitungan, tetapi itu memberi saya kesalahan ..

CSS tidak valid setelah "...- width: (4/12)%": ekspresi yang diharapkan (misalnya 1px, bold), sebelumnya ";"

Saya ingin melakukan sesuatu seperti

$my_width: (4/12)%;

div{
width: $my_width;
}

bagaimana cara menambahkan% masuk di sana?

Pertanyaan yang sama dengan px dan em

css sass

— Nick Ginanto
sumber

Tidak ada yang bisa dimainkan. Saya hanya ingin menambahkan satuan angka ke kalkulasi. Sama seperti (400/20) px. Bagaimana saya memiliki angka dan px / em /% di scss? Dengan cara itu saya dapat memiliki "variabel global" yang dapat saya ubah sekali

— Nick Ginanto

Coba tambahkan tanda kurung seperti $ my_width: ((4/12)%);

— Sri

Ups .. Maaf, saya tidak sempat memeriksanya dan mencoba sekali lagi untuk melakukannya .. {$ my_width: (4/12)%;}

— Sri

Jawaban:

211

Sudahkah Anda mencoba fungsi persentase ?

$my_width: percentage(4/12);
div{
width: $my_width;
}

— Tomas
sumber

apakah ada fungsi serupa untuk px dan em?

— Nick Ginanto

Tidak yakin, tetapi di bagian sumber dokumentasi Anda dapat melihat logika yang mendasarinya: Sass :: Script :: Number.new (value.value * 100, ['%']), jadi menurut saya jika tidak ada Anda bisa melakukan ini secara langsung, atau membuat beberapa fungsi pembungkus sendiri.

— Tomas

@NickGinanto untuk px Anda bisa menambahkannya +pxke akhir baris, misalnyawidth: ($foo + $bar) +px

— DisgruntledGoat

@DisgruntledGoat Tidak, Anda tidak boleh melakukan itu dalam keadaan apa pun. Menambahkan unit harus dilakukan melalui perkalian (misalnya $foo + $bar * 1px), menggabungkan unit seperti itu hanya memberi Anda string.

— cimmanon

@ cimmanon melakukan perubahan itu baru-baru ini? Saya yakin itu tidak terjadi ketika saya memposting komentar saya.

— DisgruntledGoat

Cara lain:

$my_width: 4/12*100%;

div{
width: $my_width; // 33.33333%
}

Sass akan menampilkan nilai dalam%.

— rlejnieks.dll
sumber

Perhatikan bahwa saya harus menggunakan 100/6 * 1% agar ini berfungsi untuk saya, atau saya berakhir dengan 1666,67%.

— sp00n

di mana saya dapat menemukan dokumentasi yang sebenarnya * 100% lakukan?

— Ini

Saya bisa membuatnya bekerja dengan cara ini:

div{
   width: (4/12)* 1%;
   }

Dengan cara ini Anda tidak perlu menggunakan fungsi khusus apa pun.

— Enrique Cuchetti
sumber