Арсений Матыцин

Я думаю универсального ответа нет. Но могу рассказать, как мы собираем. Для статики создаем папку типа frontsources прямо в корне. Там все, и sass и «сырой» js, и изображения. Далее настроенный gulp уже все разбирает, куда надо. Стили в корень замещая файл style.css и т.д.
Browsersync мы не используем для работы с WP, так что тут не подскажу. Для отработки всея и всего в проекте мы локалим его либо на Open Server, ну или для работы сообща на наш сервак.
В случае с работы с серваком удобно использовать синхронизацию кода с обработкой gulp прямо на сервере, но это реально, если у вас есть полный контроль к серверу, ну или хотя бы возможность установить там необходимое окружение и запускать его. Речь о ноде и gulp, соответственно.

1. Нет смысла перечислять все классы, которые висят на кнопке
2. Не забывай, что CSS — это в первую очередь каскадные стили, т.е. приоритет имеет первая запись, так как она написана для конкретного случая, для изображения
3. Это не синтаксис SASS, это обычный CSS в файле с разрешением .scss. Второе описание должно быть внутри первого в формате &:hover
4. Соблюдайте культуру написания кода, товарищ, стыдно за вас.

button.sigleclass { /*Если прямо совсем уникальная кнопка, имеет смысл повесить id*/
    background-image: linear-gradient(to bottom, #6eae45, [второй цвет]);
    &:hover {
        background-color: #fff;
    }
}