Сегодня мы разберем удобный scss-миксин для ускорения работы по адаптивности наших проектов.
Для использования этого плагина вам нужно подключить его к основному файлу scss. В scss вы можете вставить код в начале файла или подключить файл командой:
@import 'path_file.scss';
Код миксина.
// Using
//.div {
// @include _1170 {
// @content;
// }
//}
//media_mixin.scss
@mixin _1170 {
@media (max-width: 1170px){
@content;
}
}
@mixin _979 {
@media (max-width: 979px){
@content;
}
}
@mixin _768 {
@media (max-width: 768px){
@content;
}
}
@mixin _600 {
@media (max-width: 600px){
@content;
}
}
@mixin _480 {
@media (max-width: 480px){
@content;
}
}
@mixin _350{
@media (max-width: 350px){
@content;
}
}
Как это работает?
Когда прописываем директиву @include _1170 в теле селектора, директива находит содержимое миксина _1170 и выполняет его в нашем селекторе. В теге селектора создается @media правило, а при компиляции в css весь лишний код выносится за скобки, в том числе и наши медиа запросы.
Давайте попробуем подключить наш миксин в основном файле scss. Используем пару миксинов для адаптивности элемента на разрешениях 768px и 480px.
// main scss file
@import "media_mixin.scss";
.header {
background-color: red;
@include _768 {
background-color: purple;
}
@include _480 {
background-color: black;
}
}
На выходе получим вот такой css код:
// css result code
.header {
background-color: red;
}
@media (max-width: 768px) {
.header {
background-color: purple;
}
}
@media (max-width: 480px) {
.header {
background-color: black;
}
}
Вы можете спросить: «Тогда откуда в медиа-запросе взялся класс? Мы его нигде не указывали». Это хороший вопрос. Для того чтобы понять нужно посмотреть на поведение @content в разных ситуациях.
Давайте создадим обычный миксин который просто добавляет какие-то свойства.
// Создаем простой миксин и применим его в селекторе.
@mixin test() {
@content;
}
.header {
color: red;
@include test {
font-size: 10px;
}
}
// сss после компиляции
.header {
color: red;
font-size: 10px;
}
Никакого класса не было добавлено, @content состоял лишь из того, что мы ему передали в @include {}. Из этого можно сделать вывод: если в миксине есть какая-то внешняя обертка нашего кода, @content оборачивает наш код в селектор с текущим классом.
Мы написали стили в @include _768 {}, scss в свою очередь:
- Увидел что у @content в теле миксина обернут в media
- Обернул наш код в селектор с текущим классом. Потом обернул то что есть в media обертку
- Передал написанные нами стили
Плюсы использования миксина:
- Мы можем видеть как элемент изменяется на разных разрешениях экрана на месте.
- Когда нужно будет добавить какие-то свойства к элементу на разных расширениях экрана, не будет необходимости искать селектор в разных местах.
- Требуется меньше кода для написания. Да, мы каждый раз прописываем @include _. Для этого есть решение: создать сниппет для каждого разрешения или общий для миксина, как это сделал я для sublime. Пример работы:
//Код миксина для sublime
<snippet>
<content><![CDATA[
@include _${1} {
${2}
}
]]></content>
<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
<tabTrigger>_media</tabTrigger>
<!-- Optional: Set a scope to limit where the snippet will trigger -->
<scope>source.scss</scope>
</snippet>
Урок по созданию сниппетов для sublime: https://www.youtube.com/watch?v=kpu1L2gXdzU
// Код миксина для Visual Studio Code
{
"_1366": {
"prefix": "_1366",
"body": [
"@include _1366 {",
"t$0",
"}"
],
"description": "Media Queries"
},
"_1250": {
"prefix": "_1250",
"body": [
"@include _1250 {",
"t$0",
"}"
],
"description": "Media Queries"
},
"_1170": {
"prefix": "_1170",
"body": [
"@include _1170 {",
"t$0",
"}"
],
"description": "Media Queries"
},
"_1024": {
"prefix": "_1024",
"body": [
"@include _1024 {",
"t$0",
"}"
],
"description": "Media Queries"
},
"_979": {
"prefix": "_979",
"body": [
"@include _979 {",
"t$0",
"}"
],
"description": "Media Queries"
},
"_850": {
"prefix": "_850",
"body": [
"@include _850 {",
"t$0",
"}"
],
"description": "Media Queries"
},
"_768": {
"prefix": "_768",
"body": [
"@include _768 {",
"t$0",
"}"
],
"description": "Media Queries"
},
"_600": {
"prefix": "_600",
"body": [
"@include _600 {",
"t$0",
"}"
],
"description": "Media Queries"
},
"_480": {
"prefix": "_480",
"body": [
"@include _480 {",
"t$0",
"}"
],
"description": "Media Queries"
},
"_350": {
"prefix": "_350",
"body": [
"@include _350 {",
"t$0",
"}"
],
"description": "Media Queries"
},
}
Статья по созданию сниппетов в Visual Studio Code:
https://bit.ly/2MLkFJt
Используем миксин в реальном проекте
Если слова Gulp и npm вам незнакомы, прочитайте это руководство и возвращайтесь обратно 🙂
Создаем окружение для проекта с gulp-сборкой. Выполняем команду npm init в консоли и заполняем данные проекта, я в данном случае заполнил только поле «author».
Структура проекта:
src/
main.scss
_media-mixin.scss
gulpfile.js
package.json
package-lock.json
Устанавливаем npm-пакеты: gulp, gulp-sass, gulp-group-css-media-queries
npm i gulp gulp-sass gulp-group-css-media-queries --save-dev
Теперь идем в gulpfile. js и инициализируем эти пакеты.
var gulp = require('gulp'),
sass = require('gulp-sass'),
gcmq = require('gulp-group-css-media-queries');
Теперь давайте напишем таск для компиляции scss.
gulp.task('css:build', function() {
return gulp.src(['!src/_*.scss','src/*.scss']) // Взяли файлы с расширением .scss, исключили из выборки файлы, которые начинаются с символа _
.pipe(sass()) // компилируем scss в css
.pipe(gcmq()) // в полученном css группируем множество медиа-выражений в общие.
.pipe(gulp.dest('src/')) // кладем наш css файл в ту же папку
});
Напишем пару строк scss кода используя наш миксин, его мы подключим вверху файла директивой @import.
@import '_media-mixin.scss';
/* Header */
.header {
color: red;
@include _768 {
color: blue;
}
@include _350 {
color: black;
}
}
/* Footer */
.footer {
@include _768 {
font-size: 20px;
}
@include _350 {
font-size: 40px;
}
}
Теперь запустим в консоли наш таск:
gulp css:build
Смотрим появившийся файл main. css:
/* Header */
.header {
color: red;
}
/* Footer */
@media (max-width: 768px) {
.header {
color: blue;
}
.footer {
font-size: 20px;
}
}
@media (max-width: 350px) {
.header {
color: black;
}
.footer {
font-size: 40px;
}
}
Наши медиа-запросы сгруппировались и расположились внизу файла.