PostCSS проверка существование класса &?

278
27 января 2017, 07:06

Начал использовать PostCSS в мелком проекте, раньше использовал препроцессор Less. Часто сталкиваюсь с задачей, что если у элемента есть такой класс, то применить такие стили, пример:

.link {
  color: blue;
  // В Less можно использовать амперсанд (&) для решения такой задачи
  &.active {
   color: red; 
  }
}

А как в PostCSS сделать нечто такое? Амперсанд в PostCSS это ссылка на родительский элемент и после сборки проекта Webpack'ом то выше указанный код не подходит, амперсанд вставляет имя родительского класса

Вот результат работы PostCSS с плагином postcss-nested:

/* Профиль пользователя */
.app-components-Aside-__user__1gy.app-components-Aside-__wrapper__1n4 {
   height: 42px;
   width: 100%;
   background-color: red;
}

и рендер компонента

<div class="app-components-Aside-__user__1gy">
  <div class="app-components-Aside-__user__1gy-wrapper"></div>
</div>

сам компонент

import React from 'react';
import { Link } from 'react-router';
/* component styles */
import s from './styles.css';
function Aside() {
   return (
      <aside className={s.root}>
          <div className={s.user}>
              <div className={s.user + '-wrapper'}></div>
          </div>
      </aside>
  );
}
export default Aside;
READ ALSO
Фиксированый header на Jquery

Фиксированый header на Jquery

Здравсвуйте,зделал фикированый header на jqueryЗаметел что при прокрутки на начале страницы он неприятно дергается

340
Gulp сборка в разные styl файлы

Gulp сборка в разные styl файлы

Сейчас есть конфигурация Gulp, в которой все скрипты пишутся в одинcss файл

361
stylus import: выбрать кроме файлов с суффиксом

stylus import: выбрать кроме файлов с суффиксом

Естьstyl файл, который импортирует все другие файлы с определенных папок

382