Sass menghitung persen dikurangi px

133

Saya ingin dapat melakukan hal berikut:

height: 25% - 5px;

Jelas ketika saya melakukan itu saya mendapatkan kesalahan: 

Incompatible units: 'px' and '%'.
sass Mike Fielden
sumber
Saya mendapatkan Invalid property valuekesalahan. Di setiap browser termasuk build Canary Chrome.
Mike Fielden
Jika ada fungsi Sass yang membuat saya mendapatkan apa yang saya inginkan itu keren, saya hanya bermain dengan calc...
Mike Fielden
Ya :) Seperti yang saya katakan saya tidak peduli bagaimana itu dilakukan calcadalah saya pergi dulu dan tidak berhasil. Sepertinya calctidak berfungsi di salah satu browser saya, jadi implementasi sass akan lebih baik saya kira.
Mike Fielden
1
Sass tidak dapat bertindak sebagai polyfill untuk calc (). Ia tidak tahu cara mengonversi 25% ke px sehingga dapat melakukan perhitungan dan menghasilkan CSS. Tergantung pada kebutuhan Anda yang sebenarnya, mungkin ada alternatif, seperti menggunakan keluarga tampilan-tabel, mengubah ukuran kotak Anda, atau menggunakan margin negatif ( jsfiddle.net/5JZGt )
cimmanon

Jawaban:

239

Sass tidak dapat melakukan aritmatika pada nilai yang tidak dapat dikonversi dari satu unit ke unit berikutnya. Sass tidak memiliki cara untuk mengetahui dengan tepat seberapa lebar "100%" dalam hal piksel atau unit lainnya. Itu adalah sesuatu yang hanya diketahui oleh peramban.

Anda harus menggunakannya calc()sebagai gantinya. Periksa kompatibilitas peramban di Dapatkah saya menggunakan ...

.foo {
    height: calc(25% - 5px);
}

Jika nilai Anda dalam variabel, Anda mungkin perlu menggunakan interpolasi mengubahnya menjadi string (jika tidak, Sass hanya mencoba melakukan aritmatika):

$a: 25%;
$b: 5px;

.foo {
  width: calc(#{$a} - #{$b});
}
chrisgonzalez
sumber
5
Saya akan mengatakan bahwa calc () sama sekali tidak berfungsi di sebagian besar browser. Platform seluler sama pentingnya dengan desktop.
dalgard
3
Tidak ada argumen di sana, tetapi hitung browser! Lebih banyak dukungan calc () daripada tidak, dan bahkan lebih banyak lagi akan mendukungnya dalam waktu dekat!
chrisgonzalez
5
Saya memiliki masalah lebar menggunakan variabel di dalam fungsi calc, tapi ditemukan di sini: stackoverflow.com/questions/13542164/... bahwa saya bisa referensi variabel seperti ini: calc(25% - #{$var}).
mlunoe
Untuk menindaklanjuti @ pernyataan dalgard ini, dalam hal browser yang ada, dirilis, calc tidak bekerja di lebih dari kerjanya di Lihat:. Caniuse.com/#search=calc
imjared
3
Anda selalu dapat menggunakan opsi mundur dengan menambahkan width: 22%di atas semua widthdengancalc
Hengjie
23

Ada calcfungsi di kedua SCSS [waktu kompilasi] dan CSS [run-time]. Anda kemungkinan menggunakan yang pertama alih-alih yang terakhir.

Untuk alasan yang jelas, unit pencampuran tidak akan bekerja pada waktu kompilasi, tetapi akan pada saat dijalankan.

Anda dapat memaksa yang terakhir dengan menggunakan unquote, fungsi SCSS.

.selector { height: unquote("-webkit-calc(100% - 40px)"); }
sandstrom
sumber
14 
$var:25%;
$foo:5px;
.selector {
    height:unquote("calc( #{$var} - #{$foo} )");
}
Edwin Fernando Marroquin Busto
sumber
2
Terima kasih telah mengirim jawaban untuk pertanyaan ini! Jawaban khusus kode tidak disarankan pada Stack Overflow, karena kode dump tanpa konteks tidak menjelaskan bagaimana atau mengapa solusi akan bekerja, sehingga sulit bagi poster asli (atau pembaca masa depan) untuk memahami logika di baliknya. Harap edit pertanyaan Anda dan sertakan penjelasan kode Anda sehingga orang lain dapat memperoleh manfaat dari jawaban Anda. Terima kasih!
Maximillian Laumeister
Itu menyelamatkan saya. width: unquote ("calc (100% - # {$ leftnav-width})");
httpete
5

JIKA Anda tahu lebar wadah, Anda bisa melakukan ini:

#container
  width: #{200}px
  #element
    width: #{(0.25 * 200) - 5}px

Saya sadar bahwa dalam banyak kasus #container dapat memiliki lebar relatif. Maka ini tidak akan berhasil.

Desain oleh Adrian
sumber
2

Maaf telah menghidupkan kembali utas lama - Kompas 'peregangan dengan: setelah pseudo-selector mungkin sesuai dengan tujuan Anda - misalnya. jika Anda ingin div untuk mengisi lebar dari kiri ke (50% + 10px) layar yang bisa Anda gunakan (dalam sintaks indentasi SASS):

.example
    background: red
    +stretch(0, -10px, 0, 0)
    &:after
        +stretch(0, 0, 0, 50%)
        content: ' '
        background: blue

Elemen: after mengisi 50% di sebelah kanan .example (menyisakan 50% tersedia untuk lebar .example), lalu .example direntangkan ke lebar itu ditambah 10px.

Bryce Gilhome
sumber
1
apakah ada sedikit atau tidak ada campuran untuk ini di suatu tempat? calc tampaknya tidak bekerja dengan baik sama sekali.
v3nt
0

Cukup tambahkan nilai persentase ke dalam variabel dan gunakan #{$variable} misalnya

$twentyFivePercent:25%;
.selector {
    height: calc(#{$twentyFivePercent} - 5px);
}
Aftab Ahmed
sumber