Стиль сайт с использованием Sass

Вы можете многое сделать с CSS - возможно, больше, чем вы думаете - но почтенный стиль листового языка имеет свои ограничения. В современном веб-проекте, с модулями NPM, JavaScript Frameworks, ES6 и многое другое, он может чувствовать несколько анахронистов, чтобы вернуться к написанию ванильных CSS.

К счастью, там есть варианты, которые позволяют использовать другие языки, которые компилируют CSS. Назначаемые как «препроцессоры», эти инструменты интегрируются в процесс вашего веб-сборки и генерируют пригодные листы стилей из любых выбранных вами языка расширения.

SASS (синтаксически потрясающие листы стиля) является одним из самых популярных из этих вариантов - Подробнее с нашим руководством Что такое сасс? SASS добавляет много ценных новых языковых функций, которые не (в настоящее время) доступны в CSS, чтобы сделать ваши сайты и приложения более ремонты. К ним относятся такие вещи, как Mixins и управляющие директивы, которые звучат пугает, но на самом деле довольно просты, и мы посмотрим на них в этом руководстве. Если вы хотите сохранить вещи даже проще, вы можете пользователю Строитель сайта Отказ

• Крутые CSS анимации для воссоздания

Существует на самом деле два различных синтаксиса для SASS, который использует расширение файла .scsssss, и тот, который использует .sass. Первый выглядит больше похоже на CSS (на самом деле, все файлы .css являются действительными файлами .scssss), в то время как последний исключает скобки CSS и запятой в пользу отступа и новых линий. Мы сосредоточимся на .scss, но выбор просто доставляет личные предпочтения. Обновление вашего сайта? Убедитесь, что вы веб хостинг Сервис делает то, что вам нужно, и получите облачное хранилище Право тоже.

Загрузите файлы для этого руководства здесь (выпуск 282)

01. Настройте компилятор

Использование SASS по существу требует компилятора. Самый простой способ сделать это будет в командной строке. Вы можете сделать это, используя домой. Компилятор SASS реализован на нескольких разных языках, а доморьт установит версию DART, которая быстро.

brew install sass/sass/sass

02. Создайте файл SASS

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

 $ Цвет текста: #CCCCCC;
тело {
    Цвет: $ Цвет;
} 

03. Компиляция командной строки

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

 Sass Sass-input.scss css-roduct.css 

04. Автоматизируйте вашу сборку

Это здорово, но вы не хотите запустить компилятор SASS вручную каждый раз, когда вы вносите изменения. Одним из вариантов состоит в том, чтобы она слушала изменения в файлах в каталоге и автоматически перекомпилировать вывод в другой каталог (сохранение файлов файлов). Это также эффективно позволяет отделить файл исходных устройств от ваших созданных CSS.

 MKDIR SRC
mkdir src / sass
Мкдир Публикация
mkdir public / css
Sass --watch src / sass /: public / css /

05. Играть с стилем Sass

Теперь давайте посмотрим на простой стартовый сайт, который мы можем использовать для игры с стилем Sass. Мы можем начать с клонирования нестандартного примера сайта. Ключевое следует отметить, что наша HTML-страница ничего не знает о SASS. Он имеет одну точку входа в файл CSS, которую мы создадим дальше.

 CD Public
Curl -o index.html https: // RAW.
githubusercontent.com/simon-a-j/sass-
руководство/
Master / Public / index.html 

06. Главная таблица стилей

Мы используем Styles.csss в качестве основной точки входа CSS, которая позже мы будем использовать для импорта других модулей. Это означает, что нам нужно сказать SAS для генерации этого файла, поэтому нам также нужно создать файл styles.csss в нашей папке SRC / SASS. Если вы работаете Sass --watch. Как и прежде, это автоматически будет скомпилировано на CSS в Public / CSS. Папка, а обновление вашего сайта покажет свои изменения. Попробуйте сделать некоторые модификации и освежающую страницу HTML в браузере, как вы идете.

 // styles.scsss
тело {
  Семья шрифта: Sans-Serif;
  текстовый выровнян: центр;
}

07. Управлять цветовой схемой

Давайте посмотрим, как SASS может помочь нам управлять цветовой схемой для сайта. Обычно есть палитра из пяти или шести цветов для веб-страницы. Мы можем экстернать их в _colours.scss. Отказ Префикс подчеркивания сообщает Sass не собирать это в новый HTML-файл («частичный»). Но мы можем использовать его немного по-другому.

 // _Colours.scsss
Цвет - первичный: # 231651;
$ цвет - вторичный: # 2374ab;
$ цветной свет: # D6FFF6;
$ color-highlight1: # 4dccbd;
$ color-highlight2: # FF8484;

08. Используйте цветные переменные

Чтобы использовать эти переменные цвета, которые мы только что настроили, мы можем сказать SASS для импорта содержимого _colours.scss. в наш главный стиль листа. Мы делаем это, используя @импорт утверждение. После этого вы сделаете это, обратите внимание, как разрешены переменные в файле вывода CSS.

 // styles.scsss
@import "_Colours.scss";
тело {
  Семья шрифта: Sans-Serif;
  текстовый выровнян: центр;
  Фон: линейный градиент (155DEG,
$ Color-Primary 70%, $ Color-Secretary
70%);
  Цвет: $ цветной свет;
  Мин-высота: 100ВХ;
}
h1 {
    Цвет: $ color-highlight1;
}
H2 {
  Цвет: $ color-highlight2;
}

09. Стили гнезда

Еще одной полезной особенностью SASS - это способность к стилям гнезда. То есть вы можете указать стиль для элемента, который применяется только в том случае, если этот элемент возникает в родительском элементе. Давайте использовать это, чтобы дифференцировать наш стиль ссылок в зависимости от того, появляются ли они в заголовке или теле.

 A {
  Цвет: $ цвет - вторичный;
}
.profile-header {
  {
    Размер шрифта: 16px;
    Маржа - слева: 10px;
    маржа-право: 10px;
    прокладки: 10px;
    Границы-радиус: 5px;
    Цвет: $ цветной свет;
    Фоновый цвет: $ цвет - вторичный;
  }
}

10. сделать отзывчивую сетку

Теперь давайте организуем наш контент в отзывчивый формат сетки. SASS имеет пару функций, чтобы сделать это значительно проще управлять. А также использование переменных для уточнения наших точек останова мы можем гнездиться @средства массовой информации Запросы в других стилях, что делает поведение, специфичное для размера экрана намного более читаемое.

 $ AUPPOINT: 800PX;
.profile-body {
  Дисплей: flex;
  Выровняйте элементы: растягиваться;
  Обоснование-контент: пространство вокруг;
  Маржа - топ: 32 пиката;
  Маржа - слева: 10 Вт;
  Маржа - справа: 10 Вт;
  @media экран и (максимальная ширина:
$ точка останова) {
      Flex-Направление: столбец;
  }
}
.profile-раздел {
  Фоновый цвет: $ color-highlight1;
  Цвет: $ цветное первичное;
  Маржа: 16 пикселей;
  Границы-радиус: 10px;
  Ширина: 340px;
  .profile-content {
    прокладки: 20px;
  }
  @media экран и (максимальная ширина:
$ точка останова) {
    Ширина: 100%;
  }
}

11. Введите смешины

Mixins - еще одна мощная функция SASS, которую вы можете думать как о способе определения функций стилей многоразового использования. Микс определяется один раз, может принимать параметры, а затем можно использовать в любом месте вашего SASS-кода. Одним из употреблений для этого является обработка префикса поставщика. Если мы хотим преобразование CSS для работы в более старых браузерах, это может потребовать -webkit. Например, префикс для Chrome и Safari. Давайте определим микс, который заботится об этом для нас.

12. Мистины и переменные

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

 $ Style1: (передний план: $ цветной свет,
Фон: $ цвет - вторичный);
$ style2: (передний план: $ Color-Primary,
Фон: $ color-highlight1);
$ style3: (передний план: $ Color-Primary,
Фон: $ color-highlight2);
@mixin содержание в стиле ($ передний план,
$ фон) {
  Цвет: $ передний план;
  Фон-цвет: $ фон;
} 

13. Используйте свой новый микс

 .profile-header {
  {
    @include Content-Style ($ Style1 ...);
    // ... ...
  }
}
.profile-раздел {
    @include Content-Style ($ Style2 ...);
  // ... ...
}

14. Понимать наследство

Еще одной очень мощной особенностью SASS является наследство. Прямо сейчас у нас есть два разных стиля для ссылок на нашей странице. Если мы хотим использовать общие стили по всему, а не копирующимся и вставкам CSS, почему бы нам не использовать класс заполнителя, обозначающий с «%», который можно расширить обоими, что позволяет им наследовать свои стили?

% Sciend-Shared {
  Размер шрифта: 16px;
  Маржа - слева: 10px;
  маржа-право: 10px;
  прокладки: 10px;
  Границы-радиус: 10px;
}

15. Расширение классов

Теперь мы можем продлить классический класс, чтобы определить стиль ссылки на нашем сайте. Это начинает выглядеть довольно элегантно. Мы определяем, какая ссылка обычно выглядит как раз, повторно повторно повторно повторно, и укажите цвета из палитры для каждой ссылки с использованием микина.

 .profile-header {
  {
    @extend% Screened;
    @include Content-Style ($ Style1 ...);
  }
}
{
  @extend% Screened;
  @include Content-Style ($ Style3 ...);
}

16. Измените тему

Теперь давайте посмотрим на то, насколько легко Sass делает его изменением темы нашего сайта. Текущие цвета могут быть не идеальными. Мы не можем изменять только переменные цвета, но мы также можем использовать некоторые функции SASS для процедурно генерирования цветов, которые соответствуют первичному нашему выбору.

 // _Colours.scsss
$ цветное первичное: # 2E1F27;
$ Color-Secretary: Blignen ($ Color-Primary,
25%);
$ Color-Light: Highten ($ Color-Primary,
75%);
$ color-highlight1:
облегчает (дополнение ($ color-Primary), 50%);
$ color-highlight2:
Осадки (дополнение ($ цвет - вторичный), 50%);

17. Выберите новый набор цветов

Теперь мы можем изменить всю цветовую схему для сайта, просто указав новое основное значение цвета в _colours.scss. файл. Дайте это попробовать, экспериментируя с альтернативными цветами. Мы также могли бы иметь Sass Renderize IT (но помните, что это относится к точке, на котором строит ваш сайт, а не время выполнения). Вы также можете попробовать регулировать логику, которую мы используем для получения других цветов в теме из первичного.

 $ красный: случайный (255);
$ зеленый: случайный (255);
$ синий: случайный (255);
$ цветной первичный: RGB ($ красный, $ зеленый, $ синий); 

18. Используйте библиотеки

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

 Git Clone https://github.com/josephfusco/
ingled-key.git src / sass / kned-key

19. Угловые края микс

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

 @import "Angled-key / _angled-keys.scsss";
.profile-раздел {
  @include ongled-key («наружное дно»,
«Нижняя справа», $ Color-highlight1);
  @include kneled-key («снаружи верх»,
«Верхние правые», $ Color-highlight1);
  Маржа: 120px 16px 120px 16px;
  // ... ...
}

20. Выходное форматирование

Давайте закончим, глядя на вывод SASS генерирует. Если вы отслеживаете файлы CSS, так как мы внесли изменения, вы заметите, что они остаются довольно читаемыми. Тем не менее, вы также можете иметь Sass Build Condensed CSS, который менее читабелен, но все еще готов к отправке. Вы можете сделать это, используя --стиль Флаг командной строки.

 SASS SRC / Sass /: Public / CSS / --style
сжатый 

21. Больше Sass.

Мы теперь изучили довольно много особенностей Sass, и наш сайт не выглядит слишком плохо. Надеюсь, вы начинаете посмотреть, как SASS помогает нам разработать более приемлемые стильные листы. Мы не охватывали каждую особенностью языка - есть еще много полезных функций, поставляемых с ней, и расширенные функции, такие как управляющие директивы (такие как @если , @за и @пока ) которые часто используются для создания сложных функций библиотеки. В целом, помните, что Sass является совершенно стилистическим предпочтением. Вы можете сделать все, что мы видели с чистыми CSS, если хотите, но вы обязательно должны думать о предварительной обработке, так как ваша работа становится более сложной.

Эта статья была первоначально опубликована в вопросе 282 Веб-дизайнер Отказ Купить Выпуск 282. или же Подписаться здесь Отказ

Прочитайте больше:

• 10 удивительных новых технологий CSS
• 3 блестящие новые свойства CSS, чтобы попробовать сегодня
• Большие сайты прокрутки параллакса