Этим утром наш дизайнер и CSS-фокусник Алекс Уокер заняли центральное место в нашем чате, чтобы поговорить с Sass в последней сессии Talk with the Experts . Мы болтали обо всем, от библиотек mixin до включения Sass в ваш рабочий процесс. Час пролетел незаметно, и из него вышли хорошие ресурсы — если у вас нет времени, чтобы просмотреть стенограмму, вы найдете перечисленные ниже.
Прежде всего, несколько классных CSS-вещей, которые Алекс написал с помощью Sass.
CSS3 понг с выигрышем
История Рождества в CSS
Некоторая полезная информация:
Sass vs LESS — сравнение препроцессоров
Демоверсия Sass с использованием CSSDeck
Сулиман Лидбиттер начинает с Sass
И некоторые удобные инструменты:
Scout — кроссплатформенное приложение под управлением Sass и Compass
Бурбон — библиотека миксинов для Sass
Препрос — еще один препроцессор
LiveReload — перезагружает предварительно обработанный код в браузере без обновления
SMACSS — масштабируемая и модульная архитектура для CSS
Запустите LESS на Learnable
Если вы пропустили сеанс сегодня, потому что не знали об этом, вы можете подписаться на электронные напоминания о будущих сессиях здесь .
На следующей неделе появится отзывчивый веб-дизайн с Рассом Уикли .
Если вы хотите узнать, что именно произошло сегодня утром, вот полная стенограмма часа:
[21:32] <HAWK> У кого-нибудь уже есть опыт Sass?
[21:32] <Фернандо Бассо> Не знаю.
[21:32] <Терри> Нет
[21:32] <nicniewiem> не я
[21:32] <Jan> Что такое Sass ?? Извините, я не знаю.
[21:32] <DavidNY> У меня меньше опыта… и меньше с Sass 🙂
[21:33] <FernandoBasso> У меня нет опыта работы с каким-либо препроцессором CSS.
[21:33] <Shannon> Насколько активно использовать sass с WordPress?
[21:33] <jessirwin> У меня есть опыт SASS, но я не верю, что использую его в полной мере.
[21:33] <Shannon> Только начал изучать Sass
[21:34] <alexmwalker> Хорошо, одна из проблем с CSS заключается в том, что он очень медленно развивается, хотя сеть развивалась с головокружительной скоростью в течение многих лет.
[21:34] <alexmwalker> SASS и другие препроцессоры позволяют нам писать CSS-подобный код, который является более продвинутым и, честно говоря, более прохладным.
[21:35] <alexmwalker> Когда мы пишем его, препроцессор SASS просматривает наш код и молча преобразует его в обычный старый CSS в фоновом режиме.
[21:35] <DavidNY> HAWK — для очереди 🙂 Может быть, было бы неплохо сравнить плюсы / минусы Sass с LESS
[21:36] <HAWK> NP DavidNY
[21:36] <alexmwalker> Это позволяет нам делать более умные вещи, не дожидаясь, пока W3C и производители браузеров догонят
[21:37] <DavidNY> alexmwalker — Sass обрабатывает / компилирует на стороне сервера или на стороне клиента? (Я знаю, что LESS предлагает компилятор на стороне клиента js, но для производственных сайтов его нет-нет)
[21:37] <HAWK> Можете ли вы привести пример «умнее»
[21:37] <FernandoBasso> Я задаю второй вопрос.
[21:38] <jessirwin> Мой вопрос будет таким: На адаптивном сайте, как лучше всего справляться с медиа-запросами? Вы помещаете их в их частичное, или у вас есть они завалены частями с соответствующими селекторами?
[21:38] <HAWK> Добро пожаловать к тем из вас, кто только что присоединился. Алекс объясняет на базовом уровне, что делает препроцессор
[21:38] <DavidNY> +1 за вопрос Джессирвина RWD
[21:39] <alexmwalker> DavidNY, SASS изначально появился как Ruby Gem, но в наши дни он был разбит на множество других сред. Самым простым способом, который я нашел для начала, было использование клиентского приложения.
[21:39] <alexmwalker> http://mhs.github.io/scout-app/
[21:39] <alexmwalker> Это SCout. Это бесплатно и довольно легко начать
[21:39] <Jan> Хорошо, спасибо
[21:39] <sen> (мне нравится codekit) 🙂
[21:39] <alexmwalker> Это приложение Adobe Air, поэтому оно немного вяло ..
[21:41] <alexmwalker>, но он позволяет вам выбрать папку для ваших файлов sass и автоматически записать их в папку, помеченную CSS.
[21:41] <jessirwin> Я играл со Скаутом, когда только начинал, но не мог заставить его работать так, как я хотел. Я окунулся в командную строку и понял, что это не так сложно, если вы не паникуете.
[21:41] <DavidNY> я проверю разведчика — я слышал о компасе, кодеке — все это, кажется, встроено в Sass
[21:41] <DavidNY> но с этими инструментами или просто «ванильным» Sass, компиляция на самом деле на стороне клиента (через браузер пользователя) или на стороне сервера?
[21:41] <DavidNY> * готово
[21:41] <alexmwalker> Codekit действительно хорош. Это 25 долларов, но стоит потратить
[21:41] <johnlacey> То есть вы можете использовать переменные с Sass?
[21:42] <jessirwin> Мы компилируем локально, поэтому CSS уже предварительно скомпилирован для браузера.
[21:42] <alexmwalker> да Джонласи, это одна из первых больших побед
[21:43] <alexmwalker> DavidNY, когда мы говорим SASS на стороне клиента, я говорю о вашем локальном ноутбуке, компилирующем CSS во время работы. Конечный пользователь только когда закончил CSS
[21:44] <alexmwalker> LESS компилирует на компьютере конечного пользователя
[21:44] <dimlo305> Привет, недавно я начал использовать LESS, и я думаю, что он довольно хорош, и его синтаксис не так сложен в изучении. Теперь мой вопрос: должен ли я использовать SASS вместо LESS?
[21:44] <alexmwalker> (хотя это уже не так)
[21:44] <DavidNY> верно — по крайней мере, есть возможность компилировать LESS на компьютере конечного пользователя через JS, чего я не хочу делать
[21:44] <DavidNY> Спасибо за разъяснения re: Sass
[21:45] <alexmwalker> Хорошо, вопрос SASS vs LESS. В прошлом LESS зависел от JS на стороне клиента, идея которого мне не нравилась.
[21:45] <DavidNY> ^ слово 🙂
[21:46] <animal> Привет
[21:46] <alexmwalker> Теперь LESS может компилироваться на вашем собственном компьютере — я думаю, вам нужно установить NodeJS и установить LESS как пакет Node
[21:46] <dimlo305> верно
[21:46] <alexmwalker> Это прекрасное решение.
[21:47] <alexmwalker> Меньше, на самом деле, имеет некоторый аккуратный синтаксис, так что нет никакой причины вообще не выбирать Меньше сейчас.
[21:47] <alexmwalker> Или даже стилус, если хотите
[21:47] <dimlo305> но есть ли какая-то особенность в SASS, которую я не использую в LESS?
[21:48] <alexmwalker> Они все делают схожие вещи. Мы используем рельсы на Learnable, поэтому Sass был легким выбором.
[21:49] <BioC> хорошо, а как насчет Compass VS Bourbon? Если я не слишком поздно с вопросом 🙂
[21:49] <alexmwalker> Итак, у Sass есть две действительно хорошие библиотеки плагинов ‘mixins’ — Compass и Bourbon.
[21:49] <DavidNY> люди могут найти это хорошее чтение: http://css-tricks.com/sass-vs-less/
[21:50] <alexmwalker> Эти библиотеки предоставляют вам множество заранее написанных функций, которые я считаю действительно мощными
[21:50] <dimlo305> Спасибо!
[21:50] <alexmwalker> http://bourbon.io/
[21:50] <lorio> Что такое разница между бурбоном и компасом?
[21:50] <HAWK> Спасибо за ссылку DavidNY — если у кого-то еще есть ресурсы, напишите нам, и я составлю список, когда сделаю расшифровку
[21:50] <alexmwalker> Бурбон мой любимый
[21:50] <lorio> почему?
[21:50] <BioC> Я использую в основном Компас, но Бурбон, кажется, недавно поднялся, и я брожу, если есть причина для переключения
[21:51] <alexmwalker> Компас классный, но он огромный и, вероятно, немного перезаписан, на мой взгляд. У Бурбона есть именно то, что мне нужно, и больше ничего.
[21:52] <lorio> ли бурбон следит за ошибками, как компас?
[21:52] <jessirwin> Так что с Бурбоном, вы бы установили его для каждого сайта? Можете ли вы просто скопировать миксин-файлы, не устанавливая их каждый раз из командной строки?
[21:53] <BioC> хорошо, и поддерживает ли он какие-либо адаптивные макеты, такие как Sasy? (который я начал использовать совсем недавно и уже люблю)
[21:53] <alexmwalker> С помощью SASS вы, как правило, пишете небольшие ярлыки для фрагментов CSSS, которые вы пишете много. Префиксы для многих свойств CSS3 могут быть хорошим примером …
[21:54] <alexmwalker> Bourbon (и Compass) — это библиотеки, которые уже написали много таких ярлыков (или миксинов) для вас.
[21:54] <HAWK> Добро пожаловать к тем из вас, кто только что присоединился. 🙂 Мы сейчас говорим о библиотеках Mixin
[21:54] <HAWK> Не стесняйтесь задавать вопросы в любое время, и я буду ставить их в очередь, пока у нас не будет промежутка
[21:55] <HAWK> А для тех, кто не знает, вы можете @ пометить людей, чтобы привлечь их внимание
[21:55] <alexmwalker> jessirwin — в rails вы можете настроить SASS и Bourbon с помощью одной команды для каждого нового проекта. Codekit поставляется с компасом и бурбоном в комплекте.
[21:55] <lorio> @BioC ты имеешь в виду Сьюзи?
[21:56] <BioC> Лорио, да, извини 🙂
[21:56] <alexmwalker> С Scout, просто нужно каждый раз копировать файлы в нужное место
[21:57] <alexmwalker> Другая замечательная вещь в SASS — это «частичные», которые Джессирвин
[21:57] <alexmwalker> упоминается
[21:57] <johnlacey> Так значит ли это, что вам придется перекомпилировать Sass каждый раз, когда вы вносите изменения, скажем, на ПК для локальной разработки?
[21:58] <Suleiman> Извините, только что вернулся, поймал общий чат до сих пор.
[21:58] <alexmwalker> На больших сайтах гораздо проще управлять кучей небольших CSS-файлов, например, layout.css, text.css и т. Д.
[21:58] <Suleiman> Удивительный Foundation из Zurb тоже использует Sass
[21:58] <BioC> Джонаси, да, но вы запускаете программу командной строки, например, sass или compass, и она сохраняет ваши изменения, перекомпилируя ваши sykes, как вы идете
[21:58] <lorio> это будут частичные дела?
[21:59] <alexmwalker> но в идеале вы не хотите делать 25 запросов к серверу для CSS-файлов для каждой страницы ..
[21:59] <alexmwalker> SASS позволяет вам написать множество маленьких файлов, а затем склеить их все вместе в один большой файл, когда он будет отправлен пользователю
[22:00] <BioC> Джонласи, поверь мне, поначалу мне это тоже казалось обузой, но сейчас я не могу без нее работать, это НАСТОЛЬКО проще!
[22:00] <Suleiman> Так что же, это здорово для модульного подхода SMACSS?
[22:00] <DavidNY> +1 для SMACSS 🙂
[22:00] <DavidNY> Я думаю, что Snook Rec использует Sass
[22:00] <alexmwalker> Сулейман Точно! это идеально подходит для такого подхода
[22:01] <alexmwalker> Джонласи, да, ты делаешь
[22:02] <Suleiman> Моя основная проблема на базовом уровне — правильно использовать @extend для сохранения кода `DRY
[22:02] <alexmwalker> Для тех, кто хочет узнать, что же такое шум, CSSdeck.com и Codepen.io позволяют вам писать SASS прямо в браузере и видеть, как он работает.
[22:02] <alexmwalker> http://cssdeck.com/labs/sass-demo
[22:02] <alexmwalker> Это очень простой пример, но не стесняйтесь поиграть с ним
[22:03] <jessirwin> Это действительно твой любимый цвет?
[22:04] <DavidNY> хе
[22:04] <alexmwalker> Хе-хе .. ну ладно … это был оригинальный SitePoint оранжевый, так что, скажем так, он навсегда застрял в моем мозгу
[22:04] <Джессирвин> хаха!
[22:04] <DavidNY> так что это переменные
[22:04] <DavidNY> как насчет наследования — я забыл термин sass / less
[22:05] <DavidNY> но в основном один класс наследует все стили другого класса и строит из него
[22:05] <alexmwalker> это так. Так что, если бы мы использовали эту переменную в 100 таблицах стилей, а затем изменили цвет логотипа, мы могли бы обновить ее весь сайт за несколько нажатий клавиш
[22:05] <DavidNY> да, люблю это
[22:05] <DavidNY> когда-нибудь это будет в CSS 🙂
[22:06] <alexmwalker> Я не думаю, что переменные когда-нибудь дойдут до реального CSS
[22:06] <DavidNY> бу
[22:06] <alexmwalker> потому что они сломают старые браузеры
[22:06] <johnlacey> Так, как переход к Sass изменил ваш общий рабочий процесс?
[22:06] <Robert> нужно добавить $ base-color для запуска
[22:07] <alexmwalker> johnlacey Я начал использовать его, чтобы упростить код для CSS-анимации — новогодний материал и даже CSS-понг.
[22:08] <alexmwalker> Честно говоря, я бы никогда не написал этот материал без помощи препроцессора.
[22:08] <HAWK> Все ли видели работу Алекса по Рождеству и Понгу?
[22:08] <Сулейман> Нет
[22:08] <HAWK> Я мог бы выкопать это, если нет
[22:08] <HAWK> Держись
[22:08] <alexmwalker> браузерные префиксы сделали бы это слишком сложным
[22:09] <Suleiman> Компас тоже потрясающий 🙂
[22:09] <Suleiman> Хотя я не пользуюсь им сейчас, так как использую HammerforMac
[22:09] <alexmwalker> Это Сулейман.
[22:10] <HAWK> Сулейман http://www.sitepoint.com/css3-pong-insane-things-to-do-with-css/
[22:10] <Сулейман> Это выглядит довольно мило для людей Ветреных — http://alphapixels.com/prepros/
[22:10] <Сулейман> Спасибо HAWK 🙂
[22:10] <johnlacey> И я думаю, что поскольку у вас есть возможность использовать переменные, вы можете сделать одно изменение (до значения указанной переменной), а затем позволить Sass реализовать все эти изменения за вас. Звучит очень эффективно.
[22:11] <alexmwalker> Приятно то, что вы можете написать простой старый синтаксис CSS в свой SASS-fie, и все будет работать нормально. Затем, если вы постепенно начнете пользоваться битами SASS, вы увидите выгоду все больше и больше.
[22:11] <HAWK> Сулейман http://xmas.sitepoint.com/story/css#day/1
[22:11] <DavidNY> миксины Sass такие же, как в LESS?
[22:11] <alexmwalker> Так что это не заставляет вас изучать совершенно новый язык, чтобы начать.
[22:12] <alexmwalker> Тот, кого надо искать …
[22:12] <alexmwalker> Если вы пишете SASS, но ваш собеседник появляется на следующий день и меняет файл CSS, это изменение не вернется автоматически в ваш файл SASS ..
[22:13] <jessirwin> Сколько времени тебе понадобилось, чтобы собрать рождественские вещи?
[22:13] <alexmwalker> Если вы напишите больше SASS, ваши изменения перезапишут его / ее CSS
[22:14] <alexmwalker> Это заняло некоторое время. Поезд, например, занял несколько часов.
[22:14] <alexmwalker> Но без Sass, я думаю, это было бы невозможно
[22:15] <Suleiman> Я сделал свой первый разговор, и он был о Sass — люди могут проверить это здесь — http://www.youtube.com/watch?v=cCizAq_XXb0, думая, что я нервничал, и там было технические проблемы, и я не мог подтянуть свои заметки: P Но это нацелено на людей, плохо знакомых со всем этим.
[22:15] <alexmwalker> Слишком много кода, слишком много несоответствий браузера, чтобы исправить ошибку
[22:15] <Suleiman> HAWK Этот понг-малярка выдающийся
[22:16] <HAWK> Это действительно
[22:16] <alexmwalker> Также не уверены, сколько из вас используют Live Reload? http://livereload.com/
[22:16] <alexmwalker> Это 10 долларов и включает SASS и меньше обработки.
[22:16] <jessirwin> Я не смог заставить работать альфа-версию Windows вчера 🙁
[22:16] <alexmwalker> И он автоматически перезагружает ваш браузер каждый раз, когда вы меняете свой CSS или HTML
[22:17] <alexmwalker> Джессирвин, это облом. Это убийственно, когда у тебя это работает. Я не могу работать без него
[22:18] <jessirwin> В чем разница между livereload и codekit?
[22:19] <HAWK> Привет всем — у нас осталось около 10 минут на сеанс, поэтому, если у вас есть вопросы, обязательно добавьте их в микс
[22:19] <alexmwalker> Codekit поставляется с Бурбоном и Компасом, встроенными в него .. У него также есть несколько других трюков. В целом, это более приятное приложение, но оно ничем не отличается
[22:19] <alexmwalker> У меня есть оба
[22:19] <DavidNY> HAWK — sitepoint собирает курс или книгу Sass и т. Д.?
[22:19] <DavidNY> 🙂
[22:20] <Suleiman> Хорошо, alexmwalker, не могли бы вы рассказать мне, как получить максимальную отдачу от функции @extend, поскольку я просто не понимаю, как это работает?
[22:20] <alexmwalker> DavidNY Я вполне могу быть вовлечен именно в такой курс;)
[22:20] <lorio> отлично
[22:21] <Suleiman> Я использую @extend ul.classname li -?
[22:22] <Suleiman> Поскольку некоторые из тех, которые я хочу расширить, довольно специфичны, речь идет не только о названии класса
[22:22] <HAWK> Привет, Люк, мы почти закончили, так что если у тебя есть вопрос, тогда прыгни 🙂
[22:22] <alexmwalker> Сулейман, пока единственный раз, когда я пытался использовать @extend, я обнаружил, что пишу довольно глупый код … Повторяю себя. Я реструктурировал это.
[22:23] <alexmwalker> Но, может быть, нам обоим не хватает красоты во всем. Я пока не понимаю
[22:23] <DavidNY> Продолжение отличается от миксинов?
[22:23] <DavidNY> например
[22:23] <DavidNY> .btn {…}
[22:23] <Suleiman> alexmwalker Вот как я, я знаю, это довольно хорошо, но я просто не понимаю это правильно: P
[22:24] <DavidNY> .btin-extend {.btn} / * наследует все .btn правила
[22:24] <DavidNY> как бы это ни называлось 🙂 для меня это одна из самых мощных функций
[22:24] <alexmwalker> Миксины — это полные правила CSS. Расширение, кажется, работает как меньшие фрагменты.
[22:25] <Suleiman> DavidNY — Скажем, у вас есть несколько стилей для кнопки, вы можете @ расширить это для чего-то другого. Это не случай копирования всех стилей, на которые будет похож скомпилированный CSS — item1, item2 {style in here}
[22:25] <jessirwin> Я обнаружил, что использую @extend, когда не могу просто добавить имя класса в html.
[22:25] <Сулейман> вместо или item1 {code} — затем item2 {повторный код}
[22:26] <jessirwin> Как лучше реагировать на медиа-запросы на адаптивном сайте? Вы помещаете их в их частичное, или у вас есть они завалены частями с соответствующими селекторами?
[22:26] <alexmwalker> В моем случае я сгруппировал классы вместе… .box, .sidebar {и т. Д.}
[22:26] <alexmwalker> чтобы получить тот же результат
[22:27] <jessirwin> Я использую это, чтобы держать вещи в одном частичном.
[22:27] <DavidNY> ах. хорошо, спасибо Сулейман — не уверен, где бы я хотел это сделать, хотя. почему два класса имеют один и тот же набор стилей
[22:27] <alexmwalker> Я ставлю их на части в конце основного документа. Есть несколько школ мысли об этом, хотя.
[22:27] <Сулейман> DavidNY Может быть цитата и какой-то другой текст. Вы можете добавить дополнительный стиль после @extend
[22:27] <Сулейман> Может быть что-нибудь действительно
[22:28] <DavidNY> я попробую
[22:28] <Terry> Спасибо, что впустили меня — я действительно верю в осмос!
[22:28] <alexmwalker> Суть кода: https://gist.github.com/5818705
[22:28] <Suleiman> Sass — это круто, так как вы можете просто использовать стандартный ванильный CSS и добавлять маленькие самородки по мере продвижения. я люблю это
[22:29] <alexmwalker> Вау, я не знал, что это может сделать это!
[22:29] <HAWK> Еще пара минут, прежде чем я освободил Алекса, чтобы заняться его днем. Есть последние вопросы?
[22:29] <alexmwalker> Это нижняя часть основного SASS-файла обучаемого
[22:29] <DavidNY> jessirwin — если вы следуете подходу SMACSS, я думаю, что метод повторяющихся медиа-запросов состоит в том, чтобы поместить их с модулями («селекторами»), а не в их собственные партиалы (например, «mobile.css» Или 480px.css)
[22:29] <lorio> так вот как вы импортируете партиалы?
[22:29] <Сулейман> alexmwalker — Сарказм: /
[22:30] <alexmwalker> За исключением махрового;)
[22:30] <alexmwalker> Лорио
[22:31] <jessirwin> DavidNY Да, мы стараемся следовать подходу Smacss
[22:31] <lorio> хороший учебник по smaccs?
[22:31] <DavidNY> ну, есть сайт и книга — smacss.com
[22:31] <Suleiman> alexmwalker Что бы вы порекомендовали в качестве лучшей практики для RWD, вложите @media в разные элементы или импортируйте отдельные файлы .scss для каждой точки останова?
[22:31] <lorio> хорошо, спасибо. посмотрю
[22:33] <DavidNY> надо поболтать — спасибо HAWK, alexmwalker и всем 🙂 есть ли стенограмма, которой можно поделиться?
[22:33] <alexmwalker> Я думаю, что вам нужен базовый набор стилей, которые будут работать на всех размерах устройства. Затем я дополняю эти стили импортированными частями для каждого размера.
[22:34] <Сулейман> Спасибо alexmwalker 🙂
[22:34] <alexmwalker> Было приятно поблагодарить всех за то, что пришли и дали мне кое-что о чем поговорить.
[22:35] <HAWK> Я выложу стенограмму позже сегодня
[22:35] <jessirwin> Спасибо alexmwalker и HAWK
[22:35] <HAWK> Присоединяйтесь к нам на следующей неделе для адаптивного веб-дизайна с Рассом Уикли