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 '%'.

sass

— Mike Fielden
źródło

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

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});
}

— chrisgonzalez
źródło

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)"); }

— sandstrom
źródło

14

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

— Edwin Fernando Marroquin Busto
źródło

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.

— Projekt: Adrian
źródło

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.

— Bryce Gilhome
źródło

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);
}

— Aftab Ahmed
źródło