Статьи

Что такое CSS3, SASS, SCSS, COMPASS, LESS, BOURBON

Февраль 4, 2019

Некоторые быстрые различия между CSS3, SASS, SCSS, COMPASS, LESS, BOURBON. Короткие и сладкие точки и ссылки. Для тех, кто новичок в изучении CSS, прочитайте ниже, а затем НАЧИНАЙТЕ ИСПОЛЬЗОВАТЬ КОМПАС!

CSS3

CSS3

  • CSS3 является последней версией CSS и предоставляет способным браузерам дополнительную функциональность, такую ​​как анимация.

Изучите демонстрационную документацию по CSS3 Проверьте свои браузеры, поддерживающие CSS3

SASS и SCSS

пререкаться

  • SASS (синтаксически удивительные таблицы стилей).
  • SASS — это расширенный набор (расширение) CSS3, обеспечивающий дополнительную функциональность, такую ​​как вложение, переменные, миксины и т.
  • SASS может генерировать файлы CSS на лету, когда вы их редактируете.
  • Sass обрабатывается на стороне сервера с использованием Ruby.
  • SASS использует разрывы строк и отступы, чтобы определить разделение правил подобно HAML.
  • SCSS (Sassy Style Sheets).
  • SCSS функционально аналогичен SASS, за исключением того, что для разделения правил используются фигурные скобки.

Документация по сайту Как установить

Быстрый пример 

CSS
li {
  font-family: serif;
  font-weight: bold;
  font-size: 1.2em;
}

SCSS
li {
  font: {
    family: serif;
    weight: bold;
    size: 1.2em;
  }
}

SASS
li
  font:
    family: serif
    weight: bold
    size: 1.2em

КОМПАС

компас

  • COMPASS — это CSS-фреймворк, использующий SASS.
  • COMPASS предоставляет библиотеку ценных CSS3, кросс-браузерные миксины, шаблоны типографики.
  • COMPASS создает спрайты изображений и легко включает их в CSS.
  • Легко обновляется через командную строку для последних префиксов браузера.

Демо- сайт Как установить 1 Как установить 2

Быстрый пример

Этот код КОМПАСА: 

 #opacity-10 {
    @include opacity(0.1);
}

Создает этот CSS: 

 //For IE<9

#opacity-10 {
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=10);
    opacity: 0.1;
}

//For all other browsers

#opacity-10 {
    opacity: 0.1;
}

МЕНЬШЕ

Меньше

  • LESS — это библиотека JavaScript, поэтому она обрабатывается интерфейсом.
  • LESS имеет много общих функций SASS, таких как вложенность, переменные, миксины и т. Д.
  • У Sass есть компас, а у LESS нет.

Демонстрационная документация сайта LESS vs SASS

БУРБОН

бурбон

  • Простая и легкая библиотека mixin для SASS.
  • Codekit может работать с миксинами Бурбона прямо из коробки, без необходимости настройки.
  • Молот также предварительно настроен для Бурбона.

Демонстрационная документация сайта

Если я что-то упустил, что может быть полезно для тех, кто только начинает, пожалуйста, оставьте комментарий! ?

43
Share: