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
1
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
1
apakah ada fungsi serupa untuk px dan em?
Nick Ginanto
1
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
4
@NickGinanto untuk px Anda bisa menambahkannya +pxke akhir baris, misalnyawidth: ($foo + $bar) +px
DisgruntledGoat
2
@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
30

Cara lain:

$my_width: 4/12*100%;

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

Sass akan menampilkan nilai dalam%.

rlejnieks.dll
sumber
13
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
1

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