Menghitung lebar dari persen ke piksel lalu dikurangi piksel di LESS CSS


100

Saya akan menghitung lebar dalam beberapa elemen dari persen ke piksel jadi saya akan minus -10px melalui menggunakan LESS dan calc () . Itu mungkin?

div {
    span {
        width:calc(100% - 10px);
    }
}

Saya menggunakan CSS3 calc()jadi tidak berhasil:calc(100% - 10px)

Contoh: jika 100% = 500px maka lebar = 490px (500-10);

Saya membuat demo untuk pengujian: http://jsfiddle.net/4DujZ/55/

jadi padding akan mengatakan: 5 (10px / 2) sepanjang waktu saat saya mengubah ukuran.

Bisakah saya melakukannya dengan LESS ? Saya tahu bagaimana melakukannya di jQuery dan CSS sederhana seperti margin padding atau yang lain ... tetapi saya akan mencoba melakukan fungsional dengan KURANGcalc()


1
Sebagai aturan umum, jangan mengatur gaya pemilih yang tidak memiliki semantik , seperti divatau span.
Pavlo

1
Berikut adalah campuran lintas browser yang saya tulis untuk menggunakan calc pada properti css apa pun: stackoverflow.com/a/24790931/916734
Patrick Berkeley

Jawaban:


246

Anda bisa keluar dari calcargumen untuk mencegahnya dievaluasi pada kompilasi.

Menggunakan contoh Anda, Anda cukup mengapit argumen, seperti ini:

calc(~'100% - 10px')

Demo: http://jsfiddle.net/c5aq20b6/


Saya menemukan bahwa saya menggunakan ini dengan salah satu dari tiga cara berikut:

Escaping Dasar

Segala sesuatu di dalam calcargumen didefinisikan sebagai string, dan benar-benar statis hingga dievaluasi oleh klien:

Masukan KURANG

div {
    > span {
        width: calc(~'100% - 10px');
    }
}

Keluaran CSS

div > span {
  width: calc(100% - 10px);
}

Interpolasi Variabel

Anda dapat memasukkan variabel LESS ke dalam string:

Masukan KURANG

div {
    > span {
        @pad: 10px;
        width: calc(~'100% - @{pad}');
    }
}

Keluaran CSS

div > span {
  width: calc(100% - 10px);
}

Mencampur Nilai Lolos dan Dikompilasi

Anda mungkin ingin melepaskan nilai persentase, tetapi lanjutkan dan evaluasi sesuatu pada kompilasi:

Masukan KURANG

@btnWidth: 40px;
div {
    > span {
        @pad: 10px;
        width: calc(~'(100% - @{pad})' - (@btnWidth * 2));
    }
}

Keluaran CSS

div > span {
  width: calc((100% - 10px) - 80px);
}

Sumber: http://lesscss.org/functions/#string-functions-escape .


2
Anda keren, bung! Terima kasih atas contoh dan penjelasannya. Apakah Anda kebetulan tahu bagaimana saya bisa membagi lebar wadah yang tidak diketahui (sebut saja div.categories) menjadi 4 bagian yang sama, menggunakan LESS?
Shawn Spencer

5
@ShawnSpencer: Di antara garis, ada banyak ketidakjelasan. Bisakah Anda membuat JSFiddle yang menggambarkan apa yang Anda coba selesaikan? Saya dapat mencoba menebak kasus penggunaannya, tetapi saya terhambat karena tidak mengetahui detail lengkapnya, dan saya yakin Anda tahu bagaimana kelanjutannya — hambatan terburuk Anda cenderung membuat Anda marah pada akhirnya.
natchiketa

2
Saya tidak ingin menyerah pada kedewasaan. Karena saya mencari solusi CSS langsung, dan karena saya dapat membuat semuanya bekerja, menggunakan salah satu jawaban, saya baik-baik saja untuk saat ini. Terima kasih telah menawarkan untuk melihat contoh JSFiddle. Sangat dihargai.
Shawn Spencer

0

Saya pikir width: -moz-calc(25% - 1em);itulah yang Anda cari. Dan Anda mungkin ingin melihat Tautan ini untuk bantuan lebih lanjut


-3

Atau, Anda dapat menggunakan atribut margin seperti ini:

    {
    background:#222;
    width:100%;
    height:100px;
    margin-left: 10px;
    margin-right: 10px;
    display:block;
    }

3
OP menginginkan lebar 10px kurang dari 100% lebarnya. CSS Anda tidak melakukan itu. Ini akan membuatnya lebih luas dari 100%.
Andrew Barber

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.