SASS Math Calculation

Question

Пытается создать отзывчивую сетку видео. Вместо того, чтобы использовать разные% для каждого мультимедийного запроса, я надеялся использовать стандартную формулу SASS, которая вычисляет на основе 100% ширины, однако не уверен, что SASS может это сделать. 40 в приведенной ниже формуле учитывают 2 x 20px фиксированных полей (т. Е. Это будет сетка с тремя столбцами).

Идеальная формула:

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

Любой путь, CSS/SASS может справиться с этим? Предпочитаете не использовать JS, если это возможно.

Answer 1

К сожалению, вы не можете вычесть 40px с 33%. SASS генерирует стандартный файл CSS, который должен интерпретироваться браузером, а во время сборки SASS не знает размеров браузера.

Однако, вы должны быть в состоянии достичь желаемого эффекта с помощью CSS полей, например

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

Answer 2

Это возможно в all major browsers с помощью calc().

Демо: http://jsfiddle.net/gb5HM/

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

Конечно, вы все еще можете заявить об этом в файле SASS, но это чистое решение CSS. Это невозможно в SASS, потому что SASS не знает, что 100% на момент создания таблицы стилей, а значение пикселя 100% может меняться при изменении размера документа.

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

Answer 3

Еще новее решение браузер будет использовать flexbox display type. Кажется, у него есть similar amount of support as calc() (на самом деле просто очень современные браузеры).

Sass, или, более конкретно, Compass, был бы полезен здесь, так как он имеет flexbox mixins.