Sublime Text создает SASS — Autoprefixer — цепочку CSS при сохранении без Grunt

После просмотра фильма Криса Койера

http://www.youtube.com/watch?v=M7W5unPM_b4&list=UUADyUOnhyEoQqrw_RrsGleA

Мне было интересно - можно ли автозапустить плагин Autoprefixer Sublime сразу после сборки файла CSS и без Grunt? Что мне нужно настроить в Sublime и как?

Идеальной цепочкой будет:

Создайте сжатый «style-unprefixed.css» при сохранении SASS — запустите Autoprefixer — создайте сжатый «style.css»


css sass autoprefixer sublimetext sublimetext2
person ɐznןɐʞ ɐpuɐʇs    schedule 04.08.2014    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Я не эксперт, но я думаю, что только что понял, как это сделать с помощью сценария оболочки.

Предпосылки:

После того, как все это будет сделано, мы создадим сценарий. Для наших целей назовем его buildcss.sh:

#!/bin/bash
if [ $# == 0 ]
then 
    echo "Usage: buildcss.sh [scss file] [css file]"
    exit
fi

# Create the css file ($2) from a scss file ($1)
# see "sassc -h" for additional options
sassc $1 $2

# Run autoprefixer, overwrite input .css file
# see "autoprefixer -h" for additional options
autoprefixer -b "> 1%" $2

Конечно, если вы используете Ruby SASS (sass) вместо sassc, скрипт следует настроить.

Хорошо, на этом этапе вы сможете запустить что-то вроде ./buildcss.sh style.scss style.css, чтобы проверить и убедиться, что эта часть работает. Тогда это просто вопрос запуска Sublime Text и передачи правильных аргументов.

Для этого создайте собственную систему сборки. Tools > Build System > New Build System... в ST3. Здесь могут быть некоторые отличия между ST2 и ST3, но в ST3 моя конфигурация выглядит так:

{
    "shell_cmd": "/path/to/script/buildcss.sh $file ${file_path/scss/css/}/${file_base_name}.css",
    "selector": "source.scss",
    "line_regex": "Line ([0-9]+):",
}

Как вы могли заметить, я настраиваю исключительно для scss, но если вам нужен sass, вы можете настроить другую аналогичную систему сборки, заменив «sass» на «scss». Эта система сборки также предполагает, что вы храните свои файлы в подпапке /scss, а файлы css должны находиться в подпапке /css на том же уровне.

И вот оно! Всякий раз, когда вы сохраняете файл .scss, SublimeOnSaveBuild делает свое волшебство и запускает нашу пользовательскую сборку, которая, в свою очередь, вызывает скрипт, который вызывает sassc и autoprefixer.

person IanVS    schedule 12.12.2014