Sass - основы CSS препроцессора (variables, mixins)

Поділитися
Вставка
  • Опубліковано 1 лют 2025

КОМЕНТАРІ • 128

  • @_LEXX_
    @_LEXX_ 10 років тому +15

    После выражения "кудрявые скобки", сразу захотелось поставить лайк, поставил! =)

  • @gatilinmaxim7741
    @gatilinmaxim7741 10 років тому +3

    Я думаю этот канал очень перспективен, потому что вы делаете обзоры на более применимые и крутые технологии, чем большинство каналов на UA-cam, посвященных вебу) Спасибо вам большое!

    • @uwebdesign
      @uwebdesign  10 років тому

      Спасибо за комментари!

  • @iDobroslavin
    @iDobroslavin 9 років тому +2

    Огромное спасибо. Даже не знал, что ТАКОЕ БЫВАЕТ! Теперь буду изучать sass! Прямо сейчас скачаю его и настрочу что вы написали!

    • @salatproduction
      @salatproduction 9 років тому

      Иван Доброславин Не стоит. Крути less.

    • @iDobroslavin
      @iDobroslavin 9 років тому +1

      Почему Less?

    • @justspartak
      @justspartak 8 років тому +1

      Кстати да, почему less?

    • @denscherbakov
      @denscherbakov 8 років тому +2

      Ребят, кто знает почему less?

  • @vitaliy5729
    @vitaliy5729 10 років тому +1

    Понравилось, очень познавательно. Мягко говоря Удивлен такой технологией) Спасибо за урок!

    • @uwebdesign
      @uwebdesign  10 років тому

      Спасибо за комментарий! Смотри другие наши ролики, там тоже много всего интересного.

    • @vitaliy5729
      @vitaliy5729 10 років тому +1

      Да, да, этим сейчас и занимаюсь)

  • @alexmoda7445
    @alexmoda7445 10 років тому +2

    Шикарно, никакой воды нет, все по делу.

    • @uwebdesign
      @uwebdesign  10 років тому

      спасибо за комментарий! =)

  • @white73h4
    @white73h4 10 років тому

    Шикарно! все понятно и просто! без лишней воды! Спасибо

  • @user-nc9yu7ry8i
    @user-nc9yu7ry8i 9 років тому +50

    поставьте скорость на 1.25 и можно смотреть

    • @hey-yo5674
      @hey-yo5674 9 років тому +13

      +Адильхан Абдисаметов можно смело 1.5.

    • @Nodorgrom
      @Nodorgrom 9 років тому +5

      +Адильхан Абдисаметов спасибо, совсем забыл, что есть возможность просмотра в ускоренном режиме, поднял себе настроение при просмотре на скорости 0.5 =)

    • @holovniadmytro
      @holovniadmytro 7 років тому

      Спасибо, на 1,25 реально веселее стало

    • @kpogodin
      @kpogodin 6 років тому +1

      1.5 !

  • @razzo3107
    @razzo3107 10 років тому +1

    Чувак, я не знаю кто ты и что ты, я случайно нашел твое видео, но большое тебе спасибо!!!!!! Я только начинаю вливаться в верстку и веб вообще и теперь многое прояснилось

    • @uwebdesign
      @uwebdesign  10 років тому

      Спасибо за комментарий! Следи за нами здесь: vk.com/uwebdesign и здесь: uwebdesign.ru.

    • @razzo3107
      @razzo3107 10 років тому

      Чувак, уже ;)

    • @uwebdesign
      @uwebdesign  10 років тому

      В этот четверг будет видос про Sass, аналитика о том, куда двигается препроцессор, к чем готовиться и так далее.

  • @uwebdesign
    @uwebdesign  11 років тому +13

    Guys, guys, guys! Скорей смотрите новый скринкаст на тему препроцессора #SASS, таких приколов вы не видели! Наконец-то вы научитесь нормально писать код на трендовом #Sassscript и #CSS и будете получать много удовольствий от самого процесса! Чек ит!

  • @zakiro4277
    @zakiro4277 9 років тому +9

    Лучший урок по сасс на русском из всех.

    • @uwebdesign
      @uwebdesign  9 років тому +3

      +Ildar Zakirov спасибо! =)

  • @Святошинскийрайон-х2ъ

    Спасибо, хороший урок!

    • @uwebdesign
      @uwebdesign  9 років тому

      +Святошинский район (Святошинський р-н) пожалуйста!

  • @ВладимирГолубь-ы4в
    @ВладимирГолубь-ы4в 9 років тому +1

    Спасибо за видео !

    • @uwebdesign
      @uwebdesign  9 років тому

      +Владимир Голубь пожалуйста! Всегда рады стараться. =)

  • @valkyrie22fi
    @valkyrie22fi 7 років тому

    Спасибо, очень понятно объясняете.

    • @uwebdesign
      @uwebdesign  7 років тому

      +Анастасия Фиголь пожалуйста! 😊

  • @anime.x_ror
    @anime.x_ror 9 років тому +1

    твой инглиш из перфект) спасибо за урок

    • @uwebdesign
      @uwebdesign  9 років тому

      +Андрій Тимченко спасибо! =)

  • @valerysemenencko4184
    @valerysemenencko4184 11 років тому

    Даааа... )) Про Compass хотелось бы. Но еще больше - про Bourbon и Susy, совсем не знаком (в отличие от Compass) с ними. Сравнение и возможности.
    Еще хотелось бы спрайты и grid в Compass как делать )) А также что такое вертикальный ритм и как его делать в Compass ))

    • @uwebdesign
      @uwebdesign  11 років тому

      Про Bourbon будет нескоро, но будет. про Susy - обязательно, про версию 2.0 в которой очень много пререботали.
      Гриды в компасе не видел, для этого как раз Susy и есть. А про вертикальный ритм и как делать в компасе - моя любимая тема! :D

    • @valerysemenencko4184
      @valerysemenencko4184 11 років тому

      uWebDesign тем более! раз любимая, значит хорошо ее знаешь. поделись своими знаниями с теми, кто этого не знает, но хочет знать. например, я ))
      ждем-с с нетерпением ))

  • @accountmy9287
    @accountmy9287 9 років тому +1

    Здравствуйте.
    Подскажите пожалуйста, что все же лучше использовать SASS или LESS, и в каких случаях? Возможно у Вас есть видеобзор с сравнениями (я не нашел), я думаю эта тема будет интересна не только мне.
    Заранее спасибо, очень ценю Ваш канал и ту работу которую вы перелопачиваете для своих подписчиков!

    • @uwebdesign
      @uwebdesign  9 років тому

      +Artyom Sv спасибо за добрые слова!
      По большому счету, сейчас они равнозначны, но для Sass намного больше фреймворков и комьюнити-информации.

    • @accountmy9287
      @accountmy9287 9 років тому

      +uWebDesign спасибо большое )) Вчера сидел, разбирался)
      Скажите, нет ли у Вас в задумке заданий, которые ваши подписчики могут делать, совместно обсуждать, а вы, в свою очередь, давать рекомендации (с точки зрения практики) относительно тех или иных вопросов ? ;))

    • @uwebdesign
      @uwebdesign  9 років тому

      Artyom Svinin в задумке много чего есть, но из-за того, что приходится работой коммерческой еще заниматься (семью кормить) не хватает времени на все такие задумки. Могу только обещать, что дальше - больше. Подписывайся и рассказывай друзьям!

    • @accountmy9287
      @accountmy9287 9 років тому +2

      +uWebDesign Понял, спасибо )
      Буду рассказывать, жаль, что друзья немного в другой сфере работают ))
      Спасибо Вам еще раз, за Ваши старания!

  • @alekseirozhkov8880
    @alekseirozhkov8880 10 років тому +14

    "хувер", "амперсенд". От такого произношения уши в трубочку заворачиваются...

  • @АртёмБарчан
    @АртёмБарчан 11 років тому

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

    • @uwebdesign
      @uwebdesign  11 років тому

      это я еще подготовился! =) но да, со временем получится короче. этот ролик был направлен на основы, поэтому нового для опытных пользователей здесь не предвиделось. спасибо за комментарий! =)

    • @АртёмБарчан
      @АртёмБарчан 11 років тому

      uWebDesign Еще 2 момента: пример лучше показывать на сложных случаях, в случае с mixin, то нужно было показать пример работы с передачей переменных; второй момент - на sassmeister есть поддержка Emmet, включается в настройках "Enable Emmet support".

    • @uwebdesign
      @uwebdesign  11 років тому

      воу, про Emmet не знал, спасибо. =) А про миксины с переменными, я показал на 25:50!

    • @uwebdesign
      @uwebdesign  11 років тому

      причем Sassmeister только что написали в твиттере про добавление поддержки Emmet, цветовых тем и поддержку Vim горячих клавиш.
      twitter.com/sassmeisterapp/status/445913188257648642
      twitter.com/sassmeisterapp/status/445913261137870850
      twitter.com/sassmeisterapp/status/445913460354727938

  • @al_exe5
    @al_exe5 6 років тому

    Спасибо за видео!
    Для чего нужен синус в Sass?
    Использование довольно прямолинейное и частое в обычном дизайне.
    Прошу подсказать.

    • @uwebdesign
      @uwebdesign  6 років тому

      Синус? Тригонометрический?

  • @ИгорьМихайлов-у1я
    @ИгорьМихайлов-у1я 8 років тому

    Привет Саня, начал изучать Sass с нуля, хотел бы посмотреть обзор на приложение Prepros т.к. им пользуюсь, хотел бы знать все фишки (еще интересует вопрос, можно ли настроить компас в этом приложении?), большое Спасибо!

    • @uwebdesign
      @uwebdesign  8 років тому +1

      Да ничего там сверхестественного нету. Просто настроить и всё. У меня этого приложения нет, поэтому обзора тоже нет.

  • @YevhenZhuchenko
    @YevhenZhuchenko 9 років тому

    C Extend все ясно, объсяни пожалуйста разницу между Mixin и Placeholder?

    • @uwebdesign
      @uwebdesign  9 років тому

      +Jeka J плейсхолдер это, говоря аналогиями из ООП - абстрактный класс. Который можно только extend-ить, так что фактически это и есть extend, только "тихий".

  • @jenyaspace
    @jenyaspace 9 років тому

    расскажите больше про стилус

  • @vitaliykibish
    @vitaliykibish 11 років тому

    Жду циклы в следующем видео!
    Ребят, пожааалуйста ;)

    • @uwebdesign
      @uwebdesign  11 років тому

      Обязательно! В этот понедельник. =)

  • @BATYAEVGEN_FUNS
    @BATYAEVGEN_FUNS 9 років тому +1

    Пиши ещё, тёска)

    • @uwebdesign
      @uwebdesign  9 років тому

      +Александр Принципат пишем! =) Спасибо за отзыв.

    • @BATYAEVGEN_FUNS
      @BATYAEVGEN_FUNS 9 років тому

      +uWebDesign Не за что, а про PostCSS будет? А то что-то он взорвал, в гугл и твиттер уже его юзают, 5-й бутстрап говорят будет на нём писать.

    • @uwebdesign
      @uwebdesign  9 років тому

      Александр Принципат какой-то обзор обязательно будет, но использовать в работе я его пока не планирую.

  • @_Leo.Bonart_
    @_Leo.Bonart_ 9 років тому +6

    Ребята, очень толковые уроки. Но очень не хватает каналу плейлистов. Очень напрягает перелопачивать всю кучу ваших видеозаписей в поисках нужной каждый раз. Можно же хоть чуть-чуть позаботится о своих зрителях и разбить записи хотя-бы по приблизительной тематике? Это ведь не составит большого труда, но зрители скажут огро-о-о-омное спасибо, а общая популярность канала возрастет, я уверен.

    • @uwebdesign
      @uwebdesign  9 років тому +4

      Дмитрий Ярошенко спасибо за совет, даже не думали. Завтра сделаю! =)

  • @КРЮК-у5э
    @КРЮК-у5э 8 років тому +3

    Запишите видео на 24 часа пожалуйста

    • @uwebdesign
      @uwebdesign  8 років тому

      +Jack Rihner на какую тематику?

  • @konstantin7795
    @konstantin7795 9 років тому +1

    Обзор понравился) Надеюсь перейти в ближайшее время на модульность в проектах сейчас использую //*class-name/*/ такие комментарии в одном файле css и поиском....) Храню инфу в голове и постоянно похожие названия для классов использую)

    • @uwebdesign
      @uwebdesign  9 років тому

      +Константин Обухов об этом можешь посмотреть вот этот ролик: uwebdesign.ru/bem-smacss/, там как раз про именование классов и организацию проектов.

  • @КонстантинОтпущенников-з9ш

    Спасибо!

    • @uwebdesign
      @uwebdesign  9 років тому +1

      +Константин Отпущенников за отзыв спасибо!

  • @АндрейДемиденко-г8ъ
    @АндрейДемиденко-г8ъ 10 років тому +4

    Немножко напрягает иногда бубнение))
    А так молодцы

    • @uwebdesign
      @uwebdesign  10 років тому

      спасибо за отзыв! будем стараться не бубнить! :D

  • @default6508
    @default6508 9 років тому +2

    Помсотрел, emmet уже поддеживается.

    • @uwebdesign
      @uwebdesign  9 років тому

      +byby by ну тут видосу то уже пару лет.

  • @nu3DN
    @nu3DN 8 років тому

    Я не понимаю, почему все так упорно с сасс, но не стилус. Особенно nodejs ребята, где, казалось бы, поставил и пользуйся. Да и не могу заставить себя после стилуса писать " : ". Хотя в целом почти идентичные языки.

    • @uwebdesign
      @uwebdesign  8 років тому +1

      Очень близко к настоящему CSS, для тех, кто глубоко учил фундаментальные основы - более простой и понятный порог входа. Кроме этого - для Sass комьюнити сделало намного больше контента.

  • @Андрей-ь6й8н
    @Андрей-ь6й8н 8 років тому +1

    По compas бы обзор!

    • @uwebdesign
      @uwebdesign  8 років тому +1

      Есть такие обзоры: ua-cam.com/video/jWKcPW5rXmo/v-deo.html, ua-cam.com/video/Leert-TnSSg/v-deo.html, ua-cam.com/video/arQhD9Jc81M/v-deo.html.

  • @tawreon
    @tawreon 8 років тому +3

    Хувер :)

    • @uwebdesign
      @uwebdesign  8 років тому +1

      +TaWReOn а как правильно? =)

  • @rusicsemenov
    @rusicsemenov 8 років тому

    За почти три года, как шагнули в подаче информации

    • @uwebdesign
      @uwebdesign  8 років тому

      +Руслан Семенов да уж. =)

  • @nda861
    @nda861 10 років тому +1

    нормально.

  • @nixaristix1819
    @nixaristix1819 10 років тому

    Спасибо за урок, Саня! Делаю тестовый проект, чтобы прочувствовать Sass+compass, появляются вопросы. Буду рад, если ответишь.
    1) Директива@extend,как оказалось, наследует даже медиа запросы, которые наследовать категорически не нужно. Как этого избегать? Или при адаптивной верстке наследование через@extendне рекомендуется не использовать?
    2) Так же при адаптивной верстке проблемы с приоритетами стилей. В desktop версии кнопка скрыта, а при max-width:992px должна быть display:block; Но она не появляется, так как приоритеты благодаря вложенности стилей для desktop версии выше. Вот код: jsfiddle.net/AlexSpace/9arumwfq/ Как быть? Что-то делаю не так?
    3) Можно отключить процесс создания спрайтов в Compass, если они уже сделались? Работаю через Gulp и каждый раз, когда сохраняю документ, они делаются заново... зачем постоянно их создавать? =) Тем самым livereload на 3 секунды дольше думает, перед тем как обновить страницу. Как в такой ситуации поступить?

    • @uwebdesign
      @uwebdesign  10 років тому +1

      Пожалуйста, всегда рад! =)
      1) Если ты используешь mobile-first паттерн и SMACSS, то у тебя не возникнет таких казусов. Если тебе категорически не нужно наследовать медиа-запросы, то значит ты неверно используешь@extend.Наследуй что-то более абстрактное.
      2) Опять же - используй mobile-first, за этим сила. По дефолту она включена, а на больших экранах - выключай.
      3) Закомментируй создание спрайтов, он старые не удалит же, и раскомментируй когда нужно будет реально обновить.

    • @nixaristix1819
      @nixaristix1819 10 років тому

      uWebDesign
      Большое спасибо за оперативные ответы!
      1) Понял, пересмотрю свой подход к наследованию.
      2) Mobile-first в любом проекте можно использовать? Предположим у меня только десктоп версия в PSD, мне все-равно можно сначала мобильную сделать? Я использую сетку bootstrap, получается слишком много классов, которые при подходе desktop-first писать не обязательно(например .col-lg-xs, а так получается, что везде придется от .col-xs-$ до .col-lg-$ писать). Читал у Дэна Сэдерхольма, что mobile first не всегда удобен. А как твой личный опыт говорит? Может чушь все это, и desktop-first умер?
      3) Точно ) так и сделаю. Пробовал удалять, но выскакивает ошибка, что импорта нет...оно и правильно, я не прописывал отдельно путь к изображению, так как он от импорта прописывается. Теперь понял, буду вручную прописывать, в таком случае закомментить самое оно.

    • @uwebdesign
      @uwebdesign  10 років тому

      Алекс Спэйс конечно же не всегда удобно использовать mobile-first, но это дело привычки (это хорошая привычка) и зачем делать сайты без мобильной версии, это моветон же? Мне опыт подсказывает, что нужно делать везде, где того ползволяют деньги и время. Если за это не платят и это сильно дольше будет, то может быть и не обязательно. Но только привычка в данном случае важнее времени.

    • @nixaristix1819
      @nixaristix1819 10 років тому

      Здорово, в таком случае начинаю эту привычку нарабатывать. И так уже делаю адаптивную верстку на автомате, даже когда не заказывают, бонусом. Так что твой взгляд мне очень близок. Еще раз большое спасибо, жду новых видосов!

    • @uwebdesign
      @uwebdesign  10 років тому

      Алекс Спэйс все будет! =) Спасибо за комментарии.

  • @loginov2030
    @loginov2030 9 років тому +2

    Koala кстати говоря не очень адекватно локализует ошибку.

    • @uwebdesign
      @uwebdesign  9 років тому

      +Александр Логинов беда =( бесплатный софт он такой.

    • @loginov2030
      @loginov2030 9 років тому +1

      +uWebDesign Ну я теперь его использую только для минификации js, а для css использую winless))) он в этом плане более адекватен.

    • @uwebdesign
      @uwebdesign  9 років тому

      Александр Логинов а prepros?

    • @loginov2030
      @loginov2030 9 років тому

      +uWebDesign не использовал его. Во-первых по тому что не знал что он есть (только из этого видео узнал что он существует). Во-вторых все таки самая распиареная тулза для less это Winless. А Koala нашел как замену Winless, когда сидел на линуксе Вообще Gulp настроенный тоже неплох. Единственное за что не люблю его - слушание файла прекращается при ошибке компиляции файла и приходится заново все запускать) Да и постоянно нужен терминал на виду, былоб 2 моника, то нет проблем, но моник увы один. Все хочу попробовать SCSS в реальном большом проекте, так как в less очень не хватает условных выражений(может я их просто не нашел???).

    • @uwebdesign
      @uwebdesign  9 років тому

      +Александр Логинов вроде бы ветвления (условия) добавили в итоге в LESS, но я не использовал.

  • @kom4eg
    @kom4eg 8 років тому

    спасибо, вы сделали мир лучше :)
    только 'хувер' и 'амперсенд' режет слух.
    ˈhəvər - хове'р'
    ˈampərˌsand - амперсанд

    • @uwebdesign
      @uwebdesign  8 років тому +1

      Давно это было, нас уже поправляли в других местах. Что касается «хувер» - это умышленный «русизм». А про «амперсенд» - был неумышленный.

    • @justspartak
      @justspartak 8 років тому

      я бы сказал, что гувер даже лучше звучит

  • @twist2012tracer
    @twist2012tracer 9 років тому +1

    произношение некоторых терминов неправильное (хувер, амперсенд....), ну да пофиг, не плохой урок в целом, спасибо.

    • @uwebdesign
      @uwebdesign  9 років тому

      Сема Богданов спасибо за комментарий! =)

    • @zakiro4277
      @zakiro4277 9 років тому

      +Сема Богданов как правильно?

  • @ВикторШавкутенко-м7ф

    1.5 норм

  • @i_ii_ii
    @i_ii_ii 9 років тому +2

    Random English comment....

    • @uwebdesign
      @uwebdesign  9 років тому

      +i11_1i11 i11_1ii1 sup! How did you manage to get to this video?

    • @i_ii_ii
      @i_ii_ii 9 років тому

      +uWebDesign
      Typed variables in UA-cam and your video came up.

    • @uwebdesign
      @uwebdesign  9 років тому

      +i11_1i11 i11_1ii1 you can still use docs for the reference: sass-lang.com/documentation/file.SASS_REFERENCE.html variables and datatypes.

  • @swifter2526
    @swifter2526 8 років тому

    Блин, такой голос усталый 😔 Парень, отдохни)

    • @uwebdesign
      @uwebdesign  8 років тому +1

      +Swifter это один из первых роликов на Канале, уже давно отдохнул. =)

    • @swifter2526
      @swifter2526 8 років тому

      uWebDesign 😊👍

  • @ruslanzlygostev2081
    @ruslanzlygostev2081 8 років тому

    Всё хорошо, а если бы говорили чуть быстрее, было бы ещё лучше. Медленная речь раздражает.

    • @uwebdesign
      @uwebdesign  8 років тому

      Давно это было, теперича быстрее говорим, посмотри последние ролики.

  • @taylorderden7623
    @taylorderden7623 8 років тому

    О каком sass тут идет речь? у вас ведь scss, мда ...

    • @astronaut8968
      @astronaut8968 8 років тому

      Поведайте разницу

    • @taylorderden7623
      @taylorderden7623 8 років тому

      Препроцессор sass с синтаксисос scss имею ввиду. sass-scss.ru/guide/ если вам трубно найти разницу в синтаксисе между sass и scss. ведь автор не говорит о том что есть разные синтаксис.

    • @uwebdesign
      @uwebdesign  8 років тому

      +Taylor Derden ролик про весь препроцессор, в качестве примера выбран синтаксис scss.

  • @Gennadiy1630
    @Gennadiy1630 7 років тому

    Не смог долго смотреть. Очень много не нужной информации.

    • @uwebdesign
      @uwebdesign  7 років тому

      Давно это было.