Статьи

Sass: Что случилось, когда мы говорили все синтаксически офигенно

Этим утром наш дизайнер и 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> Присоединяйтесь к нам на следующей неделе для адаптивного веб-дизайна с Рассом Уикли