.. / css modules


    Объявление класса глобальным

    :global(.buttonHover:hover) {background-color: red;}
    // если будет подключен этот css, класс будет доступен во всех компонентах в качестве константы например:
    <button className={ this.props.cssName + ' buttonHover' } />

    Миксины в CSS-модулях

    .size {width: 60px;height: 60px;}

    .button {
    left: 200px;
    top: 200px;
    composes: size;
    }

    Миксины в CSS-модулях (импорт из другого CSS)

    .button {
    left: 200px;
    top: 200px;
    composes: size from "./global.css";
    }

    Вариант:

    .element {
    composes: padding-large from "./layout.css";
    composes: margin-small from "./layout.css";
    }

    Экспорт данных

    Возникает необходимость передать данные из CSS в JS. например размеры какого-то контейнера, чтобы не лесть и не определять его из DOM.
    CSS:
    :export { layoutSize: 1024; }
    JS:
    const styles = require('./css.css');
    console.log(styles.layoutSize) // 1024
    console.log(typeof(styles.layoutSize)) // string

    1. Из CSS экспорт только в виде string!
    2. Переменных в CSS-модулях не предусмотрено!

    На этом все плюшки css modules заканчиваются. Дальше их нужно брать из CSS-препроцессоров. Как вариант из новых спецификаций CSS. Не забудьте подгрузить в сборку плагины для post-css: css-variables и css-calc и настроить сборщик

    Переменные в CSS4

    :root {
    --layoutSize: 1024px;
    }
    .element {
    width: var(
    --layoutSize);
    height: var(
    --layoutSize);
    }

    Вычисления в CSS4

    :root {
    --layoutSize: 1024px;}

    .element {
    width:
    calc(var(--layoutSize))
    height: calc(var(--layoutSize))
    }

    Или так:

    :root {
    --layoutSize: 1024;}
    .element {
    width: calc(var(--layoutSize)*1px);
    height: calc(var(--layoutSize)*1px);
    }
    :export { layoutSize: var(--layoutSize); }

    Вот такое вот ...


    Ссылки

    https://www.sitepoint.com/understanding-css-modules-methodology/

    https://github.com/MadLittleMods/postcss-css-variables

    https://github.com/postcss/postcss-loader

    https://www.sitepoint.com/understanding-css-modules-methodology/





    1. 2016-08-25
    1. -
Go Index Test