Koala + Sass

Решил вплотную заняться Sass, для чего установил «среду разработки» под название Коала (Open Source).

Споры, что лучше — Sass или LESS, я опущу. Я выбрал Sass, точнее SCSS — некий промежуточный вариант между «простым» css и более широким Sass. Но в принципе SCSS — это Sass. Базис, основа итд итп.

Что это такое? При написании стилей css очень часто приходится повторяться, постоянно приходится повторяться — вводить одни и те же параметры, что отнимает время, силы и увеличивает объемы и запутанность кода.

Sass позволяет всего этого избежать. Оставаясь целиком в привычном синтаксисе css, Sass позволяет использовать:
а) переменные (один раз задать значение и потом только вставлять то-то вроде $superpooper;, а если нужно изменить значение, то оно изменяется только один раз. И никаких гвоздей и косяков.
б) вложения(наглядно строить иерархию селекторов без постоянного ввода каждый раз километров их, например: #vassia .pipochkin .idet p .nafig i {}
то есть в sass, мы один и только один раз строим что-то такое

#vassia {
  .pipochkin {
     .idet {
       p {
       .nafig { 
          i {}
}
}
} 
}
}

и в этой иерархической конструкции задаем нужные параметры. Выглядит, может быть, не очень просто, и есть множество тонкостей, но это удобно, легко оперировать с дочерними и родительскими селекторами, видя картину в целом.
цэ) примеси (или функции scss):
вместо постоянного вот такого вот унджасса:

@mixin off() {
display: block; 
background: linear-gradient(
rgba(255,255,255, 0) .9em, rgba(70, 130, 180, .1) 1em)
0 0,    
linear-gradient(90deg,
rgba(255,255,255, 0) .9em, rgba(70, 130, 180, .1) 1em)
0 0;
background-size: 1em 1em;
background-color: ivory;
padding: 10px 30px 10px 30px;
-webkit-box-shadow: 1px 1px 2px 0px rgba(10,10,10,0.3);
-moz-box-shadow: 1px 1px 2px 0px rgba(10,10,10,0.3);
box-shadow: 1px 1px 2px 0px rgba(10,10,10,0.3); 
text-indent: 2%;
border-radius: 3px;
text-align: justify;
}

написать

.off-margin-wide {
@include off();
margin: 15em;
}
.off-margin-narrow {
@include off();
margin: 1em;
}

Просто, как 5 коп. А?

дэ) расширение — @extend — чем-то похоже на примеси, только дополнительно группирует селекторы, но так, что путаницы в свойствах разных селекторов не возникает: .petia-poopkine, .vassia-pipochkin, .zioma-crapker могут иметь и свои свойства помимо .oboldui {...}. Но расширение поможет без проблем все эти свойства не путать, если нужны только параметры оболдуев. Тоже в двух словах не опишешь. Классная вещь.

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

Коала эта что делает? Насколько я понял, как минимум подсвечивает синтаксис с автоза(до)полнением стандартов. Без этого никак, ошибки чреваты. А потом готовый scss код конвертирует в обычный читаемый css. Причем оптимизируя его, убирая пробелы и отступы, что уменьшает размер и время загрузки.

Посмотрим.

Уф.

Koala — a gui application for LESS, Sass, Compass and CoffeeScript compilation. https://t.co/hFzbUCgbvh via @OKLai

— Byakko (@LINGeLMSH) September 11, 2016