Начална » кодиране на стоките » Автоматизирайте селекторите nth-child с Family.scss Mixins

    Автоматизирайте селекторите nth-child с Family.scss Mixins

    дръзки приказки е най-добрият начин за управление на модерните CSS и смеси библиотеки може да спести още повече време по време на цикъла на разработка.

    Тези миксини работят като автоматизирани кодове или функции които наричате във вашите основни Sass файлове. Някои миксини са по-общи, докато други са много специфични, като например Библиотека на Family.scss.

    Тази безплатна библиотека предлага 26 бр за бягане комплекс : Тото-дете селектори без да запаметяваш целия този код.

    Повечето разработчици знаят за : Тото-дете по подразбиране, това със сигурност не е сложно. Вие просто преминете през цифров селектор, например : Тото-дете (2) където съответните правила за стил се прилагат за всяко второ дете от родителския елемент.

    Това обаче може да стане много по-сложно, когато искате да изберете динамични елементи (като първо и последно) или когато искате да изберете a малка шепа елементи (като първите три деца).

    Това е мястото, където Family.scss може да помогне. Това е много малка библиотека и съдържа 26 решения за подбор на деца вариращи от основно до супер сложно. Всеки миксин има демонстрация на началната страница, която можете да разглеждате и филтрирате, ако е необходимо.

    Ето няколко интересни примери да покаже какво може да направи тази библиотека:

    • след първия (5) - изберете всички елементи след първите 5 деца
    • от края (3) - изберете елемента 3-то до последно
    • всички-но (3) - изберете всички деца, освен третата
    • равномерно (3, 12) - изберете всички деца дори между 3-ти и 12-ти елемент

    Има още десетки, които можете да разглеждате и всеки от тях има демонстрации, които да ви помогнат да си представите как работят.

    Няколко модерни миксина разчитат на заявки за количество които избират елементи, които са “поне” или “най-много” определени в определен диапазон. Например можете да изберете всички деца за родителски елементи, които имат поне 5 деца (или повече).

    Тези идеи могат да бъдат объркващи, когато четете за тях, но живи демонстрации наистина ще направи всичко кристално чисто.

    За да копаеш, можеш изтеглете копие на тази смесена библиотека от GitHub repo, заедно с всички тези демонстрации. И можете да споделите своите мисли или въпроси с създателя на проекта в Twitter @LukyVJ.