Piszę mediaquery i natknęłam się na coś co mnie zaskoczyło, co gorsza nie wiem co z tym zrobić. Stylizuję komórki wiersza nagłówka mixinami i praktycznie tymi samymi miksinami stylizuję komórki
Chodzi o to, że mimo bardzo podobnego zapisu ostateczna wartość brana jest z różnych miejsc w kodzie (podglądam to w FF)
W pierwszym wypadku jest brana z definicji height z bloku samego td
td {
border-right: $border;
border-left: $border;
text-align: center;
width: $column__width;
height: $cellHeight;
line-height: $lineHeightSmall;
padding: 2px;
vertical-align: middle;
@include mobileLandscape {
font-size: 0.7rem;
line-height: 0.9625rem;
height: 2rem;
}
/* @include mobilePortrait {
font-size: 0.7rem;
line-height: 0.9625rem;
height: 3.5rem;
}*/
@include tabletLandscape {
font-size: 0.7rem;
line-height: 0.9625rem;
height: 1rem;
}
@include narrowPlaystation {
font-size: 0.7rem;
line-height: 0.9625rem;
height: 1rem;
}
@include xtraSmall {
font-size: 0.7rem;
line-height: 0.9625rem;
height: 1 rem;
}
@include minimal {
font-size: 0.6rem;
line-height: 0.9rem;
height: 1 rem;
}
}
}
A w tym przypadku jest brana z ostatniego mixina na dole (czego się spodziewałam)
th {
border-right: $border;
border-left: $border;
cursor: pointer;
text-align: center;
height: $cellHeight;
font-size: $fontSmall;
line-height: $lineHeightSmall;
padding: 2px;
@include mobile {
font-size: 0.6125rem;
line-height: 0.9625rem;
height: 2rem;
}
@include mobilePortrait {
font-size: 0.6125rem;
line-height: 0.9625rem;
height: 3.5rem;
}
@include narrowPlaystation {
font-size: 0.7rem;
line-height: 0.9625rem;
height: 2rem;
}
@include xtraSmall {
font-size: 0.7rem;
line-height: 0.9625rem;
height: 2rem;
}
@include minimal {
font-size: 0.6rem;
line-height: 0.9rem;
height: 1rem;
}
}
Skąd ta różnica? Nie ukrywam, że nie bardzo wiem co mam dalej robić z kodem