Категория:
Опубликовано:

Code style для компилируемых SASS-файлов в PHPStorm

PHPStorm and SASS

SASS - значительно ускоряет разработку.

Также, он имеет несколько настроек, с помощью которых можно влиять на вид компилируемого CSS-файла.

Ниже, приведу примеры, как в PHPStorm'е можно эти настройки применять.

Из доступных стилей:

  • Вложенный (:nested)
  • #main {
      color: #fff;
      background-color: #000; }
      #main p {
        width: 10em; }
    
    .huge {
      font-size: 10em;
      font-weight: bold;
      text-decoration: underline; }
  • Развернутый (:expanded)
  • #main {
      color: #fff;
      background-color: #000;
    }
    #main p {
      width: 10em;
    }
    
    .huge {
      font-size: 10em;
      font-weight: bold;
      text-decoration: underline;
    }
  • Компактный (:compact)
  • #main { color: #fff; background-color: #000; }
    #main p { width: 10em; }
    
    .huge { font-size: 10em; font-weight: bold; text-decoration: underline; }
  • Сжатый (:compressed)
  • #main{color:#fff;background-color:#000}#main p{width:10em}.huge{font-size:10em;font-weight:bold;text-decoration:underline}

Какой кому предпочтительнее, выбирайте сами... По умолчанию (без указания атрибута) формируется :nested

Для установки другого - в проекте, заходим в настройки (Ctrl + Alt + S) Tools - File Watchers.

В настройках необходимого watcher'а, в поле "Arguments" дописываем аргумент --style expanded, для выбора Развернутого (:expanded) стиля.

SASS File Watcher - Code Style.png

О том как настроить компиляцию SASS в шторме вычитал из статьи на хабре.

Как компилировать SASS без IDE, непосредственно в Drupal - написано в этом посте.

Если у Вас возникли вопросы, замечания, предложения или просто благодарность - пишите в комментариях.
Делитесь полезными материалами в социальных сетях.
Добавить комментарий