Сергей delphinpro

Потому что SASS. SASS. Отступы. Ещё раз — отступы.
Короче, писать в одну строку надо весь src
Это вам не SCSS.

Less — 9,051,733 available code results
Scss — 9,744,238 available code results
Sass — 311,623 available code results
Stylus — 311,251 available code results
scss+sass = 10,055,861

Вам нужно использовать встроенные миксины бутстрапа. Все они здесь https://github.com/twbs/bootstrap/blob/v4-dev/scss...

media-breakpoint-up()
media-breakpoint-down()
media-breakpoint-between()
media-breakpoint-only()

В качестве параметров передаётся название контрольной точки (ключи из переменной $grid-breakpoints) - xs, sm, md, lg, xl.

Ну вот так как-то
https://www.sassmeister.com/gist/1791877429a5e794c...

Это значит, что ваша IDE создала индекс всего кода проекта. И нашла в этом коде объявление данной переменной. Т.е вы ее где-то в другом файле объявили.
Но IDE не может гарантировать что вы подключили этот файл, вот и предупреждает.

Storm не умеет полностью парсить все вложенные в файлы импорты и смотрит только на то, что подключено в текущем sass файле явно.

Я как правило отключаю эту инспекцию, чтобы глаза не мозолила.

Если у вас не компилируется, значит вы не подключили нужный файл.

Например у вас есть
settings.scss
$myVariable: red;

block.scss

.block {
  background: $myVariable;
}

styles.scss

@import 'settings.scss';
@import 'block.scss';

вот если вы откроете файл block.scss - в нем storm будет показывать данное предупреждение.
Но т.к. все импорты корректные, стили скомпилируются нормально.

Но если вы в файле styles.scss забудете подключить settings.scss, то IDE по-прежнему будет показывать такое же предупреждение, но стили уже не скомпилятся.

Не нужно делить мир на черное и белое. В нем гораздо больше оттенков.

@include big(1, 2, $d: 4);

https://codepen.io/delphinpro/pen/PmjXNb?editors=1100

К сожалению Sass не умеет резолвить такие пути. Проблема есть, о ней знают, но пока не решают (разработчики sass я имею ввиду).
Я принял за правило писать абсолютные ссылки
/img/img-name.jpg
Да, есть минусы, но как-то живем пока.

https://jsfiddle.net/hrtdaqqo/5/

И еще немножко советы по sass-у какие-нибудь если можно.

Для начала классика - Don't Repeat Yourself, DRY - один из основных принципов программирования
Это я по поводу этих самых блоков с бордером..

pp/sass/blocks/main-header.scss
pp/sass/blocks/_main-header.scss

Дело в том, что вы импортируете миксин в главный файл, в этот же главный подключаете блоки
Но файлы блоков у вас не начинаются с подчеркивания и sass думает, что их тоже надо скомпилировать отдельно. После того как ваш главный файл со всеми подключениями скомпилился, на очередь идут другие найденные файлы без подчеркивания. Компилятор берет main-header.scss и обрабатывает его отдельно. Но! в этом файле нет подключения миксина.
Это я вам суть проблемы обрисовал.
Решение - все файлы, из которых не должен получаться отдельный css файл нужно именовать, начиная с подчеркивания. Файлы с миксинами лучше тоже.

Ну вот базовая схема.

$root-font-size: 16px;

@function rem($size) {
  @return $size / $root-font-size * 1rem;
}

html {
  font-size: ($root-font-size / 16px) * 100%;
}

.some-block {
  font-size: rem(24px);
}

Функцию можно заменить на миксин, как удобнее. С миксином проще пиксельный фоллбэк сделать (актуально только IE8).

Можно миксины из vertical-rhytm заюзать, в составе компаса.

Можно другие библиотеки посмотреть. Вариантов масса.

нужно найти проблемный файл методом исключения. создать новый и переписать в него код. проблемный удалить.
причина - какой-то utf-8 символ, он может быть невидимым "невооруженным глазом" =), возможно появился из-за копи-пасты, или случайно введен alt-кодом, или что более вероятно, поврежден файл, и один из байтов символа затерся (ну как-то так).

Бредятина.
Непонятно, как это упростит интеграцию в CMS
Непонятен получаемый профит, кроме удовлетворения своего "хочу"
Зато есть мнение, что селектор атрибута медленнее селектора класса.

А, ну да. Как же всё-таки это сделать? Просто переписать селекторы в сетке:

@mixin make-grid-columns($i: 1, $list: "[data-grid=col-xs-#{$i}], [data-grid=col-sm-#{$i}], [data-grid=col-md-#{$i}], [data-grid=col-lg-#{$i}]") {
  @for $i from (1 + 1) through $grid-columns {
    $list: "#{$list}, [data-grid=col-xs-#{$i}], [data-grid=col-sm-#{$i}], [data-grid=col-md-#{$i}], [data-grid=col-lg-#{$i}]";
  }
  #{$list} {
    position: relative;
    min-height: 1px;
    padding-left:  ceil(($grid-gutter-width / 2));
    padding-right: floor(($grid-gutter-width / 2));
  }
}

ну и остальные миксины аналогично. Пересобираем и пользуемся.

@mixin long-shadow() {
    $shadow: "16px 0 0 currentColor";
    @for $i from 2 through 50 {
        $basis: 16 * $i;
        $shadow: #{$shadow}, #{$basis}px 0 0 currentColor;
    }
    box-shadow: $shadow;
}

Что его искать-то, пара кликов мышкой

можно ли с ними работать в gulp-sass как с обычными .sass файлами?

Обычные - это как раз .scss-файлы. А .sass - устаревший синтаксис для извращенцев.

кастомный шрифт в письме? вы оригинал.

.pipe(sourcemaps.write())

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

Напишите хотя бы так, чтобы сорсмап записывался в отдельный файл рядом с css
.pipe(sourcemaps.write('.'))