Created
September 11, 2015 20:49
-
-
Save larrycinnabar/9351cb5c2cc2e73b5512 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// ==== 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