Как искать стили для SASS?

Question

[Алексей Коновалов]

Всем привет! Я пытаюсь изменить чужой код и вижу что на странице в силях используется стиль .image-tool__image-picture
Естественно в SASS он разбит на части где компилятором собирается одно полноценное название. Подскажите как искать в таком случае в исходном коде стиль, обычным поиском в IDE это невозможно, т.к. он будет разбит на какие-то части.
Я уже совсем не понимаю преимуществ SASS когда изменение кода превращается в сплошные поиски стилей, И уж тем более их изменение, когда параметры одного стиля так же могут быть разбросаны по коду. вот такими же кусками как в примере на картинке.
Друзья, помогите разобраться, я уже хочу бросить этот SASS и просто написать на обычном CSS где у меня никогда не возникало проблем.

Comments

[Алекс Глебов]

Плохая практика так использовать амперсанды. Если дальше будете работать с этим кодом, то имеет смысл все амперсанды заменить на классы целиком. Кроме мелочей вроде модификаторов и ховеров.

[FrelFrloich]

Почему плохая? у вас есть блок, у блока есть preloader, в чём проблема найти? ну и css map как бы не лишнее. Никогда не было проблем с поиском чего либо в scss, если адекватно сделано.



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

[FrelFrloich]

Опять таки же, перепроверил, не понимаю в чём трабла.

[Сергей delphinpro]

Офигеть... Да просто в разметке нажмите мышкой на класс с зажатым контролом и IDE вас перекинет в sass-файл.

Второе. Следуйте принципу: один блок – один файл. с одинаковым именованием. Тогда вам нужно просто найти файл по имени блока.

Третье. Используйте сорсмапы, тогда devtools в браузере будет показывать исходные sass файлы и строки в них.

Вам не нравится sass? Вы просто не умеете его готовить =)

[Алекс Глебов]

FrelFrloich, В том, что вставить класс в поиск по проекту и сразу оказаться в нужном месте это быстрее, чем искать файл, а потом строку. И вы не напрягая мозг окажитесь в нужном месте, в любом, самом незнакомом проекте.
Подход с амперсандами это "сделал и забыл", редактировать это потом ужасно. А без карты кода это вообще в разгадывание ребусов превращается.

[Ankhena]

Друзья, помогите разобраться, я уже хочу бросить этот SASS и просто написать на обычном CSS где у меня никогда не возникало проблем.

Если вам совсем не повезло, стили не разбиты по файлам на блоки, по css прошелся плагин для комбинирования media и sorcemap не работает, то вам можно только посочувствовать :(

Если так, то один из наиболее простых способов: найти класс в разметке, там кликнуть по нему с зажатым ctrl, редактор перенесет вас к стилям или покажет варианты.

Но не стоит переносить эмоции к разработчикам на препроцессор, он тут не при чем.
И да, хорошая практика: не использовать & для элементов.
Разрешается для модификаторов, псевдоэлементов и псевдоклассов.