Skip to content

Instantly share code, notes, and snippets.

@larrycinnabar
Created September 11, 2015 20:49
Show Gist options
  • Save larrycinnabar/9351cb5c2cc2e73b5512 to your computer and use it in GitHub Desktop.
Save larrycinnabar/9351cb5c2cc2e73b5512 to your computer and use it in GitHub Desktop.
// ==== 1. Было так:
// header.less
.header.container {
background : @dark-bg-color;
.media-for( height, @header_height);
.wrapper {
height : 100%; // height of .header.container (is set below in media queries)
.logo {
position : absolute;
z-index : 999;
.media-for( left, @logo_left );
.media-for( bottom, @logo_bottom );
.media-for( width, @logo_width );
.media-for( height, @logo_height );
// ....
}
}
}
// variables.less
@header_height : 90px, 140px, 140px, 140px; // .header.container height
@logo_width : 168px, 307px, 307px, 307px; // .header .logo width, .logo img width
@logo_height : 102px, 157px, 157px, 157px; // .header .logo height, .logo img height
@logo_left : -27px, -47px, 0px, 0px; // .header .logo left
@logo_bottom : -25px, -38px, 0px, 0px; // .header .logo top
// ===== 2. Стало: Не храним таблицу, просто передаём сразу все значения:
// header.less
.header.container {
background : @dark-bg-color;
.media-for( height; 90px, 140px, 140px, 140px;);
.wrapper {
height : 100%; // height of .header.container (is set below in media queries)
.logo {
position : absolute;
z-index : 999;
.media-for( left; -27px, -47px, 0px, 0px; );
.media-for( bottom; -25px, -38px, 0px, 0px; );
.media-for( width; 168px, 307px, 307px, 307px;);
.media-for( height; 102px, 157px, 157px, 157px; );
// ....
}
}
}
// ===== 3. Пояснение
// К примеру, правишь .header .logo left-координату. Посмотрели её в инспекторе, и вместо привычного старого left : 40px;
// пишешь .media-for(left; 40px, ...px, ...px, ...px;);
// указывая именно в тот диапазон, который нам надо. остальное можно писать auto или 0px - пока не знаем, чтобы потом исправить
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment