Я прочитал всю документацию SASS на сайте sass-scss.ru. Как научиться эффективно пользоваться всем этим?

Question

[alexandrnevajno1]

Кроме переменных, миксинов и расширяемых классов мне все кажется бесполезным. Помогите увидеть в этом полезные инструменты.
Может, есть какие проекты - готовые шаблоны. Чтобы почитать код и посмотреть, как там все сделано. Понять, где и что можно эффективно применить.

Comments

[Иван]

Тоже самое я испытал когда прочитал первый,приходит со временем,там нет ничего сложного :)

Например разбивать css на несколько файлов,а при сборке они собираются в один,в переменные цвета или размеры шрифтов, & использовать когда бем пишите,и много ещё другого :)

[alexandrnevajno1]

Иван, значит, теперь нужно еще и БЭМ изучать? я его не знаю.

[Иван]

alexandrnevajno1, да да,надо,ещё всего много предстоит освоить)

[s-jet]

alexandrnevajno1, Да все эти вспомогательные фичи бэмы, гульпы, сасы и прочее осваиваются за 2 дня и во время работы так-то. Сосредоточься лучше на JS, вот там действительно непочатый край, особенно вкупе с фреймворками

[Виктория Романюк]

s-jet, а зачем ему запихать голову js-фреймворками, если он может не определился еще чем он хочет заниматься. Самый лучший вариант - выучить толково основы native php и native js, один толковый препроцессор и верстку. Все гениальное просто.
Ну и CMS какую-то на всяк пожарный уже потом после всего. Но фреймворк он будет учить долго и нудно пока не разберется в основах, тем более js-фреймворк.
А работать уже надо. Особенно когда нет времени долго ждать у моря погоды.

(Ты еще скажи ему учить Gulp, Grunt, Composer, Request-ы, ECMA-Script весь и все фичи js вместе с Ajax и jQuery-библиотеками. - У чувака вообще крыша поедет в первый месяц такой нагрузки. )

[triggerfinger]

Виктория Романюк, на кой черт этому сферическому персонажу в вакууме пхп? Вы зачем это гавно советуете не зная ситуации? Или просто проецируете свой опыт на весь окружающий мир?

[Виктория Романюк]

triggerfinger, потому что чувак не знает чем на самом деле хочет заниматься.
И чего вы считает пхп говном?

[triggerfinger]

Виктория Романюк, потому что я не вижу юзкейсов где бы мне помог бы только пхп, а не питон, руби, го, нода или куча микросервисов, облачных вычислений, серверлесс и тд. Так и зачем мне его тогда учить? Присоединится к пузырю Вордпресс?

Answer 1

[Anton Filippov]

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

Попишите 1000 раз один и тот же цвет, а потом дизайнер его изменит и вам придётся менять код в 1000 местах - надоест - начнёте использовать переменные.

Напишите стили на 5000 строк и замучаетесь скроллить туда-сюда - начнёте использовать импорты.

Замучались писать селекторы по 5 классов глубиной? Начнёте использовать наследование (а потом ещё и БЭМ).

Надоест писать @media screen and max-width($width-md) {...} - напишите первый миксин $breakpoint-md {...}.

И Т Д

Answer 2

[Виктория Романюк]

Попробуйте изучить параллельно Less и поработать одну связку и вторую. И выберете что Вам проще в работе. Связки - Less+Bootstrap, Sass + Bootstrap. Вот это реально четко и просто работает и вставляет качественные мозги в программинге.
P.S: лично мне легче и эффективнее, и проще в работе использовать Less+Bootstrap.
Тут как говориться, на вкус и цвет..

Comments

[triggerfinger]

Вставка качественных мозгов в программинге посредством Less+Bootstrap - ЭТО ГЕНИАЛЬНО!!!

В ЦИТАТЫ!!!

[s-jet]

triggerfinger, это адъ!

[triggerfinger]

s-jet, это ютуб поколение врывается в IT)))

[profesor08]

А вдруг речь про Bootstrap 2, где как раз на less.

[Виктория Романюк]

profesor08, а что кто-то запрещает юзать Bootstrap 3 + Less? Тем более если оно работает хорошо.

[Виктория Романюк]

triggerfinger, я предложила и Sass+Bootstrap, и Less+Bootstrap. Это обе рабочие связки которые используются на проектах где предвидется большое увеличение кода. И все зависит от ПОТРЕБНОСТЕЙ ПРОЕКТА. Если на проекте выгоднее использовать Sass, - Богу милости, юзай, если Less - какие проблемы, он не плохой.

По поводу PHP... отдельная тема. PHP далеко не говно, тоже самое можно сказать про JavaScript что он дырявый и его легко сломать.

Все зависит от потребностей конкретной задачи и ее целей в функционале. Есть функционал который лучше делать только на JS с jQuery и именно на js-фреймворке. Но учитывая какими быстрыми темпами меняется популярность тех или иных JS-фреймворков и с какой скоростью появляются новые, то стоит еще хорошенько подумать над тем "а надо ли это здесь".
То же касается и PHP. Но там ситуация по-стабильнее чем в JS.

[triggerfinger]

Виктория Романюк,

делать только на JS с jQuery и именно на js-фреймворке

Это как? И фреймворк и jQuery? Супер. И заодно Бутстрап и Вордпресс. Обожаю вас!

[Виктория Романюк]

s-jet, кому как. У кого ровные руки и кто знает как и куда какие инструменты применять, - тому норм и легко. :)

[Виктория Романюк]

triggerfinger, Я имела в виду что нужно понимать что и куда лепить. Что иногда не нужно учить фреймворк а можно обойтись только одним JS и jQuery с Бутстрапом.
А по поводу Вордпресс - нужно сначала с чего-то начинать. На ВП работает хорошо миллионы сайтов, он не такой говнокод как Джумла. И если с него начать, то потом с фреймворком будет разобраться немного проще.
Хотя всеравно эти вещи сложно поставить на одну линию. Фрейворк изучать куда дольше и требуется полного погружения в язык + АПИ, плюс учится самому писать велосипед с помощью того же фреймворка что не всегда есть быстро.(если у тебя мозги работают со скоростью пули, то тогда будет реально быстро)

А CMS уже готовый велосипед, только почитать доки и покурить ман плагинов, и сделать первый свой сайт.
Ну если уж оочень большая страсть, можно еще вкурить как писать свою тему или свой плагин на CMS и попробовать что-то нормально работающее нашкрябать.
И аж после браться за фреймворк какой-нить.

[triggerfinger]

Виктория Романюк, ну вы же понимаете, что цикл этих "миллионов" сайтов ограничен и им на смену придут другие вещи? Зачем мне учить пхп, если я могу просто юзать API WP, кучу API CMS (Contentful, например), GraphQL сервис, или вообще сделать бэк API на Ноде (REST или GraphQL) и юзать с любым фронтенд приложением на любом фреймворке? И где в этом будущем ваш Вордпресс и jQ?

Answer 3

[ValeraValera]

Для того чтобы понять дзен Sass нужно сразу сверстать 5-10 макетов без препроцессоров на чистом CSS , с опытом начнет приходить понимание где операции самые нудные , какие хочется делать быстрее и так далее , надо почувствовать боль тех кто придумал этот инструмент, тогда будет четкое понимание зачем это нужно и как использовать. А сразу если начать верстать на Sass - понимания не будет.
Макеты , если что здесь можно взять https://htmlacademy.ru/blog/tags/%D0%BF%D0%BE%D0%B...

Answer 4

[Дмитрий Pacification]

Я Эффективно начал его использовать в сочетании с методологиями. Конечно же BEM ну и мне очень зашла SMACSS.
ТАк же мне помогло понять как лучше кодить исходники других разработчиков.
Есть вариант когда ты объявляешь класс
.multiselect {
.multiselect__item {
....
.multiselect__item--hover { ... }
}
}

Так легче искать с Ctrl+F,

Есть другой вариант:
.multiselect {
&t__item {
....
&--hover { ... }
}
}

Попробуй оба подхода, определи что больше нравиться и юзай на здоровье)

Comments

[alexandrnevajno1]

.multiselect {
.multiselect__item {

Надо сначала закрыть .multiselect, иначе будет каскад. Или можно как-то не закрывать?

[Дмитрий Pacification]

Ну в принципе можно и закрыть. Я просто так делаю потому, что раньше ставил такую штуку &__item. А оно работает только во вложенных селекторах