2015-08-14 3 views
0

Я хотел бы получить ширину и высоту устройства в SASS. Потому что я хочу создать функцию для преобразования vw/vh в пиксель для несовместимых платформ.Получить размер устройства в SASS

Я уже пишу эту функцию в МЕНЬШЕ

@w_device:`$(window).width()/100`; 
@h_device:`$(window).height()/100`; 

.vh(@v){ 
    @val:round(@h_device*@v*1px); 
} 
.vw(@v){ 
    @val:round(@w_device*@v*1px); 
} 

Кто-нибудь есть идеи, как сделать это в SASS?

Благодаря

+2

Для написания выше требуется компиляция LESS в браузере. Другими словами, используя Less.js. Это предназначено только для развития, а не для производства. Сейчас SASS не имеет эквивалента Less.js (см. Http://stackoverflow.com/questions/4436643/is-there-a-sass-js-something-like-less-js). SASS * должен быть предварительно скомпилирован. SASS не может знать '$ (window) .width()', потому что когда он скомпилирован, нет 'окна'. – nabrown78

+0

Спасибо за ваш ответ, я подозревал что-то вроде этого. Есть ли другой способ воссоздать поведение V-единиц? – Meco

+0

Помимо установки 'width' или' height' с использованием процентов, нет. К счастью, vw и vh имеют неплохую поддержку: http://caniuse.com/#feat=viewport-units, хотя vmin и vmax меньше. – nabrown78

ответ

0

Я думаю, что это очень близко к тому, что вы просите.

@function get-vw($target) { 
    $vw-context: (1000*.01) * 1px; 
    @return ($target/$vw-context) * 1vw; 
} 

Использование:

h1 { 
    font-size: get-vw(72px); 
} 

Поскольку vw составляет 1% от окна просмотра можно масштабировать размер в px как отношение. Возвращаемое значение может использоваться для других элементов. IE: изображения, фоны и т. Д.

Здесь great article обсуждается несколько подходов Сасса.

Смежные вопросы