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

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()

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 .

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

Atau, Anda dapat menggunakan atribut margin seperti ini:

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

Coba ini :

width:auto;
margin-right:50px;