SCSS — новая порция глазури от Sass

[Smartfon]

Была бы полезной возможность доступа к свойствам определенного селектора: font-size: #header.font-size

[Smartfon]

Без создания лишних переменных.

[tenshi]

запутаешься же потом ><

[kossnocorp]

sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#extend

[Iskin]

Мне больше по душе синтаксис SASS (обязательные кавычки — это оскорбление от синтаксического анализатора, компьютер сам должен догадываться, что перевод строки — тоже разделение команд). Но SCSS/SASS/LESS — это реально удобный инструмент, упрощающий вёрстку.

[kossnocorp]

Автору тоже, информация 100% ;)

[alprk]

C sass как-то еще не успел плотно поработать, а вот haml просто великолепен, после него erb шаблоны читать противно, хотя привык не сразу

[ed_tsech]

SCSS как и Sass распространяется с haml

[pepelsbey]

Картина получается такая: программисты визжат от удовольствия, а верстальщики до сих пор не понимают этого безумия. Я из последних.

[kossnocorp]

Странно – у нас верстальщики визжат. Хотя наверное вы много поработали c Sass что бы делать такие выводы.

[pepelsbey]

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

Крупный сайт, портал, что-нибудь сложное и собранное на подробнейшем стайл-гайде или хотя бы нарисованное внятным дизайнером. И вот часто вам приходится работать в таких условиях? Дай бог, чтобы в России десятка два человек занимались похожим.

А остальные делают красоту ради красоты — расставляют 4-5 цветов по переменным и считают, что это круто повлияло на эффективность работы.

[kossnocorp]

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

Смысл в читаемости кода и скорости написания оного.

Вместо растущего при каждом уровне вложенности CSS:

#some-long-id-name {
  background: red;
  color: green;
}

#some-long-id-name .other-really-long-class-name {
  font-style: italic;
}

#some-long-id-name .other-really-long-class-name blockquote {
  border-left: 2px solid black;
}

Чистый Sass:

#some-long-id-name
  background: red
  color: green

  .other-really-long-class-name
    font-style: italic

    blockquote
      border-left: 2px solid black

[pepelsbey]

Я не давлю, я просто рассказал о том, как это дело используют знакомые мне верстальщики. Для повышения читаемости есть и другие способы:

#some-long-id-name {
    background:red;
    color:green;
    }
    #some-long-id-name
    .other-really-long-class-name {
        font-style: italic;
        }
        #some-long-id-name
        .other-really-long-class-name
        blockquote {
            border-left: 2px solid black;
            }

Я об этом недавно рассказывавал, надеюсь скоро смонтировать видео:
CSS-менеджемент. Три года спустя (осторожно, трафик)

[kossnocorp]

Я смотрел ваше выступление, но поправде многим лучше не стало.

А ориентироваться только на знакомых верстальщиков использующих Sass, это как-то неправильно.

[pepelsbey]

Личный опыт + опыт знакомых тебе людей (адекватность которых ты можешь оценить) — вот вам и представление о любой технологии.

В общем, повторюсь, я не давлю — просто не вижу смысла в этих заморочках, кроме как описанных случаях.

[kossnocorp]

Я не давлю на то, что вы давите :-)

Простите, но заморочки это множественное повторение и точки с запятой.

Я просто не понимаете почему вы считаете удобство и безболезненная сопровожаемость – заморочки.

Стало сложней? Нет. Проще? В разы.

Что главное дешевле.

[Xp0M0u]

По сути этот пример — тот же Sass, только с кучей не несущих слысловой нагрузки символов и повторений

[pepelsbey]

…а если уровень вложенности у вас вырос больше, чем до трёх — значит вы что-то делаете не так. Тот же яндексовский BEM в принципе не подразумевает вложенности селекторов.

[Metaller]

И к слову говоря, большая вложенность селекторов отрицательно влияет на скорость рендера страницы. Так что этим лучше не увлекаться.

[MCBumf]

использование подобных штук в курпных проектах мне показалось ацким адом по двум причинам:
1) практически полное отсутствие поддержки со стороны наиболее популярных IDE (eclipse, netbeans, idea, phpstorm), а в крупных проектах без таких IDE никуда. Фактически редактирование идет в блокноте. Все IDE-расширения и плагины, которые я видел для SASS крайне убоги даже в плане автодополнения кода (автодополнения переменных я не встретил нигде). Возможно сейчас ситуация поправилась, но до уровня редактирования CSS в IDE SASS и компания врядли доберется.
2) про дебаг css-кода в фаербаге можно забыть. То что вы увидете в фаербаге (стандартный css) будет в корне отличаться от файла SASS, который вы редактируете: строки будут разные, иерархия селекторов другой. Поможет только поиск и то, если не используется вложенность. Когда мне по наследству достался большой (но кривой) проект написанный с использованием SASS, я не придумал ничего лучше, чем заменить все SASS на CSS (копированием из браузера), что бы можно было работать с фаербагом.
Вобщем безумия этого я тоже не понимаю. CSS довольно гибкий и вполне достаточный даже для крупных проектов, а его интеграция с IDE и др. редакторами делает его в разы удобнее любого SASS

[kossnocorp]

1) Vim, TextMate. Emacs
2) https://addons.mozilla.org/en-US/firefox/addon/103988/

[Devgru]

Кстати, верные замечания. Нормальной поддержки LESS в IDEA даже не обещают, хотя в RubyMine вроде бы уже сделали.

[Rooc]

согласен. больше всего бесит именно неудобство поиска в уже готовом less/sass. то ли ты нашел по номеру строки то ли ты ищешь поиском в деревьях. похоже что идет less лесом.

[lamo4ok]

Забавно читать подобные комментарии в начале 2018 года :-)

[ed_tsech]

А не об этом ли «безумии» вы мечтали? pepelsbey.net/2008/02/css-variables/

[pepelsbey]

Я ж не говорю, что это крайне бесполезно. Но не настолько ценно, чтобы идти на другие проблемы, с этим связанные (речь о Sass).

[Devgru]

Вадим, я очень советую взять node.js, плагин less.js и попробовать писать на less. Это действительно удобно для вёрстки.
Часто используемые модули выносятся в миксины и собираются в собственную библиотеку, а всё что нужно дописать — дописывается быстрее чем в чистом CSS (для меня основная причина этого — вложенные селекторы).

[demetr]

По-моему, вероятность запутаться в таком синтаксисе еще больше.

[mnasyrov]

Активно развивается порт Less под .NET: dotless.

[Devgru]

Мне кажется что less.js будет актуальнее, тем более что его создаёт и поддерживает cloudhead — автор оригинального less. Думаю, что с выполнением node.js-скриптов на .net проблем нет :)

[mnasyrov]

Зато dotless будет роднее для asp.net, чем less.js + node.js + mingw :)
Для обработки less-файлов у него есть следующие фишки:
— библиотечка для вызова препроцессора из .net кода;
— HTTP handler для получения стилей на лету;
— отдельный бинарь для формирования стилей, например, при компиляции релиза проекта.

[Devgru]

Ок, тогда удачи этому проекту :)

[FTM]

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

[Kirk]

Фантазии у них не хватает как можно расширить css.

[banderlog]

есть мнение что все относительно, кому нравится то все равно будет ставить и юзать haml, кому не нравится\не пишет на RoR не будет. Остальное холивар

[NLab]

Хочу! Заверните две пожалуйста.
Действительно удобный способ. Привыкать всего ничего, а время экономит в разы, как при создании, так и в дальнейшей работе с.