Конвертируем CSS в SASS/SCSS/LESS

Недавно я писал, как установить SASS/SCSS препроцессор на Drupal: Устанавливаем SASS / SCSS препроцессор на Drupal 7

Должен заметить, что SCSS штука очень удобная, и сразу возникает вопрос, как конвертировать свои старые проекты на SCSS рельсы. Ответ нашелся сразу — парочка онлайн конверторов.

Первый — Least. Умеет конвертировать CSS в LESS/SASS и Stylus. Есть настройки для разделителей (два пробела, четыре пробела, табуляция).

Вот пример его работы:

Least CSS to LESS/SASS Convertor

Второй конвертор — css2sass. Умеет конвертировать CSS в SCSS или SASS. Настроек у него нет и как мы видем на скрине он не вырезает комментарии. Возможно это кому-то важно. В качестве разделителей использует двойной пробел. Вот так выглядит пример его работы:

css2sass convertor

Что важно, данный конвертор ищет ошибки в CSS и не конвертирует в SCSS/SASS, пока вы их не исправите.

Дальше рассмотрим css2less конвертор. Конвертор примечателен тем, что сортирует по алфавиту и по важности селекторы. А так же делает более сложную вложенную структуру. LESS, конечно, немного отличается от SCSS, но в общих чертах данный конвертор подходит и к нему.

Что касается сложности кода, то, например, такой код

  1. #block-multiblock > .block-inner > .content > ul > li {
  2.     float:left;
  3.         width:50%;
  4.         margin-bottom:10px;
  5. }
  6.  
  7. #block-multiblock > .block-inner > .content > ul > li > ul {
  8.     margin-top:10px;
  9. }
  10.  
  11. #block-multiblock > .block-inner > .content > ul > li > a {
  12.         font-size:17px;
  13.         color:black;
  14. }
  15.  
  16. #block-multiblock > .block-inner > .content > ul > li > a + ul.menu li {
  17.         list-style:disc inside none;
  18.         color:white;
  19. }

Данным конвертором будет преобразован в

  1. #block-multiblock {
  2.     & > .block-inner {
  3.         & > .content {
  4.             & > ul {
  5.                 & > li {
  6.                     float:left;
  7.                     width:50%;
  8.                     margin-bottom:10px;
  9.                     & > a {
  10.                         font-size:17px;
  11.                         color:black;
  12.                         + {
  13.                             ul.menu {
  14.                                 li {
  15.                                     list-style:disc inside none;
  16.                                     color:white;
  17.                                 }
  18.                             }
  19.                         }
  20.                     }
  21.                     & > ul {
  22.                         margin-top:10px;
  23.                     }
  24.                 }
  25.             }
  26.         }
  27.     }
  28. }

Least сконвертирует его точно так же, а вот css2sass сделает иначе и, если честно, мне так нравится больше. Код компактнее и легче читается. Хотя для модификации родительских элементов придется его немного модифицировать, но это уже мелочи, которые могут и не понадобиться!

  1. #block-multiblock > .block-inner > .content > ul > li {
  2.   float: left;
  3.   width: 50%;
  4.   margin-bottom: 10px;
  5.   > {
  6.     ul {
  7.       margin-top: 10px;
  8.     }
  9.     a {
  10.       font-size: 17px;
  11.       color: black;
  12.       + ul.menu li {
  13.         list-style: disc inside none;
  14.         color: white;
  15.       }
  16.     }
  17.   }
  18. }

Если кто-нибудь знает другие конверторы, напишите, пожалуйста их в комментарии :-)