Sass obliczyć procent minus px

Question

Chcę być w stanie wykonać następujące czynności:

height: 25% - 5px; 

Oczywiście, gdy to zrobić pojawia się błąd:

Incompatible units: 'px' and '%'. 

Answer 1

Sass nie może wykonywać działania arytmetyczne na wartościach, które nie mogą zostać przekształcone z jednej jednostki na drugą. Sass nie ma możliwości dowiedzenia się, jak szeroki jest "100%" pod względem pikseli lub jakiejkolwiek innej jednostki. To jest coś, o czym wie tylko przeglądarka. W tym celu należy użyć calc(). Check browser compatibility on Can I use...

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

Jeśli wartości są zmienne, może trzeba użyć interpolacji przekształcić je w ciągi (inaczej Sass tylko próbuje wykonywać działania arytmetyczne):

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

.foo { 
    width: -webkit-calc(#{$a} - #{$b}); 
    width: -moz-calc(#{$a} - #{$b}); 
    width:   calc(#{$a} - #{$b}); 
} 

Answer 2

IF Znasz szerokość pojemnik, możesz zrobić tak:

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

Mam świadomość, że w wielu przypadkach #container może mieć relat ive szerokość. Wtedy to by nie działało.

Answer 3

Przepraszamy za odświeżenie starego wątku - odcinek Kompasu z: pseudo-selektorem może odpowiadać twoim celom - np. jeśli chcesz div aby wypełnić szerokość od lewej do (50% + 10px) z ekranu można użyć (w składni wcięte Sass):

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

: po elementem wypełnienia 50% po prawej .example (pozostawiając 50% dostępnych dla .przykładowej szerokości), wtedy. Przykład jest rozciągnięty do tej szerokości plus 10 pikseli.

Answer 4

Istnieje funkcja calc w obu SCSS [czas kompilacji] i CSS [run-time]. Najprawdopodobniej powołujesz się na te pierwsze zamiast na drugie.

Z oczywistych względów jednostki miksujące nie będą działać podczas kompilacji, ale w czasie wykonywania.

Można wymusić drugi z nich za pomocą funkcji unquote, SCSS.

.selector { height: unquote("-webkit-calc(100% - 40px)"); } 

Answer 5

$var:25%; 
$foo:5px; 
.selector { 
    height:unquote("calc(#{$var} - #{$foo})"); 
}