Ответы пользователя по тегу Sass
  • Не могу найти нормальные шаблоны для адаптивной верстки (gulp + sass + browser-sync)?

    delphinpro
    @delphinpro Куратор тега Sass
    frontend developer
    Вот простой конфиг

    package.json
    {
      "name": "mysite.local",
      "version": "1.0.0",
      "description": "",
      "main": "gulpfile.js",
      "dependencies": {
        "bs-grid-system": "^2.0.3",
        "jquery": "^3.3.1",
        "normalize.css": "^8.0.1",
        "tiny-slider": "^2.9.0",
        "whatwg-fetch": "^3.0.0"
      },
      "devDependencies": {
        "@babel/core": "^7.2.0",
        "@babel/preset-env": "^7.2.0",
        "browser-sync": "^2.26.3",
        "gulp": "^3.9.1",
        "gulp-autoprefixer": "^6.0.0",
        "gulp-babel": "^8.0.0",
        "gulp-changed-in-place": "^2.3.0",
        "gulp-concat": "^2.6.1",
        "gulp-plumber": "^1.2.1",
        "gulp-sass": "^4.0.2",
        "gulp-sequence": "^1.0.0",
        "gulp-sourcemaps": "^2.6.4",
        "gulp-twig": "^1.2.0"
      },
      "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
      },
      "author": "delphinpro <delphinpro@yandex.ru>",
      "license": "MIT"
    }
    gulpfile.js
    const gulp = require('gulp');
    const sass = require('gulp-sass');
    const twig = require('gulp-twig');
    const babel = require('gulp-babel');
    const concat = require('gulp-concat');
    const plumber = require('gulp-plumber');
    const sequence = require('gulp-sequence');
    const sourcemaps = require('gulp-sourcemaps');
    const autoprefixer = require('gulp-autoprefixer');
    const changed = require('gulp-changed-in-place');
    const bs = require('browser-sync').create();
    
    gulp.task('sass', function () {
        return gulp.src([
            './node_modules/normalize.css/normalize.css',
            './node_modules/tiny-slider/dist/tiny-slider.css',
            './src/sass/**/*.scss',
        ])
            .pipe(plumber())
            .pipe(sourcemaps.init())
            .pipe(sass({ outputStyle: 'nested' }))
            .pipe(autoprefixer())
            .pipe(concat('main.css'))
            .pipe(sourcemaps.write('.'))
            .pipe(gulp.dest('./public_html/design/'))
            .pipe(bs.stream())
            ;
    });
    
    gulp.task('js:vendor', function (done) {
        gulp.src([
            './node_modules/jquery/dist/jquery.min.js',
            './node_modules/whatwg-fetch/dist/fetch.umd.js',
            './node_modules/tiny-slider/dist/min/tiny-slider.js',
        ])
            .pipe(plumber())
            .pipe(sourcemaps.init({ loadMaps: true }))
            .pipe(concat('vendor.js'))
            .pipe(sourcemaps.write('.'))
            .pipe(gulp.dest('./public_html/design/'))
            .on('end', done)
        ;
    });
    
    gulp.task('js', function (done) {
        gulp.src([
            './src/js/main.js',
            './src/js/**/*.js',
        ])
            .pipe(plumber())
            .pipe(sourcemaps.init())
            .pipe(babel())
            .pipe(concat('main.js'))
            .pipe(sourcemaps.write('.'))
            .pipe(gulp.dest('./public_html/design/'))
            .on('end', function () {
                bs.reload();
                done();
            })
        ;
    });
    
    gulp.task('twig', function (done) {
        gulp.src([
            './src/twig/*.twig',
        ])
            .pipe(plumber())
            .pipe(twig({
                base: [__dirname],
            }))
            .pipe(changed({ firstPass: true }))
            .pipe(gulp.dest('./public_html/'))
            .on('end', function () {
                bs.reload();
                done();
            })
        ;
    });
    
    gulp.task('serve', function () {
        bs.init({
            ui: false,
            //proxy: 'mysite.local',
            server : './public_html',
            browser: ['chrome'],
        });
    
        //    gulp.watch('./public_html/*.html').on('change', bs.reload);
        gulp.watch('./src/sass/**/*.scss', ['sass']);
        gulp.watch('./src/js/**/*.js', ['js']);
        gulp.watch('./src/twig/**/*.twig', ['twig']);
    });
    
    gulp.task('default', sequence(['twig', 'sass', 'js', 'js:vendor'], 'serve'));
    Структура каталогов
    5cb718165250b202742020.png
    Ответ написан
  • В каком порядке писать Sass-селекторы?

    delphinpro
    @delphinpro Куратор тега CSS
    frontend developer
    .block {
      $this: &;
    
      color: red;
      
      &__element { font-size: 12px; }
    
      &:hover &__element { transform: scale(1.1); }
    
      @media () {}
    
      //==
      //== Модификация какая-то
      //== ==========================
    
      #{$this}_mod {
        color: green;
        &__element { font-size: 16px; }
        @media () {}
      }
      #{$this}__mod:hover &__element { transform: scale(1.1); }
    
      //==
      //== Другая модификация
      //== ==========================
    
      &_mod { background: yellow; }
      @media () {}
    }
    Ответ написан
  • Есть ли возможность инклудить scss и pug миксины в компоненты vue глобально?

    delphinpro
    @delphinpro Куратор тега Sass
    frontend developer
    кусок из моего конфига
    const sassLoaderOptions = {
        outputStyle: 'compressed',
        data       : '@import "./config.scss";',
    };
     {
                    test: /\.scss$/,
                    use : [
                        'style-loader',
                        { loader: 'css-loader', options: cssLoaderOptions },
                        { loader: 'sass-loader', options: sassLoaderOptions },
                    ],
                },
    Ответ написан
  • Как выполнить в sass такие манипуляции?

    delphinpro
    @delphinpro Куратор тега Sass
    frontend developer
    А зачем вообще кейфреймы множить, одного не достаточно?
    $base-delay: 100ms;
    @for $i from 0 through 400 {
      .item#{$i} {
        animation-delay: $base-delay + $i;
        animation-name: myanimation
      }
    }
    @keyframes myanimation { .... }
    Ответ написан
  • Gulp не запускается пишет что нет mixin с таким именем?

    delphinpro
    @delphinpro Куратор тега Sass
    frontend developer
    Внимательно посмотрите на первый скрин, в терминал, потом на второй скрин, туда же. Найдите отличие.

    Отличие в том, что во втором случае в ошибке указан стек вызова scss-файлов, а в первом нет. Какой из этого следует вывод? Элементарно - вы компилите header.scss отдельно. В нем вы ничего не подключаете, это нормально, все подключено в style.scss, но сам файл по отдельности так не скомпилится.
    1. Подключаемые части стилей принято именовать с начальным подчеркиванием
    2. Файлы с начальным подчеркиванием должны быть исключены, не передаваться на вход галпа.

    Во втором случае хз, ну наверное нет у вас такой переменной, создайте ее.
    Ответ написан
  • Как посчитать сумму всех значений в цикле?

    delphinpro
    @delphinpro Куратор тега Sass
    frontend developer
    Арифметическая прогрессия, в школе должны были про нее рассказывать.

    Sum = (a1+a10) / 2 * 10

    на scss:

    $count: 10;
    $baseWidth: 121px;
    
    $sum: ($baseWidth + $baseWidth * $count) / 2 * $count;


    итог:

    Ответ написан
  • Как менять $primary в 4-ом бутстрапе в зависимости от id страницы?

    delphinpro
    @delphinpro Куратор тега Sass
    frontend developer
    Делаете несколько файлов: main-default.scss, main-red.scss и т.п.

    В каждом пишете примерно следующее

    $primary: red;
    @import 'vars.scss';
    …


    Дальше дело техники — на каждой странице подключаете свой файл.

    Очевидный недостаток — слишком много дублирующихся стилей на выходе. Но с другой стороны подключается только один из main файлов, и это самое простое решение, не требующее вмешательства в исходники бутстрапа.

    Другой вариант — выдрать все стили, влияющие на цветовую схему и подключать main.css + цветовую схему. Тут возможны под-варианты — отдельные файлы для тем, один файл через корневой селектор. В любом случае тут уже придется вмешиваться в исходники или дублировать часть исходников в своих темах.

    Если у вас будет не очень много тем, лучше пойти по первому пути. Если количество цветовых решений не ограничено, то вытащить часть стилей и инлайнить их прямо в страницу (готовым css).
    Ответ написан
  • Почему не завершается процесс gulp?

    delphinpro
    @delphinpro Куратор тега Sass
    frontend developer
    В любой непонятной ситуации читай документацию! =)

    Кто вас научил так писать код? Абсолютно нечитаемо и непонятно сходу что там происходит. Любой код (особенно тот что вы показываете) должен быть аккуратным и красивым.

    gulp.task('sass', function() {
      return gulp.src(paths.src.sass)
                 .pipe(sassGlob())
                 .pipe(sourcemaps.init())
                 .pipe(sass(sassConfig))
                 .on('error', notify.onError(errorHandlerFunction))
                 .pipe(sourcemaps.write())
                 .pipe(gulp.dest(paths.dist.css))
                 .pipe(reload({stream: true}))
      ;
    });

    Согласитесь, что так намного понятнее.

    Теперь к вашему вопросу.
    Смотрим документацию, читаем и пишем:

    // Подключаем библу
    const browserSync = require('browser-sync').create(); // create!!!
    
    // Инициализируем сервер
    browserSync.init(settings);
    
    // для отслеживания изменений юзаем watch
    // который ЗАПУСКАЕТ ЗАДАЧУ, а не перезагружает страницу!!!
    gulp.watch(paths.watch.js).on('change', ['pug']);
    
    // А уже в самой задаче, по ее окончанию, вызываем перезагрузку страницы
    .pipe(browserSync.reload)
    
    // А стили можно инъектить вообще без перезагрузки страницы:
    .pipe(browserSync.stream())
    Ответ написан
  • Как синхронизировать SCSS и CSS?

    delphinpro
    @delphinpro Куратор тега CSS
    frontend developer
    Попадал тоже в такую ситуёвину...
    Решал кропотливым ручным трудом.

    Для облегчения отслеживания сделал копию css файла, открыл копию и билд в diff вьювере (в моем случае инструмент сравнения файлов в phpstorm). Цель — привести билд к идентичности с текущей версией css. По каждому диффу вносил изменения в sass, дифф тут же обновлялся после пересборки и я переходил к следующему.

    ЗЫ. css копию лучше переформатировать автоформатом. А в sass включить outputStyle="expanded"

    Автоматически подобную задачу вряд ли можно решить.
    Ответ написан
  • PostCSS - аналог breakpoints для postcss как в sass?

    delphinpro
    @delphinpro Куратор тега Sass
    frontend developer
    Зачем отказываться от привычных инструментов https://github.com/postcss/postcss-scss
    Ответ написан
  • Как в SCSS(SASS) унаследовать вложенность?

    delphinpro
    @delphinpro Куратор тега CSS
    frontend developer
    .main-menu {
        $this: &;
        display: none;
        &--open {
            display: block;
            #{$this}__link {  }
        }
    }


    Но я предпочитаю такой вариант:

    .main-menu {
        display: none;
        &--open { display: block; }
        &--open &__link {  }
    }
    Ответ написан
  • Что означает код: .\31 u\24?

    delphinpro
    @delphinpro Куратор тега CSS
    frontend developer
    Это простой эскейпинг, экранирование спецсимволов. или недопустимых символов.
    В CSS класс может начинаться только с символов "a-z, _, -"
    Но в html можно писать что угодно.
    Поэтому можно делать так
    .\31 {}
    .\@md-3
    
    <div class="31"></div>
    <div class="@md-3"></div>


    К sass отношения это дело не имеет. Чистый css.
    Ответ написан
  • Как правильно верстать bootstrap + SASS?

    delphinpro
    @delphinpro Куратор тега Sass
    frontend developer
    CDN vs свой билд — экономия на спичках.
    Тем более если вам не нужен весь пакет.

    Начну с самого плохого, неправильного и убогого варианта использования:
    Это когда люди подключают бутстрап.мин.цсс, а потом в своем файлике начинают переопределять стили. Получается полный неподдерживаемый пиздец (я как раз сейчас натягиваю на сайт купленный (!) такой шаблон, нервы на пределе).
    Люди, которые так делают приводят гнилой аргумент: а вдруг мы захотим обновить бутстрап? Серьезно, блять? Как часто вы это делали? ставлю сто баксов, что ни разу.

    Как делать по феншую.

    Для начала, естественно, использовать препроцессорные исходники (не будем выбирать конкретный порт, есть и lеss, и sсss, и stylus, кому что нравится).

    Далее миксины. Не нужно подключать отдельные. Подключите valiables.scss и mixins.scss. Миксины не попадают сами по себе в билд, так пусть они все будут доступны.

    Компоненты. Отключите ненужные, закомментировав импорты соответствующих файлов.

    Кнопки. Если бутстраповские не нужны, отключите их. Напишите свои, используя миксины и даже копипасту части кода из бутстрапа. Это нормально.
    Отличный вариант, если вы напишете свой миксин для кнопки (который и бутстраповские миксины может использовать). Ибо в бутстрапе, к сожалению, нет миксина make-button().

    Если вам нужно переделать компонент или стиль (часто приходится модифицировать навбар, таблицы, навигацию, табы), не стесняйтесь исправить исходник. Но лучше исходнить отключить, скопипастить и подключить свой вариант (возможно даже поменяв классы, но это не всегда прокатит, ибо связанность ужасная). Править нужно, понимая что вы делаете. Потому что бутстрап внутри устроен через жопу. Взять хотя бы класс .nav — лютый пиздец, дикая связанность.

    Пагинация, крошки. Никогда вас не попросят поставить исходные стили. Если по макету эти элементы имеют определенный стиль, этот стиль будет сохраняться. Смело меняйте. Или делайте дубликат.

    Хелперы использовать нужно как можно меньше. Они нужны для быстрых набросков или правок "здесь и сейчас". Лучше опишите новый класс.
    Опять же если вам нужен класс list-inline в единственном месте, то почему бы его не прописать?

    Ссылки и статьи типа "как верстать под бутстрап" — это исключительно отстойный материал, написанный чаще всего такими же новичками, как и те, кто ищет подобную тему. Хотя базовую инфу вы конечно получите.
    Ответ написан
  • Как корректно преобразовывать html/стили для старых версий браузеров?

    delphinpro
    @delphinpro Куратор тега Sass
    frontend developer
    Верно ли, что просто поменяв значения в массиве настроек UTOPREFIXER_BROWSERS мы задаем поддержку

    Неверно. Потому что поддержка браузеров — это не только вендорные префиксы.
    Но в целом, да. Автопрефиксер расставит вам все необходимые -webkit- и т.п. свойства. Более того, он добавит некоторые другие свойства, например для поддержки старой спеки флексов, и удалит более неактуальные префиксы, если вы их написали вручную.

    Верно ли, что подобные плагины только лишь подставляют в нужных местах префиксы, и ничего более не делают?

    Вот это верно.
    Если вам нужны не только префиксы, но и полифилы, их нужно подключать самостоятельно. Однако, если вы используете webpack, то у него в комплекте уже есть куча полифилов. Например, поддержка for..of или spred-операторов. Они тоже по дефолту не подключаются, но можно подключить и использовать.

    как быть в случае html и тегов вроде header, да и прочих более менее новых html-вещей, поддержка которых браузерами вводилась не сразу?

    Полифил. Ищем нужный полифил и подключаем.
    Ответ написан
  • Кто использует такой подход в написании CSS?

    delphinpro
    @delphinpro Куратор тега CSS
    frontend developer
    Всё правильно. Тоже так пишу. Но...
    Я всё же стараюсь группировать медиазапросы в пределах блока по их, как бы это сказать, функциональному назначению. Например, если есть взаимосвязь между двумя элементами, и при изменении свойств одного из них необходимо изменить свойства второго, то я пишу один медиазапрос внутри блока с правилами для этих двух элементов. Если тесной связанности нет, например, нужно просто скрыть один из элементов, то медиазапрос пишется прямо в этом элементе.
    Ответ написан
  • Как использовать сетку bootstrap 4 в scss?

    delphinpro
    @delphinpro Куратор тега Sass
    frontend developer
    Через медиазапрос.

    .something {
      @include make-col-ready();
      @include make-col(12); // xs
    
      @include media-breakpoint-up(sm) {
        @include make-col(6); // sm
      }
    
      @include media-breakpoint-up(xl) {
        @include make-col(3); // xl
      }
    }
    Ответ написан
  • В чем проблема с миксином для fonts?

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