Руководство по Sass для начинающих с Shopify - Часть 1. Начало работы с Sass

  1. Что такое CSS-препроцессор?
  2. Sass против SCSS, какая разница?
  3. Создание нового файла Sass
  4. переменные
  5. гнездование
  6. Использование Sass &
  7. Версия Sass 3.2 и ограничения в редакторе интернет-магазина
  8. Использование новых версий Sass с Shopify
  9. Начните использовать Sass!

Это первая часть руководства для начинающих из трех частей по Sass с Shopify Это первая часть руководства для начинающих из трех частей по Sass с Shopify.

Посмотрите на вторую часть этой серии, чтобы сделать таблицы стилей более умными, используя миксины и функции Sass. »

Одним из замечательных преимуществ Shopify является то, что мы поддерживаем компиляцию SCSS в редакторе нашего интернет-магазина. Это означает, что вы можете воспользоваться Sass без необходимости устанавливать компилятор или инструменты сборки, потому что он автоматически встроен в редактор интернет-магазина.

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

Эта статья является первой в серии статей, которые в целом будут содержать руководство для начинающих по Sass с Shopify. В этой статье мы рассмотрим различия между Sass и SCSS, а также познакомим вас с переменными, вложенностью и некоторыми ограничениями Sass в онлайн-редакторе тем Shopify.

Что такое CSS-препроцессор?

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

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

Самые популярные CSS препроцессоры пререкаться , Меньше , а также стилус , Shopify использует Sass, точнее, синтаксис SCSS.

Sass компилируется Shopify в CSS и подается в веб-браузерSass компилируется Shopify в CSS и подается в веб-браузер.

Sass против SCSS, какая разница?

Если вы никогда ранее не использовали CSS-препроцессор и сталкивались со статьями, которые ссылаются на Sass или SCSS, вам может быть интересно, в чем разница? Эти два термина часто используются взаимозаменяемо, и на простом языке, часто относятся к одному и тому же - препроцессор CSS называется пререкаться ,

пререкаться расшифровывается как синтаксически удивительные таблицы стилей. Это один из старейших препроцессоров CSS, который активно поддерживается уже более девяти лет. Sass совместим со всеми версиями CSS, поэтому вы можете использовать любые доступные библиотеки CSS.

Основное различие между Sass и SCSS - это расширение файла и синтаксис. Есть два синтаксиса для Sass. Первым является SCSS, также известный как Sassy CSS, который является расширением синтаксиса CSS. Файлы, использующие синтаксис SCSS, используют расширение .scss. В версии 3 Sass SCSS был представлен как «новый основной синтаксис».

Одна из причин, по которой SCSS существовала в первую очередь, заключалась в том, чтобы помочь в принятии Sass в целом. Это позволяет легко превратить обычный проект CSS в проект Sass, потому что CSS является допустимым синтаксисом SCSS.

Это означает, что все, что вам нужно сделать, это изменить расширение файла в файле CSS, чтобы превратить его в действительный файл SCSS. Это был гораздо более доступный синтаксис для новых пользователей Sass, что сделало популярность Sass стремительным взлетом после его выпуска.

Другой (более старый) синтаксис для Sass известен как синтаксис с отступом, или иногда его называют просто «Sass». Он обеспечивает более лаконичный способ написания CSS, используя отступ вместо скобок для обозначения вложенности селекторов и новых строк, а чем точка с запятой, чтобы обозначить новые свойства. Файлы, использующие синтаксис «Sass», используют расширение .sass.

Там интересный статья об истории и преимуществах Sass и SCSS , но когда вы используете Sass с темами Shopify, важно отметить, что Shopify поддерживает только синтаксис SCSS языка Sass . Так что для этой серии статей мы рассмотрим синтаксис.

Итак, давайте углубимся в некоторые особенности Sass!

Создание нового файла Sass

Чтобы создать новый файл Sass с синтаксисом SCSS в теме Shopify, просто создайте новый файл с расширением .scss внутри каталога assets /.

scss внутри каталога assets /

Затем обязательно свяжите новый ресурс с вашей темой в <head> вашего файла theme.liquid со следующим кодом:

{{'theme.scss.css' | asset_url | stylesheet_tag}}

Где theme.scss - это имя вашего нового файла Sass в каталоге assets /.

переменные

Переменные - это способ хранения информации, которую вы хотите использовать в таблице стилей. Вы можете думать о такой переменной, как помеченное поле, которая содержит некоторую информацию, на которую мы позже можем ссылаться по имени. В Sass мы используем символ $ для обозначения имени переменной.

Например:

$ font-primary: Helvetica, Arial, без засечек; $ color-primary: # 333; body {font: normal 100% / 1.5 $ font-primary; цвет: $ color-primary; }

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

Компилируется в:

body {font: normal 100% / 1.5 Helvetica, Arial, без засечек; цвет: # 333; }

Если это полезно, вы можете рассматривать переменные как заполнители для любого их значения. Любые переменные, которые определены вне селектора, считаются глобальными переменными. Любые переменные, которые определены в селекторе, относятся к этому селектору и являются локальными переменными.

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

Вам также может понравиться: Создание динамических цветовых схем с опциями и настройками темы ,

гнездование

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

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

Зная это, вот пример того, как выглядит вложение в Sass.

Например:

nav {ul {margin: 0; отступы: 0; стиль списка: нет; } li {display: inline-block; } {display: block; набивка: 0.5em 1em; текстовое оформление: нет; }}

В этом примере селекторы ul, li и a вложены в селектор элемента nav. Такая организация делает наш код действительно легким для чтения, навигации и понимания.

Компилируется в:

nav ul {margin: 0; отступы: 0; стиль списка: нет; } nav li {display: inline-block; } перейти к {display: block; набивка: 0.5em 1em; текстовое оформление: нет; }

В этом примере я использовал селекторы элементов, но вы могли бы легко заменить эти селекторы любым допустимым селектором CSS, будь то .classname или #id.

Использование Sass &

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

Вы можете думать о & в Sass, как всегда ссылаясь на родительский селектор при вложении. Представьте, что символ & удаляется и заменяется родительским селектором. Он часто используется с псевдо-селекторами для различных состояний ссылок.

Например:

.button {&: посещения {цвет: # 2980b9; } &: hover, &: active {color: # 3498db; }}

Компилируется в:

.button: посетил {цвет: # 2980b9; } .button: hover, .button: active {color: # 3498db; }

Еще один действительно полезный вариант использования & in Sass - квалификация на основе контекста. Это означает, что вложенные селекторы не обязательно должны начинаться с &. Помните, когда я сказал думать о & как всегда, ссылаясь на родительский селектор?

Например:

.button {color: #ffffff; цвет фона: # 2980b9; .page-contact & {background-color: # e67e22; }}

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

Компилируется в:

.button {color: #ffffff; цвет фона: # e67e22; } .page-contact .button {background-color: # 2980b9; }

Это означает, что .button по умолчанию имеет красивый синий цвет # 2980b9. И только когда класс .button находится внутри класса .page-contact, мы хотим изменить его на ярко-оранжевый # e67e22.

Увидеть перо Использование Sass `&` от Shopify Partners ( @ShopifyPartners ) на CodePen ,

Версия Sass 3.2 и ограничения в редакторе интернет-магазина

На момент написания этой статьи редактор онлайновых тем Shopify работает на Sass версии 3.2 - это несколько основных версий последней версии Sass. Одной из основных причин этого является защита интересов торговца.

Существуют серьезные изменения между некоторыми из основных версий Sass. Если Shopify будет обновлять Sass на нашей платформе, некоторые из старых функций Sass, используемых в настоящее время в темах магазинов, которые больше не поддерживаются в более новых версиях Sass, сломаются. Вы можете увидеть некоторые из этих переломных изменений в этот список изменений для 3.3.0 версия Sass.

Один конкретный пример - как спецификация изменила правила для свойства @extend внутри @media. Есть отличная статья об этих изменениях, написанная Крисом Эппштейном , Я расскажу о том, что делает свойство @extend в следующей статье этой серии.

Использование новых версий Sass с Shopify

Многие разработчики, которые знакомы с Sass и привыкли использовать его последнюю версию, могут расстраиваться из-за того, что онлайн-редактор тем поддерживает только Sass версии 3.2. У нас часто возникают вопросы, почему кто-то получает ошибки, используя правильный синтаксис или современную библиотеку Sass. Часто это происходит из-за того, что правильный синтаксис использует преимущества функции Sass, предоставляемой только в более новой версии, поэтому онлайновый редактор тем не может его скомпилировать.

Однако вы можете настроить свой проект на локальную компиляцию или с помощью приложения компилятора на вашем компьютере, а затем синхронизировать скомпилированный файл CSS с вашим магазином. Это позволит вам воспользоваться новейшей версией Sass, все еще используя Shopify. Для этого вам можно использовать начальную тему, как Slate или же компилировать тему локально с Themekit и Prepros ,

Вам также может понравиться: Live Перезагрузка Shopify Themes: Компиляция Sass с использованием Theme Kit и Prepros ,

Начните использовать Sass!

Вы можете начать использовать Sass сегодня, даже если вы решите воспользоваться преимуществами только переменных и вложенности. Самое замечательное в Sass заключается в том, что вам не нужно знать все его возможности, чтобы начать его использовать. Поскольку это расширение CSS, вы можете воспользоваться теми частями, которые имеют смысл для вас и вашего рабочего процесса.

Оставайтесь с нами на следующей неделе, чтобы прочитать вторую часть руководства для начинающих по Sass с Shopify!

Вы впервые используете Sass? Расскажите нам о ваших любимых частях и почему вы любите использовать Sass в своих проектах в комментариях ниже!

Похожие

Объяснение индикатора аллигатора - Что такое индикатор аллигатора?
Билл Уильямс представил индикатор «Аллигатор» в 1995 году. «Аллигатор» - это не только метафора, но и метафора. индикатор , Он состоит из трех линий, наложенных на ценовой график, которые представляют челюсть, зубы и губы зверя, и был создан, чтобы помочь трейдеру подтвердить наличие тренда и его направление. Индикатор Аллигатор также может помочь трейдерам определять импульсные и корректирующие волновые образования,
Что такое рейтинг страниц и как проверить рейтинг страниц в Google?
В настоящее время Page Rank и его позиционирующее значение несколько ослаблены благодаря усилиям Google, которая, как выяснилось, стремилась прекратить предоставлять информацию о ее ценности. Все реже и реже обновляются, пока Google окончательно не удалит рейтинг страницы с панели инструментов (надстройка браузера, которая сообщает значение рейтинга страницы текущей отображаемой страницы). Началась мучительная история рейтинга страницы в истории. Вы уверены, что рейтинг страницы исчез? Каково
Все, что вам нужно знать о Serial ATA
Поскольку некоторые жесткие диски SATA-300 не работают правильно на материнских платах с портами SATA-150, некоторые жесткие диски SATA-300 имеют перемычку SATA-150 / SATA-300 (также известную как перемычка 1,5 Гбит / с / 3 Гбит / с). Проблема в том, что по умолчанию эта перемычка настроена в положение «SATA-150», что ограничивает производительность жесткого диска, если она установлена ​​на материнской плате с портами SATA-300. Мы покажем вам влияние на производительность неправильной конфигурации
Использование технологии Биткойн для борьбы с изменением климата
Успех Парижского соглашения может выиграть от блокчейн-решений, считает Джон Труби 1 директор Центра права и развития Катарского университета. Джон Труби из Катарского университета говорит, что руководителям
Понимание Bootstrap: как это работает и что нового - SitePoint
... сия 4 Bootstrap - это значительное изменение по сравнению со всеми предыдущими версиями. Это фреймворк для мобильных устройств, и он может претендовать на звание одной из лучших фреймворков CSS для создания адаптивных дизайнов сайтов. Поскольку Bootstrap является платформой для мобильных устройств, по умолчанию все, что вы разрабатываете или создаете, будет совместимо с мобильными устройствами или адаптивно. Разве это не круто? Начиная
REST для разработчиков Java: Часть 4. Будущее за RESTful
С точки зрения ИТ-менеджера, REST может быть просто еще одним способом перемещения информации, но без всех инструментов, связанных с SOAP. В этой заключительной статье из серии REST для разработчиков на Java Брайан Слеттен рассказывает об этом мифе и нескольких других о REST, рассматривая его роль в новых архитектурах, таких как семантическая сеть. По его словам, переход к REST - это не отход от SOAP, а охват всей сети как внутри, так и за пределами предприятия. До сих пор в
Как создать анимацию в Phaser с текстурным атласом
... версия XML в основном та же идея, просто немного отличное форматирование). `` `javascript" filename ":" dying1 "," frame ": {" x ": 954," y ": 256," w ": 230," h ": 296}," повернут ": false," обрезан " ": false," spriteSourceSize ": {" x ": 0," y ": 0," w ": 230," h ": 296}," sourceSize ": {" w ": 230," h ": 296 }},
TIM SA Мы отправляем продукцию в течение 24 часов
предлагают 198 тысяч продукты расширенная клиентская панель индивидуальные условия ценообразования Смотрите детали предложить 75 тысяч продукты отслеживание груза история заказов и счета Смотрите детали Что вы получаете, делая покупки в TIM SA? Самый широкий
Позиционирование сайта за 500 злотых в месяц? Возможно ли это вообще?
Можно ли разместить сайт, услугу или магазин за 500 злотых или меньше? Я получаю такие запросы много раз. После публикации статьи оживленная дискуссия была на стене ФБ. сколько стоит позиционирование? , Ниже я постараюсь максимально упрощенно представить, что можно сделать для этой суммы. С точки зрения владельца сайта, необходимо выполнить действия по позиционированию: Linkbuidling
... сное ПО и как я могу определить, затронут ли мой компьютер? Определите, имеется ли на вашем компьютере D...
... сное ПО и как я могу определить, затронут ли мой компьютер? Определите, имеется ли на вашем компьютере Dell программное обеспечение для обеспечения безопасности, и запросите поддержку. Зарегистрируйте установленное на заводе программное обеспечение безопасности от Dell Запустите средство удаления вредоносных программ Microsoft (MSRT).
Когда прибыль угрожает конфиденциальности - 5 вещей, которые нужно знать об Apple в Китае
В эту среду Apple внесет некоторые существенные изменения в то, как хранятся данные для пользователей своего сервиса iCloud в Китае, что вызывает серьезные опасения, что китайские власти теперь смогут свободно контролировать пользователей Apple в Китае. Apple имеет репутацию мощного защитника конфиденциальности и безопасности. Компания использует сильное шифрование

Комментарии

Что такое вредоносное ПО и как определить, подвержен ли мой компьютер влиянию?
Что такое вредоносное ПО и как определить, подвержен ли мой компьютер влиянию? Под вредоносным ПО понимаются все вредоносные программы, такие как шпионское , рекламное или вирусное ПО , которые влияют на производительность и безопасность вашего компьютера. Компьютеры, как правило, заражаются вредоносным ПО в результате таких действий в Интернете, как загрузка файлов или просто просмотр веб-страниц. Таким образом,
Что это значит, кроме того, что пользователи должны получать меньше контента, который они потребляют пассивно?
Что это значит, кроме того, что пользователи должны получать меньше контента, который они потребляют пассивно? Это процент, никто не знает его, и, вероятно, он не определен «жестко» (за исключением рекламы, которая не может превышать 3 процента). Вы можете догадаться, что доля сообщений от друзей увеличится (вот что они являются «значимыми взаимодействиями») за счет контента, размещаемого брендами и СМИ на фан-страницах. Вопрос в том, возьмут ли они на 10 или 30 процентов больше новостей
Какая запись правильная: 25,98 долларов США или 25,98 долларов США?
Какая запись правильная: 25,98 долларов США или 25,98 долларов США? € 18,49 или 18,49 €? А как насчет тысячного разделителя? Должен ли он использоваться вообще? Не забудьте согласовать такие детали с клиентом и бизнес-аналитиком перед тестированием. В нашем мире запятые и точки имеют значение. Что делать? Совместите все символы и знаки препинания (точки, запятые, символы валют и т. Д.), Используемые в вашем географическом районе и культурном кругу. Сконцентрируйтесь
Что такое кейлоггер?
Что такое кейлоггер? Защита системы (модуль HIPS) Модуль проактивной защиты системы (HIPS) постоянно отслеживает и защищает критические компоненты вашей системы от известных и еще не обнаруженных вредоносных программ.
Вы уверены, что рейтинг страницы исчез?
Вы уверены, что рейтинг страницы исчез? Каково было значение для позиционирования раньше? Прочитайте и узнайте ответ на эти вопросы. Что такое рейтинг страницы? Это первый рейтинг сайтов Google, с которым обычно сталкивается каждый владелец сайта, желая позиционировать его. Page Rank появился в 1998 году, его создали основатели Google - Ларри Пейдж и Сергей Брин. Он был рассчитан автоматически по запатентованному алгоритму и был разработан для надежной
Что означают эти изменения и какие варианты есть у клиентов Apple, чтобы защитить себя?
Что означают эти изменения и какие варианты есть у клиентов Apple, чтобы защитить себя? Что происходит с сервисом Apple iCloud в Китае? 28 февраля Apple передаст работу своего сервиса iCloud для китайских пользователей китайской компании Guizhou-Cloud Big Data Industry Development Co., Ltd («GCBD»). Этот шаг повлияет на любые фотографии, документы, контакты, сообщения и другие пользовательские данные и контент, которые китайские пользователи
Так как справиться с ситуацией, когда после запуска устройства оказывается, что нашего языка нет в списке поддерживаемых и поддерживаемых?
Так как справиться с ситуацией, когда после запуска устройства оказывается, что нашего языка нет в списке поддерживаемых и поддерживаемых? Перед началом каких-либо действий стоит помнить две вещи: вы всегда должны делать резервные копии данных на нашем устройстве и что, если вы только что купили телефон, вам будет удобнее попробовать установить польский перед добавлением каких-либо данных или восстановлением копий с предыдущего устройства. , Случай 0 - программное
И Что делать, если компьютер перегревается?
В самом деле, какой артист придет в голову, что он создан для того, чтобы соло-тур показать сравнимо с «Intense»? Только Армин.
В самом деле, какой артист придет в голову, что он создан для того, чтобы соло-тур показать сравнимо с «Intense»?
В самом деле, какой артист придет в голову, что он создан для того, чтобы соло-тур показать сравнимо с «Intense»? Только Армин.
И что еще важнее, стоит ли покупать?
И что еще важнее, стоит ли покупать? Что вы должны знать о LG 55SK8100? LG 55SK8100 / фото. TechManiaK.pl На первый взгляд, LG 55SK8100 ничем не отличается от моделей прошлогодней серии. Рамки, окружающие экран, имеют одинаковую ширину, а основание не изменилось.
Что делать в такой ситуации?
Что делать в такой ситуации? Это легко! Посетите сайт abra-meble.pl, используйте наш код скидки , и система автоматически добавит скидку на ваш заказ. Абра является крупнейшей непроизводственной сетью мебельных магазинов, которая предлагает практичную и функциональную мебель в соответствии с преобладающими тенденциями. В abra-sklep.pl и скандинавский, и английский любители найдут что-то для своего интерьера.

Что такое CSS-препроцессор?
Sass против SCSS, какая разница?
Что такое CSS-препроцессор?
Sass против SCSS, какая разница?
Если вы никогда ранее не использовали CSS-препроцессор и сталкивались со статьями, которые ссылаются на Sass или SCSS, вам может быть интересно, в чем разница?
Помните, когда я сказал думать о & как всегда, ссылаясь на родительский селектор?
Вы впервые используете Sass?
Вы уверены, что рейтинг страницы исчез?
Разве это не круто?
Возможно ли это вообще?