С чего начать изучение SCSS/SASS?

Question

[Alexander Karpov]

С чего начать изучение SCSS/SASS? Так же бы хотелось узнать каким приложением пользоваться?
CSS отлетает на зубок, узнал о SASS и решил попробовать, но просмотрев видео, а так же всевозможные примеры, я понял что у меня мало что отложилась. Хотелось бы получать информацию не урывками, а постепенно с наращиванием скила, либо все и сразу, так что бы сесть и разобраться.
Возможно есть онлайн сервис, книги все что угодно приму во внимание.

Answer 1

[Сергей]

Лучше всего конечно официальная документация, если вы знаете английский. Если нет, придется собирать информацию по крупицам и самому ее систематизировать.
Помимо Sass, еще необходимо изучить и Compass. Немного статей, по которым учился я: Первая, Вторая(на этом сайте много статей, поищите как следует), третья.

Comments

[Сергей Протько]

Не совсем согласен что так уж необходимо изучать Compass. Autoprexier мне импонирует больше.

[Maksim Zverev]

@Fesor Compass это не только развертывание вендорных префиксов, для меня основная фича compass - это работа со спрайтами. Другое дело, что изучать там толком нечего, достаточно 1 раз пробежаться глазами по списку функционала, а потом иногда обращаться как справочнику по миксинам.

[Сергей Протько]

@m1skam да, пожалуй это единственное сильное место компаса. Если честно удобнее реализации я и сам не видел.

[Сергей]

@m1skam , тоже самое, работа со спрайтами - основной критерий выбора в пользу Compass.

[Сергей]

@Fesor не согласен, что спрайты это единственное сильное место Compass. Какие у Autoprexier есть сильные стороны по сравнению с ним?

[Сергей Протько]

@Hando autoprefixed - это кодогенерация, то есть не нужно вообще ничего не нужно сзнать, просто сказать ему взять мой css и добавить туда все что нужно для поддержки определенных браузеров. На миксинах такого не сделать (во всяком случае это будет не так удобно). Остальные функции Compass (кроме спрайтов) меня не особо заинтересовали.

[Alexander Karpov]

@Fesor @Hando возможно я сейчас скажу чушь несусветную, а что если использовать Sublime Text?
Плагинов там много, да и все в одном месте и html и css и т.д.

[Сергей]

Я использую сайблайм текст, но это не освобождает от установки и настройки в случае с SASS, самого SASS и Compass к примеру, ну и Ruby, если у вас он не стоит. Вы путаете редактор и препроцессор

[Сергей Протько]

SASS и Compass есть под node.js.

[Alexander Karpov]

@Hando нет я их не путаю. просто зашел разговор на чем все это действо делать, по этому решил спросить)

Answer 2

[Дима]

https://sass-scss.ru - документация на русском

Answer 3

[uaSaint]

Я понимаю, что оживляю не очень нужную тему, но несколько удивили ответы (мягко говоря) и раз уж она появляется в поиске гугла одной из первых, вынужден заняться некромантией... Начнем с того, что именно SASS используют такие компании, как eBay, bet365.com, BBC, Instagram, LinkedIn, Square, and Groupon и т.д. Почему? Потому, что scss -это по сути будущее css, т.е. то, что в будущем в этот стандарт войдет и потому, используя его сегодня вы думаете о своем будущем. Никто ведь не сомневается, что переменные, миксины и вообще все плюшки препроцессора в скором (относительно) времени будут доступны в css? Какие еще нужны аргументы, почему выбирать именно его? Ну а как учить... доки конечно (на перевод ссылку уже дали, но я бы предпочел для начала учить английский, иначе забыть о этом бизнесе). Или книги вроде 'SASS and compass for web designers', практика и опять таки -доки... Никакая книжка и курс вам не заменят справочника в документации. Основы не трудно осознать из стандартного tutorial. Начните использовать переменные и стандартные миксины compass, возможно grunt для автоматизации и просто привыкайте. Далее достаточно иногда читать доки и находить полезные для себя фичи, таким образом отращивая бороду...

Comments

[Сергей Протько]

Хотите более прозаичную причину почему эти проекты все еще используют scss? Потому что на тот момент, когда начиналась разработка, ничего лучше небыло, а сейчас переводить стили на что-то другое не имеет практической пользы. Да и добавить постпроцессоры какие-то сверху проблемы не составляет.

Взять тот же compass - он не нужен сегодня. Совсем. Все эти "полезные" миксины слихвой заменяют инструменты на базе postcss (autoprefixer тот же) и прочие постпроцессоры, и при этом поддержка стилей упрощается в разы.

У меня складывается впечатление что вы вознесли scss на какой-то пьедестал, как будто бы это что-то важное, а как по мне - совсем не важно less, scss или stylus использует разработчик. Цель у этих инструментов одна, так же как и методы достижения этой цели.

[Сергей Протько]

Уточню первый абзац - есть такая штука - привычка. Я вот года 4 назад освоил less и мои нужды он покрывает целиком и полностью. То есть заводя новый проект я сразу подключаю less и т.д. Но у меня нет никаких проблем с тем что бы использовать scss (скажем если проект начинал не я, или UI фреймворк написан на scss), или что-либо другое.

Для подавляющего большинства задач возможности всех популярных препроцессоров приблизительно одинаковы.

[uaSaint]

Сергей Протько: дело в том, что я отвеал на конкретный вопрос по поводу sass, и лично я вообще не разделяю его с less, поскольку считаю, что изучив одно, проблем со вторым не будет. Разница примитивна и не существенна... более того я склоняюсь к мнению о том, что на первом месте стоит задача, а не технология. И именно благодаря тому, что они так взаимозаменяемы (по крайней мере в моей голове) я не вижу смысла в stylus. Все же я подразумевал в контексте нового пользователя, для которого scss будет более чем достаточно. Если стандарты разойдутся или если будет возможность исключить less из головы, я уверен, что с успехом буду работать с новыми стандартами pure css, понимая scss, но оставаться исключительно с less -не вижу возможным. Т.е. вывод для меня прост, да сегодня less и sass -взаимозаменямы, но глядя в будущее, я могу взять того, кто категорически на сторое sass на работу, но не того, кто есть адепт исключительно less. Stylus я вообще не видел очень давно и рассматриваю подобное как спам для своего мозга, в котором не так много свободного места...

[Сергей Протько]

uaSaint: Я полностью согласен с мыслью что "главное задача а не технология", технология это лишь деталь. И я категорически против "адептов" чего-либо. Как говорится A foolish consistency is the hobgoblin of little minds и все такое.

смысл stylus чуть более "удобном" синтаксисе. И удобства эти весьма субъективны. Я тоже не совсем понимаю зачем нужен стайлус. Но народу нравится делать свой варианты синтаксиса под себя. И у этих людей есть свои предпочтения и с этим надо просто смириться.

Спам для могза это вообще концентрироваться на конкретики без оперирования абстракциями, принципами и идеями. Знание реализации без понимания идеи вообще ничего не стоит как по мне.

[uaSaint]

Сергей Протько: к слову по поводу compass, я конечно не сомневаюсь, что уже есть достаточно альтернатив, но зачем их искать, когда он работает. К примеру возможность сжатия кода или этого самого сжатия отмены, с целью отладки -удобная штука.

К тому же там есть полезные команды к которым просто привыкаешь, даже просто создавая проект compass create, помогает лентяям вроде меня. Плюс вполне удобно использовать вместе с тем же grunt. Ну а если к нему привыкаешь без отвращения, значит хороший инструмент.

Мне кажется время его жизни на сегодняшний день и все еще актуальность, всеже говорит о надежности и это скорее плюс.

[Сергей Протько]

uaSaint: grunt? он тим мертв.

Я говорю о том что 90% задач для которых применяли компас - миксины для префиксов. Еще 9% - спрайты. Для первого - autoprefixer лучшее решение на данный момент. Для второго - отдельные инструменты (профит в том что они не привязаны к конкретному препроцессору).

[uaSaint]

Сергей Протько: Мертв.. ну и что? он отлично решал и решает свою задачу, задача не изменилась, расширять ее у меня нет необходимости -он работает. Да и я могу использовать тот же gulp, это не проблема, я просто не фанат всех этих тулзов и если уж использую -то довольно ограниченно для минимума задач, опять же не привязанны к отдельному препроцессору для меня спорный аргумент, я уже пояснял почему предпочитаю sass и главное то, что я считаю, что scss -это будущий стандарт css. Я буквально считаю остальное спамом. Хотя и не говорю, что в случае необходимости не готов использовать тот же less. Compass -это вообще просто инструмент который использую просто по привычке и довольно примитивно, миксины я их не использовал очень давно. И я не вижу повода для его смерти -он поддерживается и используется, не развивается для ширкой публики -не страшно, я и не гонюсь за медийностью и попсовостью технологий. Вон bootstrap 4 уже будет работать с sass и даже не смотря на то, что у них явно были причины довольно масштабного изменения я сильно сомневаюсь, что less умрет. Все подобные технологии выростают из команд, которые разрабатывали их под свои задачи, выстрелило -ок, есть желание развивать и поддерживать сообщество -ок, нет -ок, задачи сообщества широкие, но это не значит что игнорируя их он не решает своей задачи.

[Сергей Протько]

uaSaint: это ваше мнение, мое же мение - все эти ненужные тулзы ускоряют разработку при правильном применении.

Что до "смерти less" - он как бы не умрет, во всяком случае не раньше чем сама идея препроцессоров сдастся идеи постпроцессоров.

[Артём Кузнецов]

Прикольный совет)))

Answer 4

[Александр Петров]

А вот такой вопрос: почему именно SASS? Я бы на вашем месте посмотрел бы в сторону Stylus'а. Сам от SASS к нему пришел.
По поводу изучения: изучите заодно Grunt \ Gulp, настройте типичный шаблон проекта, автокомпиляцию при изменении, заодно сразу можно прикрутить autoprefixier и всякие другие вкусности.
После того, как шаблон настроите - просто верстайте, использую то, что настроили. Привыкнется быстро.
А если просто почитать теории, то, да, мало что в голове останется.

Comments

[Alexander Karpov]

Почему именно SASS, просто мне его неоднократно советовали, плюс ко всему я и сам натыкался на всевозможные новости, примеры и т.д. но никак времени не было познакомиться с ним более подробно. Про Stylus'а впервые слышу, но статья на хабре заставила задуматься.

[Сергей]

На мой взгляд Stylus имеет гораздо меньшее комьюнити, соответственно меньше и материалов по нему, а значит изучение будет идти дольше. Помимо этого, какие конкретные плюсы может дать Stylus новичку в сравнении с SASS? Вот преимущество SASS для начинающего очевидно - синтаксис SCSS который практически ничем не отличается от css.

[Alexander Karpov]

@Hando согласен, поискав в интернете я мало что нашел о Stylus, и судя по всему разработка идет медленно, когда о SASS/SCSS написано больше.

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

Answer 5

[Alio]

Рекомендую отличные понятные уроки по Sass от Lynda.com, руссифицированные - тут. Для начала отлично, чтобы каши в голове не было. Ну а потом садишься и ваяешь проект, применяешь знания.

Answer 6

[yttrium]

если CSS отлетает на зубок то лучше смотреть в сторону LESS, синтаксис которого напоминает сам CSS, совместимость на уровне "любой CSS - валиден", кроме того компилить *.less можно в браузере

В дополнение к теме о LESS. В сравнении с SCSS существуют мнения, что SCSS обладает рядом характеристик превосходящих LESS. С интересным сравнением технологий можно ознакомиться на пример здесь. Но я бы разделил эти "подходы" по их происхождению. SCSS растет из мира Ruby, LESS растет из мира Nodejs. Считаю правильным подходом использовать тот инструмент к какому сообществу ближе проект.

Comments

[Сергей Протько]

С компиляцией в браузере есть масса нюансов. Не рекомендовал бы ни для разработки ни для продакшена.

[yttrium]

продукт на сколько я знаю не такой уж и сырой.. продакшн да, сам в браузере не люблю компилить.. всякое может быть.. но LESS обладает фишкой на стороне клиента такой как встроенный javascript, что позволяет в свою очередь делать адаптивную верстку.
маленький аргумент в пользу LESS - это выбор bootstrap

[Сергей Протько]

@yttrium слишком маленький аргумент. Да и javascript - сомнительная фишка, хотя бывает полезной, да.

p.s. сам использую less + autporefixer. Мне хватает.

[Сергей]

@yttrium то есть по вашему синтаксис SCSS не напоминает CSS? Совместимость у SASS, точно такая же, в SCSS любой css валиден. Зато у Less нет ни массивов, ни циклов, ничего. Это обрубок, а не технология.

[yttrium]

@Hando убедительно.. буду посмотреть SCSS

[Maksim Zverev]

@yttrium эээм :) если не ошибаюсь, изначально less писался на ruby, но в последствии был портирован на js и разработка теперь ведется на js. Есть sass на node.js есть less gem для ruby, мое мнение, что нет разницы к какой платформе ты приверженец.

[yttrium]

@m1skam могу тоже ошибаться, изначально на php.. Приверженец какой технологии это не совсем то к чему ближе проект

Кто-то в комментариях на хабре дал интересную ссылку https://gist.github.com/chriseppstein/674726

[Maksim Zverev]

@yttrium lesscss.org/about таки ruby ;)

Не хотелось бы разводить холивар, просто мой взгляд, что если это не что то узко заточенное, типа BEM-HTML, который под Ruby не существует (вроде как), то можно и в Ruby использовать Less, а в Node.JS sass. Компиляторы то есть и там и там, пользователю же все равно, кто собирает конечный css. Дело привычки и знаний и выбора команды разработчиков :)

Answer 7

[yarikus]

Всегда считал, что изучать любую технологию нужно в процессе. У вас есть сайт? Если нет, тогда сделайте его с использованием SCCS. Открывайте документацию и начинайте творить. К тому же технология не сложная и чтобы начать использовать её почти ничего не требуется. А документация только официальная, плюс ответы на Тостере/Stack Overflow.

Comments

[Alexander Karpov]

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

Answer 8

[Anton Yatsenyuk]

Для начала подойдет и Prepros. Отлично всё компилирует, есть лог ошибок. Есть поддержка Compass framework (Для любителей GUI).
Отличный пример использования Sass и его "плюшек"

Answer 9

[nort1986]

Ну смотри, если ты начинающий разработчик, то тебе сюда:
loftblog.ru/tag/sass
sass-lessons.ru
www.unix-lab.org/posts/sass
Если есть какой-то опыт, то:
sass-scss.ru/guide
sass-lang.com
Но тут информация дается в виде справочника, если ты новичок, то тебе трудно будет. Там сухо все описано, и много лишнего.

Answer 10

[Владимир Голосай]

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