SASS Math Calculation

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

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

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

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

Ответ 1

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

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

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

Ответ 2

Это возможно в самых новых браузерах, используя 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

Ответ 3

Еще одним новым решением для браузера будет использование flexbox типа отображения. Кажется, что аналогичный объем поддержки как calc() (действительно просто очень современные браузеры).

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