Установка Sass

Установка Sass#

1. Через Homebrew (рекомендуемый способ):#

# Если нет Homebrew
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

# Установка Dart Sass (современная версия)
brew install sass/sass/sass

Проверка установки:

sass --version

2. Настройка PhpStorm#

File → Settings → Tools → File Watchers

  • Нажми “+” → выбери “SCSS”

  • Program: /opt/homebrew/bin/sass (или /usr/local/bin/sass)

  • Arguments: $FileName$:$FileNameWithoutExtension$.css --style=expanded

  • Output paths: $FileNameWithoutExtension$.css

3. Настройка Gulp#

Установи gulp-sass:

npm install --save-dev gulp gulp-sass sass

_gulpfile.js:

const gulp = require('gulp');
const sass = require('gulp-sass')(require('sass'));

gulp.task('sass', function() {
  return gulp.src('src/scss/**/*.scss')
    .pipe(sass({
      outputStyle: 'expanded' // или 'compressed'
    }).on('error', sass.logError))
    .pipe(gulp.dest('dist/css'));
});

gulp.task('watch', function() {
  gulp.watch('src/scss/**/*.scss', gulp.series('sass'));
});

4. Структура проекта#

project/
├── src/
│   └── scss/
│       ├── main.scss
│       └── _variables.scss
├── dist/
│   └── css/
├── _gulpfile.js
└── package.json

Запуск:#

gulp sass    # однократная компиляция
gulp watch   # отслеживание изменений
Contents