Урок 7. Препроцессор Sass. Миксины. Часть 2

Содержание материала:

Please verify you are a human

Access to this page has been denied because we believe you are using automation tools to browse the website.

This may happen as a result of the following:

  • Javascript is disabled or blocked by an extension (ad blockers for example)
  • Your browser does not support cookies

Please make sure that Javascript and cookies are enabled on your browser and that you are not blocking them from loading.

Reference ID: #d0a1cc80-02a7-11ea-93f6-392b42fd2a5e

SASS / SCSS

Препроцессор SASS / Урок #1 — Что такое SASS, SCSS. Установка

Видеоурок

Полезные ссылки:

Что такое SASS?

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

Прежде чем изучать SASS стоит изучить CSS, так как без знаний второго вы не сможете ощутить полезность данной технологии. Курс по изучению CSS вы можете посмотреть здесь .

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

Браузеры не воспринимают файлы, написанные на SASS, они не могут прочитать код внутри них и не могут понять что необходимо сделать. Из-за этого, весь SASS необходимо конвертировать в привычные CSS файлы.

В чем отличия SASS и SCSS?

Многие слышали про SASS и SCSS и думают что это разные технологии. На самом деле, обе технологии являются один и тем же и отличаются лишь синтаксисом написания.

На официальном сайте SASS приведен пример с использованием обеих препроцессоров.

Ниже приведён пример кода на SASS:

Ниже пример кода на SСSS:

Как видите, оба препроцессора отличаются лишь синтаксисом. В SASS все вложенные свойства выделяются отступами, при чем очень важно соблюдать отступы и их количество. SCSS более приближен к обычному CSS и все вложенные стили записываются через фигурные скобки — <> .

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

Большое задание по курсу

Вам необходимо оформить подписку на сайте, чтобы иметь доступ ко всем большим заданиям. В задание входит методика решения, а также готовый проект с ответом к заданию.
PS: подобные задания доступны при подписке от 1 месяца

Урок 7. Препроцессор Sass. Миксины. Часть 2

Если совсем коротко, препроцессоры позволяют быстро и эффективно автоматизировать рутинные ежедневные операции и ускорить Front-End разработку.

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

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

Содержание:

ЧАСТЬ 1. ТЕОРИЯ. ПРЕПРОЦЕССОР LESS
Урок 1. Что такое Less
Урок 2. Компиляция на клиенте
Урок 3. Компиляция на NodeJS
Урок 4. Компиляция с помощью Gulp
Урок 5. Переменные
Урок 6. Миксины. Часть 1
Урок 7. Миксины. Часть 2
Урок 8. Миксины. Часть 3
Урок 9. Вложенность
Урок 10. Операторы
Урок 11. Наследование
Урок 12. Некомпилируемые строки
Урок 13. Циклы
Урок 14. Импорты
Урок 15. Встроенные функции

ЧАСТЬ 2. ТЕОРИЯ. ПРЕПРОЦЕССОР SASS
Урок 1. Что такое SASS и SCSS
Урок 2. Настройка окружения для компиляции
Урок 3. Переменные
Урок 4. Некомпилируемые файлы настройки
Урок 5. Миксины. Часть 1
Урок 6. Миксины. Часть 2
Урок 7. Миксины. Часть 3
Урок 8. Импорты
Урок 9. Медиа запросы
Урок 10. Операторы
Урок 11. Встроенные функции
Урок 12. Создание своих функций
Урок 13. Наследование стилей
Урок 14. Условные директивы if else
Урок 15. Циклы

ЧАСТЬ 3. ТЕОРИЯ. CSS МЕТОДОЛОГИИ
Урок 1. Что такое css методологии
Урок 2. БЭМ
Урок 3. Наследование

ЧАСТЬ 4. ПРАКТИКА. ПРЕПРОЦЕССОР SASS
Урок 1. Вводный
Урок 2. Настройка рабочего окружения
Урок 3. Создание миксинов и параметров проекта
Урок 4. Блок навигации
Урок 5. Блок хедера
Урок 6. Блок авторизации
Урок 7. Блок покупки. Часть 1
Урок 8. Блок покупки. Часть 2
Урок 9. Блок покупки. Часть 3
Урок 10. Блок пакетов
Урок 11. Блок о нас
Урок 12. Блок слайдера
Урок 13. Блок преимущества
Урок 14. Блок подвала
Урок 15. Функционал слайдера и продакшн сборка

ЧАСТЬ 5. ПРАКТИКА. ПРЕПРОЦЕССОР LESS
Урок 1. Вводный
Урок 2. Настройка рабочего окружения (gulp)
Урок 3. Создание миксинов и параметров проекта
Урок 4. Блок навигации
Урок 5. Блок хедера
Урок 6. Блок функций
Урок 7. Блок преимуществ
Урок 8. Блок решений
Урок 9. Блок автора
Урок 10. Блок шагов
Урок 11. Блок подвала
Урок 12. Финальная сборка

БОНУС 1. ПРЕМИУМ КУРС ПО NODEJS: ОСНОВЫ
БОНУС 2. ПРЕМИУМ КУРС ПО GULP: ОСНОВЫ

Информация о видео
Название: Препроцессоры SASS и LESS
Автор: Владилен Минин
Год выхода: 2020
Жанр: Видеокурс
Язык: Русский
Выпущено: Россия
Продолжительность: n/a

Файл
Формат: HTML, MP4 (+ доп. материалы)
Видео: AVC, 1280×720,

156 Kbps
Аудио: AAC, 110 Kbps, 48.0 KHz
Размер: 2.08 Gb

Изучаем SASS: руководство для новичка

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

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

Вы удивитесь, когда узнаете, что есть способы писать CSS-код без множественных повторений одних и тех же свойств. В этой статье будет рассказано об одном из них.

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

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

Доступны два основных варианта: SASS и LESS . В данной статье, я расскажу о SASS .

Недостатки CSS

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

Давайте рассмотрим слабые места использования « чистого » CSS:

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

Преимущества использования препроцессоров

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

Взгляните теперь на список преимуществ использования препроцессоров:

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

Что такое SASS?

SASS расшифровывается как Syntactically Awesome Style Sheets – если переводить дословно, то это звучит как: « Синтаксически потрясающие таблицы стилей ».

Эта технология была придумана и воплощена Хэмптоном Катлином ( Hampton Catlin ). SASS манипулирует CSS-правилами, используя переменные, так называемые миксины ( mixins ), наследование и вложенность.

Исходные и скомпилированные файлы имеют расширения .sass и .scss , соответственно. Исходники переводятся в хорошо отформатированный CSS-код с помощью командной строки или веб-плагина.

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

Формат .sass против .scss

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

CSS-код

Для исходного примера я использовал тег header и присвоил нулевое значение свойствам margin и padding , а затем прописал белый цвет для свойства color :

Формат .scss (новый синтаксис SASS)

Чтобы написать приведенный выше пример в формате .scss , мы будем использовать переменную $color и дадим ей шестнадцатеричное значение: #fff , которое соответствует белому цвету.

Далее, вместо того, чтобы по правилам CSS присвоить свойству color значение #fff , мы используем переменную $color , которую определим в начале кода:

Формат .sass (старый синтаксис SASS)

Для .sass мы имеем такую же переменную и значение, как и для .scss , но точки с запятой и фигурные скобки не используются.

Заметьте, что синтаксис зависим от абзацев. Это старый формат SASS :

Вот что вам понадобится для успешного завершения практики по данной статье:

  • Инсталлятор Ruby;
  • Текстовый редактор;
  • Время и терпение.

Установка Ruby

Чтобы опробовать SASS , вам нужно скачать Ruby . Запустите программу установки и, выбрав в появившемся окне подходящий язык интерфейса, нажмите OK :

Затем поставьте отметку о том, что вы согласны с условиями лицензии и нажмите « Далее ».

После этого, произведите установку в желаемое место на жестком диске и убедитесь, что выбрана радио-кнопка « Add Ruby executables to your PATH ». Нажмите кнопку « Install » и установка завершена:

Проверка правильности запуска Ruby

Теперь, у вас на компьютере установлен Ruby и пришло время проверить его работоспособность. Откройте командную строку и введите ruby -v .

Команда должна возвратить текущую версию и дату установленного Ruby. Если возвращена ошибка, то значит Ruby был установлен некорректно, либо переменные окружения Ruby не были зарегистрированы:

Установка SASS

Чтобы установить SASS , откройте командную строку и введите gem install sass , после этого вы должны получить сообщение об успешном окончании установки:

Подготовка необходимых файлов

Перед тем, как вплотную заняться копанием в недрах SASS , нам нужно подготовить некоторые необходимые файлы.

Создайте новую папку (для данной статьи, я расположил эту папку на своем рабочем столе) и назовите её, например, SASS или как вам будет угодно. Внутри папки SASS , создайте HTML-файл, дав ему имя index.html .

Поместите в него следующий код:

Теперь, для файла SASS , создайте пустой файл в предпочитаемом вами текстовом редакторе и назовите его style.scss .

Если вы точно следовали всем шагам, то на данный момент у вас будет следующая структура файлов:

Конвертация SASS-кода в CSS

Чтобы преобразовать код SASS в CSS, мы будем использовать команду – watch , которая выполнит компиляцию.

Также, эта команда просканирует папки на наличие изменений. Давайте попробуем сконвертировать SASS -файл в CSS-файл. Но сначала нам нужно расположить код в файле ourstyle.scss , чтобы убедиться, что все работает.

Скопируйте и вставьте следующий SASS -код в файл stye.scss , созданный вами в папке SASS :

Далее, откройте командную строку и перейдите в директорию, где вы расположили ваши файлы. В моем случае это папка на рабочем столе, поэтому я ввожу cd « Desktop «:

Теперь, находясь в папке рабочего стола, введите sass –watch Sass:Sass :

Используя команду – watch , сконвертируем все .scss -файлы в папке SASS . Также, файлы будут просканированы на наличие в них изменений. Заметьте, что в команде два слова SASS , разделенные двоеточием.

Первое слово представляет текущее положение файла .scss , а второе – расположение выходного файла. Убедитесь, что вы подключили сконвертированный CSS-файл к вашей HTML-странице:

Использование переменных

Переменные SASS объявляются с предваряющим их название символом $ и записываются аналогично CSS-свойствам. С помощью SASS , вы можете определять переменные для таких стилей, как font size , margin , padding и так далее.

Использование переменных дает вам возможность повторного использования заданных ранее значений.

В SASS существует шесть разных типов переменных:

  • Строковые (например, $myString: “здесь ваш текст”;);
  • Числовые (например, $myNum: 10px;);
  • Цветовые (например, $myColor: white;);
  • Логические (например, $myBool: true;);
  • Списковые (например, $myItemList: 1px sol >Тип null – значение отсутствует (например, $myVar: null;).

Давайте опробуем эти типы на практике. Откройте файл style.scss и добавьте в него следующий код:

Запустив этот код в браузере, вы получите следующее:

Вложенность

SASS также позволяет определять вложенные стили. Это позволит вам писать очень легко читающиеся стили.

В качестве примера, рассмотрим следующий код:

Для SASS , код будет выглядеть следующим образом:

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

Если вы запустите этот код в браузере, то увидите следующую картину:

Миксины (Mixins)

Миксины позволяют вам определять общие свойства, а затем использовать их повторно, то есть это реализация наследования. Миксины определяются с помощью директивы @mixin и включают в себя блок кода, который затем можно использовать с помощью директивы @include .

Давайте попрактикуемся. Скопируйте приведенный ниже код в свой файл style.scss :

Как вы можете видеть, мы использовали директиву @mixins , чтобы создать стиль для свойства border , а затем включили его в стиль идентификатора container с помощью директивы @include .

Топ-пост этого месяца:  Как сделать горизонтальное или вертикальное выпадающее меню для сайта на основе CSS и Html в онлайн

Если вы запустите данный код в браузере, то увидите следующее:

Операторы

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

Давайте посмотрим, как это работает. Откройте свой файл style.scss и вставьте в него код, представленный ниже:

Как видите, мы выполнили некоторые математические вычисления, добавив 30px к значению свойства padding , а также увеличили толщину border на 5px.

Если вы запустите этот пример в браузере, то увидите следующую картину:

Функции

SASS также имеет в своем арсенале различные функции. Отличным примером являются цветовые функции.

Взгляните на их список ниже:

  • darken(color, amount);
  • lighten(color, amount);
  • saturate(color, amount);
  • desaturate(color, amount);
  • alpha(color).

Для того чтобы подробно изучить, как работать с функциями, обратитесь к документации SASS .

А сейчас, мы рассмотрим несколько практических примеров с использованием перечисленных выше функций.

Откройте свой файл style.scss и вставьте туда следующий код:

Результатом этого примера будет затемнение цвета в переменной $myBackground на 20% с помощью соответствующей функции. Далее, в этом же примере, заголовки H1 и H2 осветляются на 40% соответствующей функцией.

После запуска данного примера в браузере вы увидите примерно следующую картину:

Настройка форматирования скомпилированных стилей в SASS

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

Используя опцию -style , мы можем выполнить форматирование скомпилированного CSS-кода. Далее описывается имеющиеся в SASS стили форматирования.

Вложенный формат (Nested Format)

Вложенный стиль это формат по умолчанию. Он задает отступы для всех стилей в выходном CSS-файле.

Чтобы увидеть его в действии, скопируйте и вставьте код, приведенный ниже в свой файл style.scss , а затем откройте командную строку и убедившись, что вы внутри директории SASS , введите SASS –update style.scss .

Эта команда обновит форматирование для уже скомпилированных CSS-стилей через командную строку:

После этого откройте файл style.css и обратите внимание на появившиеся отступы:

Расширенный формат (Expanded Format)

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

Давайте посмотрим это в действии.

Используя код, приведенный выше, откройте командную строку и введите sass –update style.scss –style expanded . Как можно заметить, мы добавили опцию –style , использующуюся для перекомпиляции CSS-файла в другое форматирование:

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

Каждому свойству выделена отдельная строка, а фигурные скобки раскрыты так, чтобы визуально выделять помещенные в них свойства:

Компактный формат (Compact Format)

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

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

Чтобы увидеть этот формат в действии, используя предыдущий пример, откройте командную строку и наберите команду sass –update style.scss –style compact :

После компиляции, вы увидите, что код стал очень компактным, а элементы плотно расположены друг относительно друга:

Компрессированный формат (Compressed Format)

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

Чтобы увидеть, как выглядит этот формат, в командной строке наберите sass –update style.scss –style compressed :

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

Заключение

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

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

Это поможет вам очень быстро создавать профессиональные сайты. Надеюсь, статья была вам полезна!

Данная публикация представляет собой перевод статьи « Learning SASS: A Beginner’s Guide to SASS » , подготовленной дружной командой проекта Интернет-технологии.ру

Sass для самых маленьких — подробное руководство

Это подробное руководство по препроцессору Sass для начинающих. Здесь мы познакомимся с препроцессором Sass, его преимуществами, синтаксисом и рассмотрим возможности использования на примерах.

Все примеры и настроенный проект данного урока вы можете скачать с нашего сайта

Sass — это один из наиболее развитых и стабильных CSS препроцессоров, а также один из самых популярных препроцессоров у профессионалов.

Преимущества Sass

  • Совместимость с различными версиями CSS, благодаря которой вы можете использовать любые CSS библиотеки в вашем проекте;
  • Огромное количество разнообразных функций на любой случай жизни. Таким богатым функционалом могут похвастаться немногие CSS препроцессоры;
  • Sass — это один из самых старых CSS препроцессоров, вобравший большой опыт за долгие годы своего существования;
  • Замечательная возможность использовать Sass фреймворки, упрощающие жизнь разработчику. Один из таких фреймворков — Bourbon, который мы используем в некоторых выпусках Джедая верстки при написании Sass;
  • Синтаксис. Вы можете выбрать один из двух синтаксисов, который вам ближе — упрощенный (SASS) и развернутый CSS-подобный (SCSS).

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

Настройка окружения

В качестве окружения для работы с Sass в этом уроке, как и в других наших уроках, мы будем использовать версию Sass для таск-менеджера Gulp (gulp-sass). Для использования оригинальной Ruby версии или компиляции Sass посредством специального ПО, вы можете ознакомиться с инструкциями на оф. сайте. Данный урок носит преимущественно практический характер, поэтому останавливаться на возможных вариантах подключения к проекту не будем, подключим Sass наиболее популярным способом, используя Gulp.

Убедитесь, что у вас установлена последняя версия Node.js и Gulp. Если Node.js не установлен, скачайте его и установите. После установки Node.js установите gulp командой «npm i -g gulp» (Windows) или «sudo npm i -g gulp» (Linux, OS X). Почитать: Подробное руководство Gulp.

В папке вашего проекта выполните команду npm init и заполните пошагово информацию о вашем новом проекте. Пример, также, есть на странице руководства Gulp.

Далее установим в проект пакеты gulp и gulp-sass командой:

Далее в папке проекта создадим gulpfile.js следующего содержания:

Обратите внимание на строку 6 — здесь мы используем один из стилей вывода в результирующий файл: nested — вложенный, по умолчанию; expanded — развернутый; compact — компактный, когда селектор и его свойства в фигурных скобках выводятся в одну строку; compressed — сжатый. Кроме того, благодаря обработке .on(‘error’, sass.logError), если возникнет ошибка, нам не придется перезагружать команду выполенния Gulpfile и мы будем видеть, в какой строке Sass файла у нас ошибка. В примерах я буду использовать стиль вывода expanded для наглядности.

У вас должна быть следующая структура проекта в вашей файловой системе:

    myproject/

      css/

        common.css

      sass/

        common.sass

      node_modules/gulpfile.jspackage.json

Запускаем выполнение Gulpfile командой gulp в терминале папки проекта.

Здесь мы берем все Sass файлы из директории sass/ вашего проекта и выгружаем готовый CSS результат в папку css/. Кроме того, здесь мы устанавливаем наблюдение watch за изменениями в Sass файлах и автоматическую компиляцию в CSS, если такие изменения имеют место быть. Результирующий css файл подключается в верстку.

Если вам что-то не понятно по настройке Gulp пакетов в данном примере, прочтите руководство Gulp.

После того, как наше окружение настроено и Sass успешно преобразуется в CSS при сохнанении *.sass файлов в директории sass/, можно спокойно продолжать обучение и выполнять примеры, которые мы будем сегодня разбирать, на практике.

Синтаксис Sass

Есть 2 варианта написания Sass, 2 синтаксиса: SASS и SCSS. Самый старый вариант написания Sass — это синтаксис отступов. Именно этот вариант написания мы будем использовать в нашем уроке. Расширение файлов для такого синтаксиса — *.sass. Второй вариант — это синтаксис, расширяющий синтаксис CSS, Sassy CSS. SCSS пишется как обычный CSS, но расширен дополнительными возможностями Sass. Расширение файлов с SCSS синтаксисом — *.scss.

Очень важно! Синтаксис отступов требует очень четкого соблюдения отступов у вложенных свойств и если у вас возникают ошибки при запуске Gulp или неявные ошибки без указания строки в консоли — скорее всего, ошибка именно в неправильных отступах. Еще важная деталь — если у вас в качестве отступов используются табы, компилятор выдаст ошибку при попытке конвертировать Sass, в котором помимо табов, также, исвользуются пробелы в качестве отступов. Либо вы используете только табы, либо только пробелы.

SASS и SCSS синтаксис:

SASS — синтаксис отступов SCSS — синтаксис расширения

Кроме базовых правил написания (фигурные скобки, точка с запятой в конце строк), SASS и SCSS различаются также написанием некоторых функций. Так что будьте внимательны при использовании каких-либо примеров из интернета, проверяйте, какой именно синтаксис используется. Если довольно большой пример из интернета выполнен в SCSS стиле, а ваш проект написан в SASS, вы можете его импортировать в ваш основной файл, не меняя синтаксис и расширение файла посредством директивы @import, например, если вы скачали файл carousel.scss, то можете подключить его в ваш main.sass строкой @import «carousel». Также можно поступить в обратной ситуации, когда необходимо импортировать *.sass файлы в файл main.scss. В нашем примере с Гитхаба, мы импортируем все _x.x.sass файлы в один common.sass, где x.x — это номер заголовка примера из данной статьи.

Мы будем использовать синтаксис отступов.

1. Расширение возможностей CSS с помощью Sass

1.1 Правила вложения

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

Sass CSS — готовый результат
Sass CSS — готовый результат

1.2 Привязка к родительскому селектору

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

Sass CSS — готовый результат
Sass CSS — готовый результат

Обратите внимание на правило body.firefox &, которое позволяет нам получить новую цепочку от любого элемента до текущего, если установить в конце &.

Кроме того, привязку к родителю можно использовать для создания составных селекторов:

Sass CSS — готовый результат

1.3 Вложенные свойства

Для удобства, вы можете разбивать суффикс пространства имен свойства на вложения. Например, margin-top, margin-bottom, margin-left, margin-right имеют общую основу margin и могут быть разбиты на вложения следующим образом:

Sass CSS — готовый результат

1.4 Селекторы-шаблоны

Иногда возникает ситуация, когда несколько элементов на странице используют одинаковую CSS базу, одинаковый набор свойств, характерный только для них. Данные базовые CSS правила можно оформить в виде селектора-шаблона для использования в нескольких местах Sass. Селекторы-шаблоны выводятся посредством директивы @extend.

Sass CSS — готовый результат

2. SassScript

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

2.1 Переменные в Sass

Это действительно замечательная возможность — определять переменные, которые можно использовать в любом месте вашего Sass файла. Цвета, дефолтные значения, единицы, все это можно взять в переменную и использовать в дальнейшем. Переменная определяется так: $название: значение.

Sass CSS — готовый результат

2.2 Операции с числами и строками + интерполяция

Sass дает возможность использовать стандартные арифметические операции над числами, такие как сложение (+), вычитание (-), деление (/) и остаток от деления по модулю (%). Операторы сравнения ( , =, ==, !=) также поддерживаются для чисел.

Кроме того, в Sass есть возможность конкатенировать (соединять) строки.

Sass CSS — готовый результат

Как видим из примера $summ: 10 + 20 / 2, соблюдается приоритет в выполнении арифметических операций — сначала деление, потом сложение. Для определения порядка действий, можно использовать круглые скобки, как в математике. Обратите внимание, что при сложении 12px + 8px, мы получим 20px.

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

Интерполяция — это получение нового значения, используя другие.

Чаще всего интерполяция в Sass используется для получения нового значения переменной, благодаря «интегрированию» в значение другой переменной, посредством конструкции #<>, например:

Sass CSS — готовый результат

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

2.3 Операции с цветами

Цвета в Sass можно складывать, вычетать, делить и умножать. Все арифметические операции выполняются для каждого цвета отдельно: красного, зеленого и синего.

Sass CSS — готовый результат

Обратите внимание, что при сложении rgba цветов, последний параметр непрозрачности 0.75 не должен отличаться от других в выражении, иначе произойдет ошибка сложения. Вместо этого, можно регулировать альфа-канал rgba, используя opacify и transparentize или управлять непрозрачностью HEX цвета, посредством функции rgba.

Sass CSS — готовый результат

3. Директивы и правила

3.1 @import

Вы можете импортировать в ваш Sass файл sass, scss и css файлы с помощью директивы @import, при этом все миксины и переменные будут работать в основном файле, в который происходит импорт.

@import сработает как обычный CSS @import, если:

  • в пути к файлу присутствует http://;
  • файл вызывается через url();
  • или в импорте присутствуют медиапараметры.

Для того, чтобы другой файл был полноценно импортирован в основной Sass файл, необходимо, чтобы расширение файла было *.sass, *.scss или *.css.

Давайте рассмотрим некоторые примеры.

Следующие файлы импортированы не будут:

Sass CSS — готовый результат

Следующие файлы будут импортированы:

Sass CSS — готовый результат

Внимание! В новых версиях gulp-sass для импорта CSS файлов в Sass необходимо указывать расширение .css

Возможен импорт нескольких файлов, через запятую: @import «header», «media».

Файлы, которые начинаются с нижнего подчеркивания, называются фрагменты и при импорте не требуют указания подчеркивания и расширения. Например, файл _header.sass можно импортировать так: @import «header».

Обратите внимание, что импорт происходит в том месте, где вы указываете директиву @import. Соответственно, есть возможность делать вложенный импорт в том месте, где это необходимо:

3.2 @at-root

Директива @at-root поднимает содержимые в ней правила в корень, отменяя цепочку от родителя. Тут все просто:

Sass CSS — готовый результат

Мы рассмотрели не все директивы, которые есть в Sass, а только самые используемые на практике. Если вас интересует более глубокое изучение Sass директив, обратитесь к документации.

4. Выражения

Sass поддерживает использование выражений и функций для различных условий, реализации циклов и т.д.

4.1 Директива @if()

Директива @if() позволяет осуществить выполнение SassScript с определенными условиями и имеет следующий синтаксис:

Sass CSS — готовый результат

4.2 Директива @for

@for выводит блок со стилями определенное количество раз. Во время выполнения можно задать переменную-счетчик.

Sass CSS — готовый результат

Вы можете указать through вместо to, если требуется пройтись от 1 до 11 включительно, а не только до 10, как в примере.

4.3 Директива @each

Если требуется пройтись по списку значений, а не просто чисел, можно использовать директиву @each:

Sass CSS — готовый результат

4.4 Директива @while

@while циклично выводит блоки стилей, пока выражение является true.

Sass CSS — готовый результат

5. Миксины

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

Миксин объявляется директивой @mixin, после объявления должно быть указано имя миксина. Вызывается миксин директивой @include, которая принимает имя миксина и передаваемые аргументы, если такие имеют место быть.

Sass CSS — готовый результат

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

Сразу отвечу на вопрос — как работать с Sass стилями на готовом сайте, неужели нужно править готовый CSS и заливать по FTP? Нет, так делать нельзя. Вы должны иметь локальную копию ваших Sass стилей или даже целого сайта и после окончания работы деплоить (выгружать) по FTP готовые стили. Для этого, вы можете использовать Gulp пакет vinyl-ftp. Или настроить Sass окружение на вашем сервере для компиляции загружаемых по FTP/sFTP файлов.

Премиум уроки от WebDesign Master

Создание контентного сайта на Jekyll от А до Я

Создание современного интернет-магазина от А до Я

Я — фрилансер! — Руководство успешного фрилансера

миксины — Самое интересное в блогах

Препроцессоры SASS и LESS (2020) Видеокурс » NetFact.Ru: Скачать бесплатно – Популярная Интернет Библиотека

Если совсем коротко, препроцессоры позволяют быстро и эффективно автоматизировать рутинные ежедневные операции и ускорить Front-End разработку.

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

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

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

-Препроцессоры не просто позволяют писать чистый оптимизированный код быстро и в короткие сроки…

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

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

ЧАСТЬ 1. ТЕОРИЯ. ПРЕПРОЦЕССОР LESS

Урок 1. Что такое Less

Урок 2. Компиляция на клиенте

Урок 3. Компиляция на NodeJS

Урок 4. Компиляция с помощью Gulp

Урок 5. Переменные

Урок 6. Миксины. Часть 1

Урок 7. Миксины. Часть 2

Урок 8. Миксины. Часть 3

Урок 9. Вложенность

Урок 10. Операторы

Урок 11. Наследование

Урок 12. Некомпилируемые строки

Урок 14. Импорты

Урок 15. Встроенные функции

ЧАСТЬ 2. ТЕОРИЯ. ПРЕПРОЦЕССОР SASS

Урок 1. Что такое SASS и SCSS

Урок 2. Настройка окружения для компиляции

Урок 3. Переменные

Урок 4. Некомпилируемые файлы настройки

Урок 5. Миксины. Часть 1

Урок 6. Миксины. Часть 2

Урок 7. Миксины. Часть 3

Урок 9. Медиа запросы

Урок 10. Операторы

Урок 11. Встроенные функции

Урок 12. Создание своих функций

Урок 13. Наследование стилей

Урок 14. Условные директивы if else

ЧАСТЬ 3. ТЕОРИЯ. CSS МЕТОДОЛОГИИ

Урок 1. Что такое css методологии

Урок 3. Наследование

ЧАСТЬ 4. ПРАКТИКА. ПРЕПРОЦЕССОР SASS

Урок 2. Настройка рабочего окружения

Урок 3. Создание миксинов и параметров проекта

Урок 4. Блок навигации

Урок 5. Блок хедера

Урок 6. Блок авторизации

Урок 7. Блок покупки. Часть 1

Урок 8. Блок покупки. Часть 2

Урок 9. Блок покупки. Часть 3

Урок 10. Блок пакетов

Урок 11. Блок о нас

Урок 12. Блок слайдера

Урок 13. Блок преимущества

Урок 14. Блок подвала

Урок 15. Функционал слайдера и продакшн сборка

ЧАСТЬ 5. ПРАКТИКА. ПРЕПРОЦЕССОР LESS

Урок 2. Настройка рабочего окружения (gulp)

Урок 3. Создание миксинов и параметров проекта

Урок 4. Блок навигации

Урок 5. Блок хедера

Урок 6. Блок функций

Урок 7. Блок преимуществ

Урок 8. Блок решений

Урок 9. Блок автора

Урок 10. Блок шагов

Урок 11. Блок подвала

Урок 12. Финальная сборка

БОНУС 1. ПРЕМИУМ КУРС ПО NODEJS: ОСНОВЫ

БОНУС 2. ПРЕМИУМ КУРС ПО GULP: ОСНОВЫ

Информация о видео

Название: Препроцессоры SASS и LESS

Автор: Владилен Минин

Год выхода: 2020

Формат: HTML, MP4 (+ доп. материалы)

Видеокурс «Препроцессоры SASS и LESS. Автоматизация Front-end разработки». (Владилен Минин — Webformyself)

Автор(ы): Владилен Минин

Это уникальный видеокурс на рынке Рунета, который во всех подробностях дает теоретическое и практическое освещение всех возможностей двух наиболее популярных и востребованных на рынке CSS-препроцессоров SASS и LESS в рамках единого курса. Помимо ПОЛНОГО ОСВЕЩЕНИЯ теоретических основ и практики работы непосредственно с самими препроцессорами SASS и LESS, а также изучения методологии CSS, в курсе в мельчайших подробностях разобрана практика работы с такими прогрессивными популярными технологиями как NODE.JS, NPM и GULP.

Смотреть видео:

Препроцессоры Sass и Less. Автоматизация и упрощение Front-end разработки. (Владилен Минин — Webformyself)

  • БЛОК 1. Теория. Препроцессор LESS

В данном блоке будет подробным образом разобрана теоретическая часть препроцессора Less. Начнем с самых основ: разберем, что такое Less, и где он используется. У препроцессора Less есть множество возможностей применения и компиляции, каждая из которых будет рассмотрена в рамках данного курса. Мы разберемся в самой простой из них: компиляции без написания единой строчки кода, создадим свой собственный компилятор с помощью платформы NodeJS и рассмотрим возможности компиляции с помощью таск-раннера Gulp с использованием возможностей PostCSS. Мы с вами будем знакомиться со всеми возможностями данного языка. Помимо синтаксиса, будут разобраны самые важные конструкции, такие как: переменные, вложенные стили, наследование, создание функций, циклы и многое другое.

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

Рассмотрим первый способ, который позволит нам скомпилировать данный язык программирования. Это самый простой способ, который не требует от нас ничего в плане написания кода, и будет делать все средствами, которые заложены в библиотеке Less. Вся компиляция будет происходить в файле index.html»

Рассмотрим следующий способ компиляции языка Less — с помощью платформы NodeJS. В ходе урока мы напишем свой собственный компилятор, который будет считывать Less файлы и генерировать на их основе .css файлы»

  • Урок 4. Компиляция с помощью Gulp.

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

В этом уроке вы узнаете все про переменные в языке Less. Начнем мы с синтаксиса и узнаем, какие значения можно задавать переменным. Также мы поговорим про область видимости переменных, которая присутствует и в данном языке, про ссылки на другие переменные и многое другое»

Вы узнаете, каким образом создавать миксины в языке Less, как сделать компилируемые миксины и некомпилируемые, которые будут использоваться только в рамках разработки и выполнять действие функций. А также вы узнаете, как работает флаг !important для миксинов, и в чем его особенность»

Узнаете, как создавать миксины-функции, которые работают с входными параметрами. Поймете, как можно перегружать функции, подобно другим языкам программирования, в зависимости от разного количества параметров. Узнаете, как передавать параметры по умолчанию, и что такое ключевое слово Arguments, по аналогии с JavaScript»

Вы узнаете, как создавать миксины, которые генерируют параметры или другие миксины. Поговорим про их область видимости и способы применения»

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

В данном уроке вы узнаете, как с помощью введения операторов в язык стилей препроцессор Less упростил жизнь для разработки дизайнов»

Из этого видео вы поймете, что такое функция Extend, как ее использовать, ее синтаксис, и увидите, как с помощью различных параметров — селекторов и флагов, можно управлять наследованием «

В языке CSS порой появляются новые возможности, которые иногда конфликтуют с синтаксисом препроцессоров. Для того чтобы результат был ожидаемым, вне зависимости от нововведений, в препроцессоре Less есть важная функция, которая позволяет не обрабатывать определенные строки, с ней вы и познакомитесь в данном уроке»

Из этого урока, вы узнаете, с помощью каких конструкций можно создать цикл в языке стилей, зачем они нужны, и как их применить на практике — например, для генерации большого количества классов для сетки вашего сайта с помощью пары строк кода»

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

Познакомитесь с некоторыми встроенными функциями в язык Less, которые расширяют стандартные возможности CSS. Например, вы узнаете, как можно сделать цвет темнее или светлее, не меняя его, а используя лишь встроенные функции»

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

  • БЛОК 2. Теория. Препроцессор SASS

В данном блоке будет подробнейшим образом рассмотрена теоретическая составляющая препроцессора SASS и SCSS. Вы узнаете, как и где его использовать, а также, как настроить рабочее окружение, чтобы с ним работать. В первую очередь, мы разберем два основных понятия данного препроцессора — SASS и SCSS. Вы узнаете, что это такое, почему эти две аббревиатуры часто идут вместе, и в чем их отличие. Далее мы рассмотрим, как можно настроить максимально эффективное рабочее окружение для компиляции данного препроцессора — с помощью таск раннера Gulp. В него будут входить разные возможности PostCSS для обработки стилей после компиляции, сервер автоматического применения стилей без перезагрузки окна браузера, минификация, исходные карты и т. д. После прохождения данного блока вы смело сможете использовать SASS и SCSS при разработке ваших проектов, используя максимально возможный функционал данного языка. Мы детально разберем каждую из возможностей языка, начиная с синтаксиса. Аналогично будут разобраны следующие возможности: переменные и их область видимости, функции, миксины, медиа запросы, генерация классов через 3 вида циклов и многое другое.

  • Урок 1. Что такое SASS и SCSS.

В данном уроке вы узнаете, что такое препроцессор SASS. Вы узнаете, где он используется, зачем он нужен. Также вы увидите, в чем отличие SASS от SCSS, и какой синтаксис лучше использовать»

  • Урок 2. Настройка окружения для компиляции.

В этом уроке вы увидите, как с помощью такого инструмента как Gulp, настроить рабочее окружение для компиляции препроцессора SASS. Вы узнаете, какие шаги стоит реализовать при настройке рабочего окружения. Поймете, какие плагины от PostCSS можно использовать для более эффективного написания кода «

В этом уроке вы познакомитесь с синтаксисом SCSS и конкретно узнаете, как создавать переменные в рамках данного языка. Также вы узнаете, какие значения могут принимать переменные в SASS. И еще мы поговорим про область видимости переменных, и какие проблемы могут возникнуть с ней»

  • Урок 4. Некомпилируемые файлы настройки.

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

  • Урок 5. Некомпилируемые файлы настройки.

В данном уроке мы начнем знакомство с одной из самых главных функций языка SASS — миксинами. Вы узнаете, с помощью каких конструкций можно создавать миксины, что это такое, и зачем они нужны»

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

В этом уроке мы закончим изучение миксинов в языке SASS. Из этого урока вы узнаете, что такое ключевое слово Content, и как удобно можно с ним работать совместно с миксинами»

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

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

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

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

  • Урок 12. Создание своих функций.

Из данного урока вы узнаете, как можно создавать свои собственные функции в SASS, и чем они отличаются от миксинов. Вы увидите, где и как их можно использовать, а также узнаете еще несколько ключевых слов, которые нужны для работы с данным функционалом в языке SASS»

Из данного урока вы узнаете про еще одно ключевое слово в препроцессоре SASS —Extend. Вы поймете, зачем данная директива нужна, как она может пригодиться в реальном приложении. Также вы увидите особенности синтаксиса данной конструкции, и с помощью каких параметров можно регулировать наследование»

  • Урок 14. Условные директивы If Else.

В данном уроке мы познакомимся еще с одним интересным и очень важным функционалом языка SASS — условными директивами If и Else. Вы увидите, как их использовать в коде, зачем они нужны, за что они отвечают, и как их можно применить в реальном проекте»

В данном уроке вы познакомитесь еще с одним важным функционалом препроцессора SASS — циклами. Вы узнаете, как их можно применить в рамках языка стилей, увидите генерацию грид-сетки, а также генерацию специальных классов со специальными идентификаторами»

► После прохождения данного блока вы смело сможете использовать SASS и SCSS при разработке ваших проектов, используя максимально возможный функционал данного языка. Мы детально разберем каждую из возможностей языка, начиная с синтаксиса. Аналогично будут разобраны следующие возможности: переменные и их область видимости, функции, миксины, медиа запросы, генерация классов через 3 вида циклов и многое другое.

Будут рассмотрены 2 основных способа организации CSS кода: БЭМ и наследование. Вы увидите на простых идентичных примерах, как применять ту или иную инструкцию, и в чем их отличие.

  • Урок 1. Что такое CSS методологии.

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

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

В этом уроке вы узнаете, что такое CSS методология наследование. Вы познакомитесь с основными ее принципами, и на простом, но наглядном примере поймете, каким образом ее применять на практике»

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

  • БЛОК 4. Практика. Препроцессор SASS

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

В данном обзорном уроке вы узнаете план на данный блок, с помощью чего мы будем верстать макет, увидите сам макет, с помощью какой методологии будет проходить практика и узнаете одну особенность данного блока»

  • Урок 2. Настройка рабочего окружения.

В данном уроке вы увидите, как профессионально настроить Gulp для осуществления максимально эффективной работы над версткой макета на препроцессоре»

  • Урок 3. Создание миксинов и параметров проекта.

В данном уроке вы увидите первые шаги, которые необходимо предпринять для начала работы над макетом уже непосредственно в SCSS коде»

В этом уроке нами будет сверстан блок навигации, с использованием методологии БЭМ и такого CSS инструмента, как Flexbox. Также вы узнаете, что такое vh, и как с помощью данной величины сделать блок на всю высоту экрана без JavaScript»

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

В этом уроке мы сверстаем маленький блок для авторизации пользователей»

В данном уроке мы начнем верстать самый объемный блок макета — блок покупок, или блок выбора домена. В первой части нам предстоит задать общую структуру и сделать первую часть блока — инпут»

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

В этом заключительном уроке по блоку покупок мы с вами сверстаем выпадающий список, который будет появляться только при наведении мыши без использования JavaScript. Также мы установим библиотеку для шрифтов — Font Awesome»

В этом уроке вы увидите, как можно сверстать блок пакетов или тарифов. В данном уроке мы создадим новый миксин, который позволит очень сильно сократить код в зависимости от модификатора на элементе»

В данном уроке будет сверстан блок макета «О нас»

В данном уроке мы сверстаем слайдер и добавим 3 слайда, но пока без функционала»

В данном уроке мы сверстаем довольно простой блок преимуществ, в котором снова будем использовать иконки Font Awesome»

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

  • Урок 15. Функционал слайдера и продакшн сборка.

В этом уроке мы с вами сделаем продакшн сборку, то есть удалим всю ненужную информацию из CSS файла и сократим его размер в 4 раза! А еще мы напишем на чистом JavaScript функционал для слайдера»

► Вы с нуля увидите, как создать максимально эффективное рабочее окружение для верстки. Синтаксис используемый в блоке — SCSS, который является более строгой версией языка SASS.

  • БЛОК 5. Практика. Препроцессор LESS

Методология, выбранная для данного блока — наследование. Вы увидите, как просто и правильно совместно с препроцессором использовать данную методологию, и как такой подход позволяет сократить количество классов и максимально очистить html. Также вы увидите, как можно подключить специальную библиотеку шрифтов-картинок и тем самым оптимизировать размер таблицы стилей. После задания всех стилей мы буквально за пару секунд с помощью сборщика сделаем финальную сборку в один файл, и вы увидите, как это важно, потому что результат шаблона не изменится, а размер файла сократится почти в 4 раза.

В данном вводном уроке вы увидите шаблон, который нам предстоит сверстать. Вы узнаете, с помощью какой методологии будет сверстан данный макет, и каким изменениям он будет подвержен»

  • Урок 2. Настройка рабочего окружения.

В этом уроке вы увидите профессиональную настройку сборщика Gulp для автоматизации процессов при верстке на CSS препроцессоре»

  • Урок 3. Создание миксинов и параметров проекта.

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

В данном уроке нами будет сверстан блок навигации. Также мы рассмотрим способ добавление иконок из шрифта Font Awesome»

В этом уроке мы сверстаем блок хедера. Также мы добавим общий класс для кнопок на весь проект»

В данном уроке вы увидите, как сверстать блок функций, и как совместить картинку и текст»

В данном уроке мы продолжим верстку макета с блоком преимуществ»

В данном уроке мы сверстаем довольно интересный блок с тремя элементами. В рамках урока будет затронута тема: как создать трапецию на чистом CSS»

Данный урок посвящен блоку с текстом и описанием автора»

В этом уроке мы сверстаем блок с тремя элементами с разным наполнением, но одинаковым каркасом»

Этот урок, финальный в плане верстки, будет посвящен подвалу или футеру макета. Также мы создадим еще один миксин»

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

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

Препроцессоры Sass и Less

Препроцессоры Sass и Less. Автоматизация и упрощение Front-end разработки

Бонус: Основы Node.js — 60-70 Урок

Бонус: Основы Gulp — 71-76 Урок

Видео курса

Комментарии

Похожие курсы

Основы Sass

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

Несмотря на недавние значительные улучшения в организации JavaScript в наших современных веб-приложениях, CSS сравнительно слабо развился. Вместо этого многие команды полагаются на препроцессоры, такие как Sass, Less, PostCSS, Stylus и другие. Это, по существу.

Препроцессоры Sass и Less | Владилен Минин | 2020 00 комментариев

Медиаматериалы к новости

Медиаматериалы к новости временно недоступны

Год/Дата Выпуска: 2020

Версия программы: Владилен Минин

Язык интерфейса: Русский

Лицензионные условия: Не требуется

Размер .torrent: 2.08 GB

Препроцессоры Sass и Less упрощают вашу работу в разы. Они ускоряют написание css, добавляя вам ряд преимущест, таких как переменные, миксины. вложенные селекторы, математические функции, сообщения об ошибках в написании кода и тд. Во время использования Less или Sass в разработке проекта вы получите удобное написание кода, который будете писать в разы быстрей по сравнению с тем, если бы вы использовали обычный css, также вы сможете избежать дублей стилей, соответсвенно ваш код станет легким для браузеров, и важный аспект — такй код легче поддерживать. Пройдя этот курс вы получите как теоритические знания, так и практические навыки использования Sass и Less (Файлы практики находятся в материалах курса). Также в курсе присутсвуют бонусные уроки по основам Node.js и Gulp.

Дополнительная информация:

Блок 1. Теория: препроцессор LESS
Урок 1. Что такое Less
Урок 2. Компиляция на клиенте
Урок 3. Компиляция на NodeJS
Урок 4. Компиляция с помощью Gulp
Урок 5. Переменные
Урок 6. Миксины. Часть 1
Урок 7. Миксины. Часть 2
Урок 8. Миксины. Часть 3
Урок 9. Вложенность
Урок 10. Операторы
Урок 11 Наследование
Урок 12. Некомпилируемые строки
Урок 13. Циклы
Урок 14. Импорты
Урок 15. Встроенные функции

Блок 2. Теория: препроцессор SASS
Урок 1. Что такое SASS и SCSS
Урок 2. Настройка окружения для компиляции
Урок 3. Переменные
Урок 4. Некомпилируемые файлы настройки
Урок 5. Некомпилируемые файлы настройки
Урок 6. Миксины. Часть 2
Урок 7. Миксины. Часть 3
Урок 8. Импорты
Урок 9. Медиа запросы
Урок 10. Операторы
Урок 11. Встроенные функции
Урок 12. Создание своих функций
Урок 13. Наследование стилей
Урок 14. Условные директивы If Else
Урок 15. Циклы

Блок 3. Теория: CSS методологии
Урок 1. Что такое CSS методологии
Урок 2. БЭМ
Урок 3. Наследование

Блок 4. Практика: препроцессор SASS
Урок 1. Вводный
Урок 2. Настройка рабочего окружения
Урок 3. Создание миксинов и параметров проекта
Урок 4. Блок навигации
Урок 5. Блок хедера
Урок 6. Блок авторизации
Урок 7. Блок покупки. Часть 1
Урок 8. Блок покупки. Часть 2
Урок 9. Блок покупки. Часть 3
Урок 10. Блок пакетов
Урок 11. Блок о нас
Урок 12. Блок слайдера
Урок 13. Блок преимущества
Урок 14. Блок подвала
Урок 15. Функционал слайдера и продакшн сборка

Блок 5. Практика: препроцессор LESS
Урок 1. Вводный
Урок 2. Настройка рабочего окружения
Урок 3. Создание миксинов и параметров проекта
Урок 4. Блок навигации
Урок 5. Блок хедера
Урок 6. Блок функций
Урок 7. Блок преимуществ
Урок 8. Блок решений
Урок 9. Блок автора
Урок 10. Блок шагов
Урок 11. Блок подвала
Урок 12. Финальная сборка

Препроцессоры SASS и LESS (2020) Видеокурс

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

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

ЧАСТЬ 1. ТЕОРИЯ. ПРЕПРОЦЕССОР LESS
Урок 1. Что такое Less
Урок 2. Компиляция на клиенте
Урок 3. Компиляция на NodeJS
Урок 4. Компиляция с помощью Gulp
Урок 5. Переменные
Урок 6. Миксины. Часть 1
Урок 7. Миксины. Часть 2
Урок 8. Миксины. Часть 3
Урок 9. Вложенность
Урок 10. Операторы
Урок 11. Наследование
Урок 12. Некомпилируемые строки
Урок 13. Циклы
Урок 14. Импорты
Урок 15. Встроенные функции

ЧАСТЬ 2. ТЕОРИЯ. ПРЕПРОЦЕССОР SASS
Урок 1. Что такое SASS и SCSS
Урок 2. Настройка окружения для компиляции
Урок 3. Переменные
Урок 4. Некомпилируемые файлы настройки
Урок 5. Миксины. Часть 1
Урок 6. Миксины. Часть 2
Урок 7. Миксины. Часть 3
Урок 8. Импорты
Урок 9. Медиа запросы
Урок 10. Операторы
Урок 11. Встроенные функции
Урок 12. Создание своих функций
Урок 13. Наследование стилей
Урок 14. Условные директивы if else
Урок 15. Циклы

ЧАСТЬ 3. ТЕОРИЯ. CSS МЕТОДОЛОГИИ
Урок 1. Что такое css методологии
Урок 2. БЭМ
Урок 3. Наследование

ЧАСТЬ 4. ПРАКТИКА. ПРЕПРОЦЕССОР SASS
Урок 1. Вводный
Урок 2. Настройка рабочего окружения
Урок 3. Создание миксинов и параметров проекта
Урок 4. Блок навигации
Урок 5. Блок хедера
Урок 6. Блок авторизации
Урок 7. Блок покупки. Часть 1
Урок 8. Блок покупки. Часть 2
Урок 9. Блок покупки. Часть 3
Урок 10. Блок пакетов
Урок 11. Блок о нас
Урок 12. Блок слайдера
Урок 13. Блок преимущества
Урок 14. Блок подвала
Урок 15. Функционал слайдера и продакшн сборка

ЧАСТЬ 5. ПРАКТИКА. ПРЕПРОЦЕССОР LESS
Урок 1. Вводный
Урок 2. Настройка рабочего окружения (gulp)
Урок 3. Создание миксинов и параметров проекта
Урок 4. Блок навигации
Урок 5. Блок хедера
Урок 6. Блок функций
Урок 7. Блок преимуществ
Урок 8. Блок решений
Урок 9. Блок автора
Урок 10. Блок шагов
Урок 11. Блок подвала
Урок 12. Финальная сборка

БОНУС 1. ПРЕМИУМ КУРС ПО NODEJS: ОСНОВЫ
БОНУС 2. ПРЕМИУМ КУРС ПО GULP: ОСНОВЫ

Информация о видео
Название: Препроцессоры SASS и LESS
Автор: Владилен Минин
Год выхода: 2020
Жанр: Видеокурс
Язык: Русский
Выпущено: Россия
Продолжительность: n/a

Файл
Формат: HTML, MP4 (+ доп. материалы)
Видео: AVC, 1280×720,

156 Kbps
Аудио: AAC, 110 Kbps, 48.0 KHz
Размер: 2.08 Gb

Скачать: Препроцессоры SASS и LESS (2020) Видеокурс

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