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