Мой Справочник | CSS3 | SCSS - Общее

Подключение файлов
Импорт файлов
@import "...";
@import "scss/vars";   // файл с переменными
@import "scss/mixins"; // файл с примесями

$base-color: #000; // определяем переменную

 // и далее можно уже писать scss-код

.content-box {
  @include some-mixin(100px, 50px);
  color: $base-color;
  ...
}
        

Расширения файлов:

У LESS файлы .less
У SASS файлы .scss
При импорте файлов .less, .scss само расширение файла можно НЕ ПИСАТЬ, но если импортировать css-файл, то писать .css НУЖНО!
Расширения @extend
Расширения @extend
.some-class {
  clear: left
  float: left;
}

.content-box {
  @extend .some-class;
  color: $base-color;
  border: 1px solid red;
}
// Результат: .some-class, .content-box, { clear: left float: left; } .content-box { color: #000; border: 1px solid red; }
Стили не дублируются, а наоборот редактируемый селектор добавляется через "," к расширяемому,
но лучше особо их НЕ ИСПОЛЬЗОВАТЬ

Функция calc в LESS: height: ~"calc(100vh - 136px)";

pre-prec-css code organization