Obliczanie matematyczne SASS

Question

Próbujesz utworzyć responsywną siatkę wideo. Zamiast używać różnych% dla każdego zapytania o media, miałem nadzieję użyć standardowej formuły SASS, która oblicza się na podstawie szerokości 100%, ale nie jestem pewien, czy SASS może to zrobić. Formuła 40 w poniższym wzorze uwzględnia stałe marginesy 2 x 20 pikseli (tj. Jest to siatka 3-kolumnowa).

Idealna formuła:

ul.videos { 
    li { 
    width: ((100%/3) - 40); 
    } 
} 

jakikolwiek sposób CSS/SASS może obsłużyć to? Wolałby nie używać JS, jeśli to możliwe.

Answer 1

Niestety nie można odjąć 40px od 33%. SASS generuje standardowy plik CSS do interpretacji przez przeglądarkę, a w czasie budowy SASS nie zna wymiarów przeglądarki.

Jednakże, powinno być możliwe, aby osiągnąć pożądany efekt za pomocą marginesów CSS, np

ul.videos { 
    li { 
    width: (100%/3); 
    div { 
     margin: 0 20px; 
    } 
    } 
} 

Answer 2

jest to możliwe w all major browsers użyciu calc().

Demo: http://jsfiddle.net/gb5HM/

li { 
    display: inline-block; 
    width: calc(100%/3 - 40px); 
} 

Oczywiście, nadal można zadeklarować to w pliku Sass, ale jest to czysty roztwór CSS. W SASS nie jest to możliwe, ponieważ SASS nie wie, co to jest 100% w czasie generowania arkusza stylów, a wartość 100% piksela może się zmieniać wraz ze zmianą rozmiaru dokumentu.

Spec: http://www.w3.org/TR/css3-values/#calc

Answer 3

Innym rozwiązaniem nowsza przeglądarka byłoby użyć flexbox display type. Wydaje się mieć similar amount of support jako calc() (naprawdę po prostu bardzo nowoczesne przeglądarki).

Sass, a ściślej mówiąc Compass, byłby tu przydatny, ponieważ ma numer flexbox mixins.