Słupy z kompasem bez rynsztoków? - css3, kompas-sass, susy-compass

Mam siatkę, która działa doskonale, oprócz tego, że jachcesz, aby kolumny w grze nawigacyjnej były ustawione względem siebie. Jest to 24-kolumnowa magiczna siatka na pulpicie, a każdy z tych elementów nawigacyjnych to 4/24. Jeśli spróbuję ujemnych marginesów, nie będą one już obejmowały całej szerokości paska nawigacji, przesuwają się w lewo i zostawiają dziurę (ostatni element to omega). Czy można to zrobić za pomocą kolumn, czy też muszę po prostu wykonać mój navbar? Tutaj na tym zrzucie ekranu pokolorowałem je wszystkie na szaro, aby było oczywiste:

Odpowiedzi:

Eric Meyer jest tak niesamowity, że zawiera teraz coś, co pomoże ci w rozwiązaniu tego problemu. Steve - spójrz na to krwawić w najnowszej wersji Susy.

Wierzę, że to pomogłoby ci z twoim problemem. Umożliwia to wykonanie następujących czynności:

.nav-item {
...
@include bleed(1 of 4);
}

Zapoznaj się dokładnie z aktualizacja do susy z izolowaniem i spadkiem

Mam nadzieję, że pomaga! I dziękuję Ericowi za wykonanie tak wspaniałej pracy na Susy :)

Jeśli nie potrzebujesz rynien, nie potrzebujesz pomocy od Susy - matematyka jest prosta:

.nav-item {
float: left;
width: percentage(4/24);
}

To wszystko, ale jak zauważyłeś, jest coś ekstramiejsce w niektórych przeglądarkach ze względu na zaokrąglanie podpikselowe. Nie ma prostego rozwiązania do zaokrąglania podpikseli, z wyjątkiem uczenia się projektowania wokół niego. Susy unosi końcową kolumnę w prawo, ponieważ łatwiej jest ukryć przestrzeń wewnątrz niż na krawędziach.

Twój inna opcja jest nieco odstraszający i zbliża się (ale nie docała droga). Przeciągając wszystkie kolumny w lewo, możesz je odepchnąć na miejsce, nie pozwalając na dodanie błędów zaokrąglania. W ten sposób nigdy nie będziesz mieć więcej niż 1px gap:

.nav-item {
float: left;
width: percentage(4/24);

// pull things flush left
margin-right: -100%;

// push things back into place
@for $i from 1 through 6 {
&:nth-child(#{$i}) { margin-left: percentage(($i - 1)*4/24); }
}
}

Możesz używać klas zamiast:n-dziecko, jeśli oczywiście korzystasz ze starszych przeglądarek. Jeśli wykonujesz jakiś responsywny projekt, jest to najlepsze, co możesz zrobić. Nie ma sposobu na uniknięcie zaokrąglania subpikselowego całkowicie za pomocą responsywnego projektu. Gorąco polecam naukę projektowania wokół tego.