Как компилить SASS без нестинга?

Question

[art style]

Я пишу в SASS
использую многоуровневый нестинг для собственного порядка и выглядит это довольно всрато с точки зрения задрота айтишника ну и в целом для браузера
после компиляции получаю что-то вроде

.navbars #slidebox .nav-slide .contact-logo .coin .side, .navbars #slidebox .nav-slide .contact-logo .coin:before, .navbars #slidebox .nav-slide .contact-logo .coin:after {

вот я сижу и думаю, а что мой препроцессор не умеет компилировать без нестинга? зачем он повторяет то что я пишу в SASS и нестинг в том числе? почему он не может вынести отдельный класс в отдельную строку чтоб я не видел нестинга?
такое возможно вообще? пишу в vscode и использую live sass compiler

Comments

[Ankhena]

Может, вам на БЭМ посмотреть, называть нормально классы, раз уж они, по-вашему, зависят от родительского блока и использовать &?

.nav {
  background: #000;
  &__item {
    color: #f00;
  }
}

скомпилируется в

.nav {
  background: #000;
}
.nav__item {
  color: #f00;
}

Правда, с очумелыми ручками можно и там гармошку наделать.

вот я сижу и думаю, а что мой препроцессор не умеет компилировать без нестинга?

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

[art style]

Ankhena, гармошка так ненавистная всем, создает порядок и иерархию. я вижу что в чем лежит и могу видеть какие стили применяются от контейнера к маленькой кнопочке.
вместо того чтобы искать через ctrl+f нужный мне класс я просто добираюсь туда открывая гармошку как в html.
и я сразу вижу стили от маленького блока до контейнера. это очень удобно. но на выходе я получаю гармошку. в идеале было бы:
1. писать и видеть гармошку в sass
2. компилить каждый класс отдельно в css раскрывая гармошку
такое может препроцессор?

[Ankhena]

art style, я написала выше как называть классы, чтобы был порядок без вложенности.
Вы можете не пользоваться БЭМ полностью, можете взять только то хорошее, что вам понравится.
Популярно: нейминг и раскладка блоков по файлам.

Но который раз вы задаете этот вопрос? Пятый? Десятый? Вам все в один голос говорят одно и тоже, но это не помогает. Чего вы ждете?

[art style]

Ankhena, вопрос не про БЭМ и названия классов а про то, может ли препроцессор раскрывать гармошку

[Kovalsky]

art style, "писать и видеть гармошку в sass" - чо такое раскрывать гармошку я не понял, и даже вообще что такое гармошка хз, а вот для того чтоб в инспекторе видеть оригинал .scss/sass вместо css существует sourcemap,

Вы лучше напишите конкретно что вы хотите, с примерами. Так будет проще,

[Ankhena]

art style, нет, чего бы ради он стал это делать и как он должен понять когда вы хотите её оставить, а когда убрать?

Answer 1

[art style]

ответ: SASS не умеет компилить без нестинга. в настройках нет такой функции

Answer 2

[Алексей Ярков]

Вы себе вообще представляете как CSS работает и для чего нужна вложенность в препроцессорах?
Вот для того и нужна, чтобы не писать руками такие селекторы, длиной в километр.

Comments

[art style]

а зачем их писать в километр? когда знающие люди говорят что надо вообще писать чистый css и каждый класс в отдельном блоке без вложенности?

[Алексей Ярков]

art style, ну так и пишите без вложенности (нестинга) и на выходе получится не такое уродство ))

[art style]

Алексей Ярков, нестинг нужен для порядка и иерархии

[Алексей Ярков]

art style, всё верно. И в итоге получаем на выходе длинные селекторы ) За удобство приходится платить.

[art style]

Алексей Ярков, так мне тут пишут что браузеру тяжело это жевать. есть какие-нибудь тесты где сравнивается скорость чтения браузером каждого класса отдельно и в гармошке? или стоит забить на это и гармошка тоже быстро читается браузером?

[Kovalsky]

art style, "стоит забить на это" - конечно забейте. Быстро решительно забейте, ибо это давно так работает и никто не умер пока. Браузеру критически пофигу отдельные у вас там правила или в гармошке, а вообще-то скорее всего эта гармошка наоборот быстрее работает, ибо оптимизирована. В 2021 начать сомневаться в целесообразности sass/scss это как усомниться в полезности бипедии и начать искать ей альтернативы

[art style]

Kovalsky, а меня тут буржуи травят за sass. жесткий шейм в дев чате за это. говорят чтоб писал чистый css и каждый класс в отдельном блоке

[Kovalsky]

art style, это у них траллиризация такая, траллирование, траллинг

"знающие люди говорят что надо вообще писать чистый css и каждый класс в отдельном блоке без вложенности" - это не знающие люди, это трали которых лучше не слушать. Разве что фраза "каждый класс в отдельном блоке без вложенности" действительно в какой-то мере осмысленна: конечно же при одинаковых условиях селектор .first-class выполнится быстрее чем .parent .first-class и .qwe .asd .zxc .wer .sdf .xcv, и это вроде довольно очевидно, но париться из-за этого уж точно не стоит, тк если вас вдруг не устраивает что-то в скомпилированных вами стилях вы можете просто взять другой компилятор, который может больше чем ваш старый. Например google sheets

[art style]

Kovalsky, нефига. они пишут в чистом css и шеймят меня за sass. еще тут начали пиарить эту ссылку
https://css-houdini.rocks мол смари че умеет. сасс гамно.

[Kovalsky]

art style, ну да, бывает в жизни и такое, вы нашли каких-то долбоёбов которые не очень понимают зачем нужен SASS/SCSS и теперь они пытаются бравировать перед вами своим невежеством. Ни один пример по вашей ссылке не умаляет значения и полезности SASS, там просто описаны некоторые новые фичи CSS и Extensible Web Components. Конечно SASS реализует какие-то фичи которых когда-то давно не было в CSS, а теперь они есть, и действительно нативные их вариации использовать целесообразней чем синтетические, но это всё никак не влияет на объемы пользы причиненной вашему проекту SASS. Просто пара мелких фич которые есть в SASS к 2021-ому году уже реализованы и в CSS. Вы можете их использовать, а можете не использовать, разница между одним и другим вариантом будет максимум в несколько десятков секунд как для разработки, так и для сборки. Можем проверить на деле если хотите)

Возможно речь о том что sass не взаимодействует напрямую с extensible web components, и сейчас существуют фреймворки которые совмещают в себе и то и другое, но это в 2021 году вроде пока тоже не очень важно,

"нефига" - фига; это трали, а вы есть траллируемый, admit

[Froggyweb]

Если это твой код на выходе буржуи правы может тебя задолбает писать классы и хреновые селекторы.
в препроцессорах есть масса хорошего миксины, условия, циклы
они прекрасны при использовании БЭМ
но......

[art style]

Kovalsky, ну да хотелось бы проверить, как код из 3000 строк с вложенность в 10 колен будет работать против стилей отдельно в каждом блоке. просто реально я не нашел ни 1 теста и доказательства того что 10кратная вложенность гораздо медленней и хуже хваленой однократной, сам разбить миф не могу но сомнение как бы закралось. может быть браузере реально тяжело обрабатывать такие стили. если не на десктопе то на мобилке точно?

[Ankhena]

Kovalsky,

Браузеру критически пофигу отдельные у вас там правила или в гармошке, а вообще-то скорее всего эта гармошка наоборот быстрее работает, ибо оптимизирована.

Вы хоть погуглите как браузер обрабатывает вложенные селекторы...

[Kovalsky]

art style, ну не вопрос. Думаю в интернетах куча таких примеров, поищите. Я тоже поищу, но чуть позже,

Ankhena, когда они появятся в современных движках - обязательно погуглю, а пока термин nested selectors (несмотря на то что Мержевич невозбранно использует его на своих сайтах) существует только в рамках препроцессоров я могу трактовать слово "гармошка" абсолютно любым образом, тк тс не привёл ни одного примера. Если гармошка это то что тс показал в примере со слайдбоксом, то да, конечно, такие селекторы выполнятся в общем случае медленнее чем селектор из одного жирного класса, но даже и такой подход не освобождает от ответственности следить за количеством сущностей, ибо структуру элементов можно сделать такую что никакие оптимизации не спасут. Полон тостер этому примеров)

[art style]

Kovalsky, Ankhena, Тесты производительности кривого и прямого кода?
нашел тесты на производительность и действительно, не стоит парится и можно писать каскадами.
лишний раз убедился что это очередной IT дроч