Sass oblicza procent minus piksel


141

Chcę móc wykonać następujące czynności:

height: 25% - 5px;

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

Incompatible units: 'px' and '%'.

Otrzymuję Invalid property valuebłąd. W każdej przeglądarce, w tym w wersji Canary Chrome.
Mike Fielden

Jeśli istnieje funkcja Sass thatd dostać mnie co chcę thats cool, ja po prostu bawi się z calc...
Mike Fielden

Tak :) Tak jak powiedziałem, nie obchodzi mnie, jak to się stanie, calckiedy poszedłem pierwszy i nie zadziałało. Wygląda na to, że calcnie działa w żadnej z moich przeglądarek, więc domyślam się, że najlepsza byłaby implementacja Sass.
Mike Fielden

1
Sass nie może działać jako wypełnienie funkcji calc (). Nie wie, jak przekonwertować 25% na px, więc może wykonać obliczenia i wygenerować CSS. W zależności od Twoich potrzeb, może istnieć alternatywa, na przykład użycie rodziny stołów displayowych, zmiana rozmiaru pudełka lub użycie ujemnych marginesów ( jsfiddle.net/5JZGt )
cimmanon

Odpowiedzi:


255

Sass nie może wykonywać arytmetyki na wartościach, których nie można przekształcić z jednej jednostki na drugą. Sass nie ma sposobu, aby dowiedzieć się dokładnie, jak szerokie jest „100%” pod względem pikseli lub jakiejkolwiek innej jednostki. Wie o tym tylko przeglądarka.

Zamiast tego musisz użyć calc(). Sprawdź zgodność przeglądarki w Czy mogę używać ...

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

Jeśli twoje wartości są w zmiennych, być może będziesz musiał użyć interpolacji, aby zamienić je na ciągi (w przeciwnym razie Sass spróbuje po prostu wykonać arytmetykę):

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

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

5
Powiedziałbym, że calc () w ogóle nie działa w większości przeglądarek. Platformy mobilne są tak samo ważne jak komputery stacjonarne.
dalgard,

3
Brak argumentów, ale policz przeglądarki! Więcej wsparcia dla funkcji calc () niż nie, a nawet więcej będzie obsługiwać go w najbliższej przyszłości!
chrisgonzalez

5
Miałem problemy szerokość użyciu zmiennej wewnątrz funkcji calc, ale znaleźć tutaj: stackoverflow.com/questions/13542164/... że mogę odwołać zmiennej takiego: calc(25% - #{$var}).
mlunoe

3
Zawsze możesz skorzystać z opcji powrotu, dodając width: 22%przede wszystkim widths zcalc
Hengjie

1
Stary wątek, ale najwyraźniej możesz również przechowywać samą komendę "calc ()" w zmiennej, więc nie musisz powtarzać operacji arytmetycznych w całym pliku. Przykład: $ wysokość-wideo: calc (# {$ szerokość-wideo} * # {współczynnik-proporcji}); .my-elements {height: $ video-height; }
Stephen Kaiser

25

Tam jest calc funkcja zarówno w SCSS [czas kompilacji], jak i CSS [czas wykonywania]. Prawdopodobnie odwołujesz się do tego pierwszego zamiast drugiego.

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

Możesz wymusić to drugie używając unquotefunkcji SCSS.

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

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

2
Dziękujemy za wysłanie odpowiedzi na to pytanie! Odpowiedzi zawierające tylko kod są odradzane w przypadku przepełnienia stosu, ponieważ zrzut kodu bez kontekstu nie wyjaśnia, w jaki sposób ani dlaczego rozwiązanie będzie działać, co utrudnia oryginalnemu plakatowi (lub przyszłym czytelnikom) zrozumienie logiki stojącej za nim. Zmień swoje pytanie i dołącz wyjaśnienie kodu, aby inni mogli skorzystać z Twojej odpowiedzi. Dzięki!
Maximillian Laumeister

To mnie uratowało. width: unquote ("calc (100% - # {$ leftnav-width})");
httpete

7

JEŚLI znasz szerokość pojemnika, możesz zrobić tak:

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

Zdaję sobie sprawę, że w wielu przypadkach #container może mieć względną szerokość. Wtedy to nie zadziała.


2

Przepraszamy za ożywienie starego wątku - rozciągnięcie Compassa z pseudo-selektorem: after może pasować do twojego celu - np. jeśli chcesz, aby div wypełniał szerokość od lewej do (50% + 10px) ekranu, możesz użyć (w składni z wcięciem SASS):

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

Element: after wypełnia 50% na prawo od .example (pozostawiając 50% dostępnego dla szerokości .example), a następnie .example jest rozciągane do tej szerokości plus 10 pikseli.


1
czy jest gdzieś mniej lub bardziej sassa mieszanie tego? calc nie działa zbyt dobrze.
v3nt

1

Po prostu dodaj wartość procentową do zmiennej i użyj #{$variable} na przykład

$twentyFivePercent:25%;
.selector {
    height: calc(#{$twentyFivePercent} - 5px);
}
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.