Руководство по 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 в своих проектах в комментариях ниже!

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