Как начать с Sass

Сасс является мощным инструментом, который приносит многие функции из других языков программирования в CSS - такие как функции, переменные и петли - а также приведение собственных интуитивных функций, таких как смесины, гнездование и частичные, к названию несколько.

В этом руководстве мы будем создавать социальные иконки, используя петли Sass, Mixins и функций. Мы также будем использовать мощное вложение, доступное в SASS.

• Что такое сасс?

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

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

Существует несколько способов установки и использования SASS в зависимости от вашей системы и ваших потребностей в создании инструментов. Подробнее можно найти детали здесь - Тем не менее, мы будем использовать CodePen, чтобы скомпилировать наш SASC в CSS, чтобы сохранить вещи максимально простыми.

Действительно использовать силу Sass и не попасть в беспорядок специфики и сложность, которое требуется твердое понимание CSS. Особый аромат SASS мы будем использовать, - это SCSS (Sassy CSS), означающее, что мы все равно будем использовать курчавые кронштейны {} в нашем коде SASS.

Получить учебные посылки

Чтобы загрузить пример файлов для этого учебника, перейдите к FilesiLo. Выберите бесплатные вещи и бесплатный контент рядом с руководством. Примечание. Первые пользователи должны будут зарегистрироваться для использования файловых файлов.

01. Настройте CDEPEN CSS

Первое, что нам нужно будет сделать, это Создать новую ручку И изменить некоторые из настроек по умолчанию для редактора CSS в кодепене. Мы изменим препроцессор CSS в SCSS и включите Normalize и AutoPrefixer.

02. Начните писать какой-то код

Теперь мы настроили все, мы можем начать писать какой-то код. Внутри HTML-редактора мы создадим контейнер и ряд элементов внутри, содержащих ссылку и значок для каждой из наших значков.

Используемые здесь имена будут использоваться в нашем списке SASS в качестве ссылки в CSS. Мы также будем использовать Конвенцию о именах BEM для имен наших классов.

 & lt; class = "Social__Container" & gt;
  & lt; div class = "Social__Item" & GT;
  & lt; цель = "_ пустой" href = "..."
  Class = "Социальный __in - Twitter" & gt;
  & lt; i class = "icon - Twitter" & gt; & lt; / i & gt;
  & lt; / a & gt;
  & lt; / div & gt;
  ...
& lt; / div & gt; 

03. Установите основные стили

Перемещение к редактору CSS мы начнем с включения шрифта потрясающего, установив переменную для нашего базового размера шрифта и некоторых основных стилей для страницы.

 @Import URL (http://srt.lt/w8yt8);
// Переменные
$ Base-font-size: 16px;
// Основной стайлинг
тело {
  Размер шрифта: $ Base-font-размер;
  ...
} 

04. Создать базовую функцию

Затем мы создадим базовую функцию, чтобы включить значение пикселя для значения EM, используя нашу переменную «$ Base-size».

Функции в SASS создаются с использованием «@ function», а затем имя функции и вход, используемый для выполнения функции.

Затем внутри декларации мы используем «@return» для вывода значения при использовании функции. «# {}», Окружающий расчет, используется для интерполяция Отказ

 // Функции
@ Функция px-to-em ($ pixels) {
@return # {$ Pixels / $ Base - размер шрифта} em;
} 

05. Сделайте смешины

Продолжая с нашей настройкой, мы создадим смесилы для простых мобильных-первых медиа-запросов, использующих нашу функцию PX-EM, которую мы пройдем в значение PX, чтобы вернуть значение EM.

Смесины создаются с использованием «@Mixin», а затем имя для смесина. Затем внутри декларации мы используем «@Content» для вывода кода, который мы помещаем внутри мистина при вызове его позже в нашей кодовой базе.

 @Mixin Viewport - Большой {
  @media только экран и
  (мин ширина: px-to-em (1680px)) {
  @содержание;
}}
@mixin viewport - средний {
  @media только экран и
  (мин ширина: px-to-em (1080px)) {
  @содержание;
}} 

06. Настройте список SASS

Последний шаг в нашей настройке - создать список. Списки в SASS создаются с использованием переменной; После этого точный синтаксис довольно свободен, принимая широкий спектр способы определить это Отказ

Внутри переменной мы определим имя класса, значение Unicode и цвет для каждого значка, отделяя их запятой, внутри скобок.

 $ icon-list: (
  Vimeo "\ f27d" # 1ab7ea,
  Twitter "\ f099" # 1da1f2,
  ...
  Github "\ f113" # 333,
  RSS "\ f09e" # F26522
); 

07. Показать свои значки подряд

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

 .social__item {
  Дисплей: встроенный блок;
  Маржинально-право: 0,05ЕМ;
} 

08. Создать стиль общих значков

Чтобы минимизировать количество CSS, мы производим, мы будем использовать селектор CSS3, чтобы найти все классы, начиная с «Icon» и создать для них общий стиль.

 [Класс ^ = "значок"] {
  Семья шрифтов: «Фонтавезома»;
  Говорите: нет;
  Стиль шрифта: нормальный;
  Вес шрифта: нормальный;
  Шрифт-вариант: нормальный;
  Текстообразное преобразование: нет;
  Высота линии: 1;
  -webkit-font-clanging: Антициальные;
  -Моз-OSX-шрифт-сглаживание: серого; } 

09. Стиль вверх кнопки фона

Используя тот же метод, который мы сделаем то же самое для кнопок, определяющих наши значения в «em», позволяя нам позже изменять их изменение изменений с использованием контейнера.

 [Класс ^ = "Социальная {icon"] {
  Размер шрифта: 1ЕМ; Ширина: 2em; Высота: 2em;
  Фон-цвет: # 333;
  цвет белый;
  Текстовое украшение: нет;
  Границы-радиус: 100%;
  текстовый выровнян: центр;
  Дисплей: flex;
  Выравнивание-элементы: центр;
  оправдание-контент: центр;
} 

10. @each Loop для наших значков

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

Для создания цикла в SASS мы используем «@each», а затем имена для каждого значения каждого элемента - «$ Icon», «$ Unicode» и «$ icon-background», а затем слово «в», а затем имя списка.

Внутри петли мы применим значение «$ UNICODE» в элемент Pseudo «Перед» Pseudo каждого значка, который мы создали в HTML, позволяя совместному стилю, которое мы создали ранее, чтобы позаботиться обо всех других необходимых стилях.

 @each $ значок, $ Unicode, $ icon-background
в $ icon-list {
  .icon - # {$ icon} {
  & amp; :: до {
  Содержание: $ Unicode;
  }
  }
} 

11. @each Loop для наших цветов фона

Значки теперь все работают, но у нас все еще есть запасный цвет фона. Мы добавим еще несколько кода в наш список, чтобы исправить это. Используя тот же метод, что и выше, мы выводим имя «$ Icon», но на этот раз на классах «Social __Con» и внутри, что цвет значка «$ Icon».

 @each $ значок, $ Unicode, $ icon-background
в $ icon-list {
  ...
  .social__icon - # {$ icon} {
  Фон-цвет: $ значок - фон;
  }
} 

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

Используя Mixins, которые мы создали ранее, и потому что мы создали значки, используя значения «EM», мы можем применить размер шрифта в контейнер и увеличить его, используя нашу смеси Media-Query, используя «@include», а имя микса, сопровождаемого Код мы хотим включить в медиа-запрос.

 .social__Container {
  Размер шрифта: 1ЕМ;
  @include Viewport - Medium {
  Размер шрифта: 1.5em;
  }
  @include Viewport - Большой {
  Размер шрифта: 2em;
  }} 

13. Добавьте состояния взаимодействия и встроенные функции

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

Sass имеет ряд Встроенные цветные функции Позволяя нам взять цвет фона, который мы установили в нашем списке и смешайте его черным, чтобы затемнить кнопку - при взаимодействии.

 Значок - # {$ icon} {
  Фон-цвет: $ значок - фон;
  & amp;: hover,
  & amp;: Фокус,
  & amp;: Active {
  фоновый цвет:
  Смесь (черный, $ значок - фон, 15%);
  }} 

14. Переход фона цвета

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

 [Класс ^ = "Социальные __ic"]{
  ...
  Переход: фоновый цвет
  150 мс облегчает
  ;
} 

15. Добавить дальнейшие переходные эффекты

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

 [Класс ^ = "Социальная {icon"] {
  Должность: родственник;
  Вершина: 0;
  ...
  Переход: фоновый цвет
   150 мс облегчает,
    Топ 250 мс линейных
  ; } 

16. Переместите кнопки при взаимодействии

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

 [Класс ^ = "Социальная {icon"] {
  ...
  & amp;: hover,
  & amp;: Фокус,
  & amp;: Active {
  Наброски: нет;
  Топ: -0.25ЕМ;
  }} 

17. Добавить тень

Мы также можем использовать тот же метод для создания и анимирования «Box-Shadow» - добавление более широкой глубины взаимодействия - изменение вертикальной высоты тени одновременно в качестве верхнего значения.

 Коробка-тень:
  0 0 0.25ЕМ -0.25ЕМ РГБА (0,0,0.2);
& amp;: hover,
& amp;: Фокус,
& amp;: Active {
  ...
  коробка-тень:
  0 0.5ЕМ 0,25ЕМ -0,25ЕМ РГБА (0,0,0,0.3);
} 

18. Добавьте всплывающие подсказки

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

 $ icon-list: (
  Vimeo "Vimeo" "\ f27d" # 1ab7ea,
  Twitter "Twitter" "\ f099" # 1da1f2,
  ...
  Github "Github" "\ F113" # 333,
  RSS "RSS" "\ f09e" # F26522,
); 

19. Измените цикл @each

Из-за дополнения к нашему списку нам нужно будет изменить наш цикл «@each», чтобы включить значение подсказки («$ name»). Затем мы можем выводить это имя в качестве содержимого элемента Pseudo 'перед нашими кнопками.

 @each $ значок, $ name, $ Unicode,
  $ значок фон в $ icon-list {
  ...
  .social__icon - # {$ icon} {
  ...
  & amp; :: до {
  Содержание: «# {$ name} ';
  }
  }} 

20. Стиль Перед псевдо-элементом

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

 & amp; :: до {...
  Топ: -3.5ЕМ;
  непрозрачность: 0;
  переход:
  Топ 250 мс линейных, непрозрачность 150 мс линейных 150 мс;
}
& amp;: hover, ... {...
  & amp; :: до {
  непрозрачность: 1;
  Топ: -2.5ЕМ; }
} 

21. Стиль после псевдо-элемента

Мы будем использовать CSS треугольники Чтобы создать нижнюю часть наших всплывающих подсказок - снова располагая элементом, готовым его для переходов - путем перехода непрозрачности и верхних значений в разные сроки.

Добавив задержку, мы получаем анимацию, состоящую из всплывающей подсказки, исчезающей и движущейся на месте.

 & amp; :: после {...
  Вершина: -1.9em;
  непрозрачность: 0;
  переход:
  Топ 250 мс линейных, непрозрачность 150 мс линейных 150 мс;
}
& amp;: hover, ... {...
  & amp; :: после {
  непрозрачность: 1;
  Топ: -0.9em; }
} 

Коллекция кодепена можно найти коллекцию учебных шагов здесь Отказ

Эта статья изначально появилась в журнале Web Designer News 264. Купить это здесь Отказ

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

• Что такое сасс?
• 8 функций кодепена вы не знали о
• 5 советов для супер-быстрых CSS