Меню
Обсудить ваш проект

Ускоряем адаптив сайта в 3 раза с помощью scss-миксина.

Сегодня мы разберем удобный 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 в свою очередь:

  1. Увидел что у @content в теле миксина обернут в media
  2. Обернул наш код в селектор с текущим классом. Потом обернул то что есть в media обертку
  3. Передал написанные нами стили

Плюсы использования миксина:

  • Мы можем видеть как элемент изменяется на разных разрешениях экрана на месте.
  • Когда нужно будет добавить какие-то свойства к элементу на разных расширениях экрана, не будет необходимости искать селектор в разных местах.
  • Требуется меньше кода для написания. Да, мы каждый раз прописываем @include _. Для этого есть решение: создать сниппет для каждого разрешения или общий для миксина, как это сделал я для sublime. Пример работы:
Ускоряем адаптив сайта в 3 раза с помощью scss-миксина. 1
//Код миксина для 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».

Ускоряем адаптив сайта в 3 раза с помощью scss-миксина. 2

Структура проекта:

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;
  }
}

Наши медиа-запросы сгруппировались и расположились внизу файла.

Скачать исходники

Поделиться
Отправить

Комментарии