Уважаемые программисты, здравствуйте!
У меня возникла следующая проблема: я хочу использовать CSS-переменные в качестве условий для медиа-запросов, но CSS
запрещает мне это делать (просто игнорирует медиа-запросы).
Почитав форумов я заметил, что все пишут про пакет NPM
под названием postcss-media-variables
, который якобы должен позволять мне использовать мои переменные в этих медиа-запросах.
Почитав немного про NPM
, посмотрев гайды и туториалы, я понял только то, что ты пишешь команды в специальную консоль и тебе устанавливаются нужные тебе пакеты.
Я попробовал, но у меня глобально нужный пакет установился:
А при установке локально, в нужную мне директорию, выдало кучу предупреждений и ничего так и не установило:
Хотя у человека на видео, всё получилось.
Я в этом деле абсолютно чайник, так что если я где-то ошибся - не надо кидать в меня помидорами.
Очень хочется узнать про установку этого пакета.
Буду рад любой помощи!
Заранее спасибо!
Скачал gulp, gulp-postcss, postcss-media-variables написал gulpfile.js:
var postcss = require('gulp-postcss');
var gulp = require('gulp');
var postcssmediavariables = require('postcss-media-variables');
gulp.task('serve', ['css'], function() {
gulp.watch("./css/*.css", ['css'])
});
gulp.task('css', function() {
var plugin = [
postcssmediavariables()
];
return gulp.src('./css/*.css')
.pipe(postcss(plugin))
.pipe(gulp.dest('./dest'));
});
gulp.task('default', ['serve']);
:root {
--size: 500px;
}
.b1 {
width: 100px;
height: 100px;
background-color: #000;
}
@media screen and (max-width: var(--size)) {
.b1 {
width: 50px;
height: 50px;
}
}
<!DOCTYPE HTML>
<html>
<head>
<title>Yan Gordon</title>
<meta charset="utf-8">
<link rel="stylesheet" href="css/style.css">
<meta name="yandex-verification" content="f356f6cc893787fc">
</head>
<body>
<div class="b1"></div>
</body>
</html>
На выходе:
C:\Users\Колба\Колба\YanGordon>gulp
assert.js:350
throw err;
^
AssertionError [ERR_ASSERTION]: Task function must be specified
at Gulp.set [as _setTask] (C:\Users\Колба\Колба\YanGordon\node_modules\under
taker\lib\set-task.js:10:3)
at Gulp.task (C:\Users\Колба\Колба\YanGordon\node_modules\undertaker\lib\tas
k.js:13:8)
at Object.<anonymous> (C:\Users\Колба\Колба\YanGordon\gulpfile.js:5:6)
at Module._compile (internal/modules/cjs/loader.js:701:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:712:10)
at Module.load (internal/modules/cjs/loader.js:600:32)
at tryModuleLoad (internal/modules/cjs/loader.js:539:12)
at Function.Module._load (internal/modules/cjs/loader.js:531:3)
at Module.require (internal/modules/cjs/loader.js:637:17)
at require (internal/modules/cjs/helpers.js:22:18)
C:\Users\Колба\Колба\YanGordon>
Что делать?