LESS CSS'de genişliği yüzdeden piksele, sonra eksi piksele göre hesaplama

Bazı elemanlarda genişliği yüzde ile piksel arasında hesaplayacağım, böylece LESS ve calc () kullanarak eksi -10px yapacağım . Mümkün?

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

CSS3 kullanıyorum, calc()bu yüzden çalışmıyor:calc(100% - 10px)

Örnek: eğer% 100 = 500px ise genişlik = 490px (500-10);

Test için bir demo yaptım: http://jsfiddle.net/4DujZ/55/

bu nedenle , yeniden boyutlandırdığımda doldurma şunu söyleyecektir: 5 (10px / 2).

Bunu DAHA AZ olarak yapabilir miyim ? JQuery'de ve kenar boşluğu dolgusu gibi basit CSS'de nasıl yapılacağını biliyorum ... ancak LESS ile işlevsellik yapmaya çalışacağımcalc()

calcDerlemede değerlendirilmelerini önlemek için argümanlardan kaçabilirsiniz .

Örneğinizi kullanarak, argümanları şöyle çevrelersiniz:

calc(~'100% - 10px')

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

Bunu aşağıdaki üç yoldan biriyle kullandığımı görüyorum:

Temel Kaçış

Bağımsız calcdeğişkenlerin içindeki her şey bir dizge olarak tanımlanır ve istemci tarafından değerlendirilene kadar tamamen statiktir:

DAHA AZ Giriş

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

CSS Çıktısı

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

Değişkenlerin Enterpolasyonu

Dizeye LESS değişken ekleyebilirsiniz:

DAHA AZ Giriş

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

CSS Çıktısı

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

Kaçan ve Derlenen Değerleri Karıştırma

Yüzde değerinden kaçınmak isteyebilirsiniz, ancak devam edin ve derleme üzerinde bir şeyler değerlendirin:

DAHA AZ Giriş

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

CSS Çıktısı

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

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

Sanırım width: -moz-calc(25% - 1em);aradığınız şey bu. Daha fazla yardım için bu Bağlantıya bir göz atmak isteyebilirsiniz

Veya margin özelliğini şu şekilde kullanabilirsiniz:

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

Bunu dene :

width:auto;
margin-right:50px;