Частини Gulp сценарію
- Налаштування Sublime Text 3
- Шаблон заявки на замовлення
- CSS властивість background
- CSS властивість position
- Шпаргалка з FLEX
- Одиниці вимірювання CSS
- Застосування класу "ibg"
- CSS властивість transition
- Animation та @keyframes
- Шпаргалка Slick Slider
- Шпаргалка CSS Transform
- Шпаргалка CSS Grid
- Gulp сценарій
- Зарезервовані слова JS
SCSS міксин для підключення шрифтів
@mixin font($font_name, $file_name, $weight, $style) {
@font-face {
font-family: $font_name;
font-display: swap;
src: url("../fonts/#{$file_name}.woff") format("woff"), url("../fonts/#{$file_name}.woff2") format("woff2");
font-weight: #{$weight};
font-style: #{$style};
}
}
JS-функція запису інформації в fonts.scss
function fontsStyle(params) {
let file_content = fs.readFileSync(source_folder + '/scss/fonts.scss');
if (file_content == '') {
fs.writeFile(source_folder + '/scss/fonts.scss', '', cb);
return fs.readdir(path.build.fonts, function (err, items) {
if (items) {
let c_fontname;
for (var i = 0; i < items.length; i++) {
let fontname = items[i].split('.');
fontname = fontname[0];
if (c_fontname != fontname) {
fs.appendFile(source_folder + '/scss/fonts.scss', '@include font("' + fontname + '", "' + fontname + '", "400", "normal");\r\n', cb);
}
c_fontname = fontname;}
}
}
})
}
}
function cb() { }
JS-функція визначення підтримки WebP
function testWebP(callback) {
var webP = new Image();
webP.onload = webP.onerror = function () {
callback(webP.height == 2);
};
webP.src = "data:image/webp;base64,UklGRjoAAABXRUJQVlA4IC4AAACyAgCdASoCAAIALmk0mk0iIiIiIgBoSygABc6WWgAA/veff/0PP8bA//LwYAAA";
}
testWebP(function (support) {
if (support == true) {
document.querySelector('body').classList.add('webp');
}else{
document.querySelector('body').classList.add('no-webp');
}
});
Повернутися назад
