sass react что это
5 способов стилизовать компоненты React в 2019
Компоненты React — это строительные блоки, из которых мы создаём интерфейсы для приложений. То, как мы стилизуем визуальные элементы, во многом определяет впечатления пользователей о нашем бренде и продукте.
Не существует одного правильного способа стилизации компонентов. Способ стилизации нужно выбирать исходя из конкретного случая и личных предпочтений; но прежде всего, выбор зависит от архитектурных особенностей проекта, например: глобального пространства имён, зависимостей, повторного использования, масштабируемости, устранение «мёртвого кода» и т.д.
В статье мы рассмотрим актуальные в 2019 году способы стилизации компонентов React, и попытаемся понять, что их отличает. Выбор остаётся за вами.
1. Inline CSS
React позволяет добавлять CSS непосредственно в код в качестве атрибутов, и передавать его элементам.
В React, inline стили записываются, как объект. Ключ такого объекта является именем стиля; имя объекта записывается в стиле camelCase; значения стиля записываются внутри объекта, обычно строкой.
Вы можете передать стили напрямую или создать переменную, которая будет хранить свойства стилей и предавать их элементу. Используя inline стили, вы можете комбинировать CSS синтаксис и JSX код (JSX — это препроцессор, который добавляет XML синтаксис в JavaScript).
Такой подход облегчает назначение стилей в компонентах и понимание того, какие стили уже есть у каждого компонента. Использование возможностей JS облегчает работу с комплексной стилизацией, когда это необходимо.
2. CSS in JS
Ещё один интересный способ использовать CSS в коде JS для абстракции CSS на уровне компонентов — это использование JavaScript для описания стилей, декларативным и пригодным для дальнейшей поддержки способом. Благодаря релизу проекта styled-components(автор Max Stoiber), этот способ стал более популярен, чем когда либо (далее подробней).
В чём же разница между двумя способами, CSS-in-JS и Inline? Говоря простым языком, если вы используете способ CSS-in-JS, то вы прикрепляете тег
5.4 Домашняя страница
Настала пора создать нашу первую страницу, используя готовый макет. Мы начнём с домашней страницы, так как она является главной в приложении и осуществляет навигацию пользователя по его ключевым разделам.
5.4.1 Стиль кода и методология БЭМ
Перед тем как мы приступим к реализации нашей первой страницы приложения, важно установить определенные соглашения по наименованию CSS-классов, компонентов, элементов со всей командой. Все члены команды должны придерживаться единого установленного стиля кода. Если этим пренебречь, в коде проекта очень скоро начнётся настоящая вакханалия! На чтение такого кода будет уходить очень много времени и каждый компонент будет резать глаза. Будет создаваться впечатление, что код писали индусы из 10 разных сёл. Эту плачевную ситуацию лучше всего предусмотреть заранее и предпринять все меры по её недопущению!
Если кто-то ещё не знаком, то самое время познакомиться с замечательной методологией, под названием БЭМ. Я опять же настаиваю на том, чтобы вы полностью изучили все разделы сайта. Это ощутимо поднимет ваш уровень знаний и откроет глаза на многие, казалось бы, незаметные вещи. Материал читается быстро и легко, а пользу трудно переоценить.
Мы в своём коде будем использовать вот это соглашение. То есть схема именования наших CSS-классов будет такой:
Имена записываются латиницей.
Имена блоков и элементов пишутся с заглавной буквы. Имена модификаторов — со строчной.
Каждое слово внутри имени пишется с заглавной буквы.
Имя элемента отделяется от имени блока одним дефисом (-).
Разделители имени и значения модификаторов совпадают с классической схемой.
5.4.2 Используем SASS
Если вы ещё не знакомы с этим мощным расширением CSS, самое время его изучить. Есть отличная русскоязычная документация. Очень скоро мы создадим некоторые полезные CSS классы, используя синтаксические конструкции SASS. Рассказывать о нём здесь не имеет смысла, куда красноречивее расскажут сами создатели. А мы, двигаемся дальше.
5.4.3 Используем flexbox
Эта полезная возможность CSS обеспечит нам большую скорость разработки стилей. Многие, не исключая меня, любят её за простоту и потрясающие возможности по компоновке элементов разметки.
5.4.4 Bootstrap и другие известные UI библиотеки
Все веб-разработчики слышали или использовали такую популярную библиотеку как Bootstrap. Однако сообщество React создало для себя и другие богатые библиотеки: React Bootstrap, Material UI, React Virtualized, Blueprint, Semantic UI React, React Toolbox и многие другие. Расширенный список вы можете посмотреть здесь. Эти библиотеки предлагают вам изобилие разных компонентов на любой вкус.
В нашем приложении мы будем использовать Bootstrap и React-Bootstrap. Из первой мы где-то используем, а где-то переопределим кое-какие стили. А из второй будем использовать готовые React компоненты.
Давайте добавим модуль bootstrap в наше приложение:
Мы могли бы подключать стили и прямо в файле index.scss, однако вариант с файлом main.scss более гибкий. Помимо него мы сможем в index.scss подключить и любой другой необходимый файл. Просто дополнительный промежуточный уровень для гибкости.
Далее согласно документации в файле main.scss подключим стили bootstrap:
Их можно переопределить. Для этого достаточно написать свои собственные стили сразу после этой строки подключения:
Однако такой способ пригоден только в тех случаях, когда приложение маленькое. Для больших проектов с множеством переопределений при таком способе очень быстро начинает страдать скорость поиска нужного стиля и читабельность, особенно у тех, кто знаком с вашим проектом совсем недавно. Чтобы этого избежать, переопределяемые стили лучше группировать по отдельным файлам, которые затем следует подключить в main.scss после строки подключения стилей bootstrap (и других сторонних библиотек).
Для переопределения стилей в нашем приложении, давайте создадим папку custom, где разместим все наши файлы переопределения стилей bootstrap. В этой папке создадим два файла переопределения common.scss и buttons.scss. В первом будем хранить универсальные стили, а во втором будем переопределять стили кнопок bootstrap, согласно нашей цветовой гамме.
В файле common.scss мы определили циклы для генерации полезных CSS классов, используя синтаксис SASS. Представляете, сколько заняло бы места и времени написать их, используя простой CSS? При этом читабельность просто отличная!
Теперь, когда со стилями мы разобрались, пора приступить к созданию компонента домашней страницы.
Ещё хочу обратить ваше внимание на файл index.js. В нём мы сначала подключаем стили, а потом компоненты. Это важно, так как если сделать наоборот, общие стили будут переопределять стили компонентов.
5.4.5 Компонент домашней страницы
Итак, давайте создадим компонент домашней страницы:
Теперь проанализируем код приложения.
Импорт самой библиотеки React: import React, < Component >from ‘react’
Импорт всех сторонних библиотек. Эти библиотеки также можно объединять в группы, отделяя последние пустой строкой:
Импорт всех необходимых пользовательских компонентов
Импорт стилей компонента
Импорт всех необходимых redux-действий
Импорт всех необходимых пользовательских утилит
Представленный порядок импортов, может быть изменен или дополнен командой. Очень важно, чтобы все члены команды его придерживались, тогда это принесёт ощутимую пользу в плане читабельности. Вот более полный пример того, как можно расположить импорты:
Вы можете заметить ещё одну интересную деталь: импорты в пределах группы расположены в порядке длинны строки. Более короткая строка импорта идет перед более длинной. Так делать не обязательно, можно задавать и какой-то другой порядок (или вообще не задавать). Но по моему личному мнению, импорты в таком порядке смотрятся очень аккуратно, а значит и читабельность лучше.
Далее в методе render() мы отрисовываем все разделы, используя метод map библиотеки underscore. Эта библиотека является очень мощным инструментом при работе с коллекциями, массивами и объектами. Она имеет богатый API и позволяет сильно сократить код, предоставляя готовые методы для многих типовых задач: поиск, сортировка, клонирование, определение типа, проверка на пусто и многое многое другое. Очень рекомендую использовать её в ваших проектах.
Как видно, изображение представлено компонентом, которому мы можем назначить наш собственный CSS-класс. В этом классе мы задаём все необходимые стили изображения:
Вместо этого можно записать:
Более подробно можно почитать здесь.
Ну что ж, компонент домашней страницы готов, теперь можно перейти к реализации списка приёмов, использовав библиотеку для создания таблиц.
Подключаем Sass к Create-React-App
Недавно, Facebook выпустили фантастический инструмент для создания React приложений на основе набора минимальных и упрямых идей, чтобы помочь начинающим начать изучение React, не беспокоясь за свойственный для него сложный инструментарий. С добавлением команды eject, которая позволяет раскрыть скрипты сборки, настройки и другие файлы работающие за кулисами, create-react-app стал чрезвычайно полезным инструментом, как для начинающих, так и для экспертов.
Для начала, установим и сохраним необходимые инструменты из npm, выполнив следующую команду в корне вашего проекта:
Добавление Sass к вашему create-react-app проекту потребует от вас выполнение команды eject. Так же из корня проекта:
В WebPack, loaders (загрузчики, лоадеры) позволяют разработчикам выполнять «предварительную обработку (pre-process)», перед тем как они потребуются или будут загружены. create-react-app использует множество загрузчиков для обработки различных задач сборки, таких как транспайлинг (transpiling) с помощью babel, автоматическая расстановка префиксов с помощью PostCSS. Для того чтобы подключить Sass к вашему проекту, нужно добавить загрузчик, который может обрабатывать Sass файлы.
Начало блока loaders должно выглядеть примерно вот так:
После начала массива loaders вы можете добавить свой загрузчик. Тот Sass загрузчик который мы установили может обрабатывать как Sass, так и Scss файлы.
Теперь когда Sass загрузчик находится на месте, вы можете использовать Sass файлы. Например, в компоненте App.js, который идёт по умолчанию с create-react-app, вы можете написать:
Обратите внимание на то, что вы также должны переименовать ваш файл App.css в App.sass.
Развёрнутое руководство по Sass/SCSS
Примечание Весь код Sass/SCSS компилируется в CSS, чтобы браузеры могли его понимать и корректно отображать. В настоящее время браузеры не поддерживают работу с Sass/SCSS или с любым другим препроцессором CSS напрямую, стандартная же спецификация CSS не предоставляет аналогичную функциональность.
Содержание статьи
Зачем использовать Sass/SCSS вместо CSS?
Препроцессор Sass
Sass не динамичен. У вас не получится генерировать и/или анимировать CSS-свойства и значения в реальном времени. Но можно их создавать более эффективным способом и позволить стандартным свойствам (вроде анимации на CSS) заимствовать их оттуда.
Синтаксис
SCSS особо не добавляет никаких новых возможностей CSS, кроме нового синтаксиса, часто сокращающего время написания кода.
Пререквизиты
Существует 5 CSS-препроцессоров: Sass, SCSS, Less, Stylus и PostCSS.
Эта статья по большей части охватывает SCSS, который похож на Sass. Детальнее об этих препроцессорах можете прочитать на Stack Overflow (оригинал) или на qaru (перевод на русский).
SASS — (.sass) Syntactically Awesome Style Sheets.
SCSS — (.scss) Sassy Cascading Style Sheets.
Обратите внимание Другие препроцессоры функциональностью похожи на SCSS, но синтаксис может отличаться. А ещё, всё то, что работает в CSS, будет также прекрасно воспроизводиться и в Sass, и в SCSS.
Переменные
Переменные в Sass могут быть присвоены любому свойству.
Вложенные правила
Стандартные вложенные CSS-элементы с использованием пробела:
Те же вложенные элементы с помощью SCSS:
Как видно, синтаксис выглядит более чистым и менее повторяющимся.
Это особенно полезно при управлении перегруженными макетами. Таким образом, выравнивание, в котором вложенные свойства записаны в коде, полностью соответствует действительной структуре макета приложения.
За кулисами препроцессор всё ещё компилирует его в стандартный код CSS (показано выше), чтобы он мог быть отображён в браузере. Мы лишь изменяем способ написания CSS.
Амперсанд
С помощью символа & вы можете явно указать, где должен быть вставлен родительский селектор.
Результат компиляции Sass (из предыдущего примера) в CSS ниже.
В итоге амперсанд был компилирован в название родительского элемента a ( a:hover ).
Миксины (они же примеси)
Миксины могут также содержать селекторы, в том числе со свойствами. А селекторы могут содержать ссылки на родительский элемент через амперсанд ( & ), вы ведь помните про него?
Пример работы с несколькими браузерами
Миксины позволяют создавать группы деклараций CSS, которые вам придётся использовать несколько раз на сайте. Хорошей практикой будет использование миксинов для вендорных префиксов. Пример:
Арифметические операции
Как и в реальной жизни, вы не можете работать с числами, у которых несовместимы типы данных (например, сложение рх и em ).
Сложение и вычитание
Всегда обращайте внимание на тип складываемых данных. То есть пиксели к пикселям, слоны к слонам. Таким же образом работает вычитание, но со знаком минус.
Умножение
Деление
С делением дела обстоят немного сложнее, но разобраться можно, ведь в стандартном CSS косая линия (слэш) зарезервирована для использования краткой формы записи свойств. Пример ниже.
Есть три помощника, которые намекнут на возможность деления:
Результат компиляции в CSS:
Остаток
Остаток вычисляет остаток от операции деления. Ниже рассмотрим, как создать «зебру» для HTML-списка.
Создание миксина zebra показано во вставке кода сверху. Директивы @for и @if описаны в секции ниже.
Для создания образца надо написать несколько HTML-элементов.
Результат в браузере:
Зебра успешно сгенерирована миксином zebra
Операторы сравнения
После компиляции в CSS:
Логические операторы
Описание логических операторов
Использование логических операторов Sass для создания кнопки, у которой будет меняться фон в зависимости от её ширины.
Строки
В CSS определено 2 типа строк: с кавычками и без. Sass распознаёт и то, и другое. В итоге вы получите в CSS тот тип строк, который использовали в Sass.
В некоторых случаях можно добавить строки в допустимые значения CSS без кавычек, но только если добавленная строка является завершающим элементом.
Пример ниже демонстрирует, как делать не надо.
Можете складывать строки разных типов, если в них нет пробелов. Пример ниже не будет скомпилирован.
Строки, содержащие пробелы, должны быть отделены кавычками. Решение проблемы:
Пример сложения нескольких строк:
Сложение строк и чисел:
Операторы управления потоками
В SCSS есть функции ( function() ) и директивы ( @directive ). Чуть выше мы уже рассматривали пример функции, когда изучали передачу аргументов внутри миксинов.
Подобно JavaScript, SCSS позволяет работать со стандартным набором операторов управления потоками.
if() — это функция (и иногда основа искусственного интеллекта).
Её использование выглядит довольно примитивным: оператор вернёт одно из двух обозначенных в условии значений.
@if — это директива, использующаяся для разветвления на основе условия.
Проверка на наличие родительского элемента
В следующих примерах рассмотрим создание условных CSS-стилей в зависимости от наличия родительского элемента.
Директива @for
Директива @for выводит набор стилей заданное число раз. Для каждого повторения используется переменная-счётчик для изменения вывода.
Директива @for итерируется 5 раз.
Результат компиляции в CSS:
Директива @each
Результат компиляции в CSS:
Директива @while
Функции в Sass/SCSS
Используя Sass/SCSS можно использовать функции так же, как и в других языках.
Результат в браузере:
Функции в Sass могут возвращать любое корректное значение CSS и могут быть назначены любому свойству. Они даже могут быть рассчитаны на основе переданного аргумента.
Тригонометрия
Тригонометрические функции sin() и cos() часто встречаются в виде встроенных классов во многих языках, таких как JavaScript, например.
Их работу стоит изучать, если нужно сократить время, затрачиваемое на разработку анимаций пользовательского интерфейса, например для создания троббера. Мы, кстати, уже говорили об этом в одной из статей. Но в данном случае это будет код, а не gif-картинка, вставленная в HTML-документ.
Преимущество использования тригонометрии в сочетании с CSS выражается в отсутствии дополнительных HTTP-запросов, как это происходит с gif-изображениями.
Можно писать тригонометрические функции на Sass. Об этом читайте далее.
Написание собственных функций
Написание функций на Sass/SCSS очень похоже на написание функций в других языках.
Использование функции pow() :
Использование функции rad() :
Заключение
Как видите, CSS уже достаточно эволюционировал, чтобы порой заменять JavaScript. Это упрощает работу и экономит время. Кстати, загляните в одну из наших статей, в которой описаны возможности современного CSS.
Use Sass with React to Build Beautiful Apps
When you are developing web applications with React, you know that writing the JavaScript code is only half of the story. The other half is implementing the design using style sheets. When your application becomes larger, using plain CSS style sheets can become tedious and unmaintainable. Sass is one of the most popular alternatives to CSS. It extends the CSS language with variables, mixins, and many other features. It also lets you divide up the style sheets into multiple files.
Many CSS frameworks use Sass to generate their stylesheets. In this tutorial, I will show you how to integrate Zurb’s Foundation framework using Sass mixins. Using this approach keeps the size of your CSS to a minimum. It also gives you the opportunity of more semantic markup.
Create Your React Application with Sass
You will be using the Create React App command-line tool to create the application. First of all, make sure that you have installed Node on your system with a version greater than 10. If you are unsure which Node version you have, open a terminal and run the following command.
Provided your Node version is up to date, the Create React App command-line tool can be run without any installation. In the terminal, navigate to a directory of your choice and run the following command.
This will create a new folder, react-calculator initialize the React application and download all necessary packages. After a minute or two, once the process has finished, change into the new folder with the command below.
Set Up Authentication for Your React App
Any serious web application will need some sort of user authentication. Implementing your own not only takes time and effort but can also introduce security risks if you don’t know exactly what you are doing. Okta lets you set up authentication with just a few commands.
What does the Okta CLI do?
NOTE: You can also use the Okta Admin Console to create your app. See Create a React App for more information.
Set Up Authentication in Your React Sass App
Okta has created a tool to add authentication to React applications in seconds. It uses the Angular Schematics command-line tool to inject code into your skeleton application. Install the Schematics CLI on your system by running the following command in your terminal.
You might be asking why I am telling you to use an Angular tool when you are developing a React application? It turns out that this tool is generic and works for Angular and Vue too! Not only that, but it even has support for Ionic and React Native!
Install OktaDev Schematics:
Now, add Okta for authentication to your React application by running the command below.
You will be asked for your issuer’s URL and client ID. You should have these from the OIDC app you created earlier.
Once the questions have been answered, the schematic will insert all the necessary code into your application to provide the authentication flow. Pretty neat, don’t you think?
Implement a React Calculator with Sass
Create a new file called src/Calculator.js and paste the following code into it.
You can see that the HTML of the calculator consists of groups of buttons. Each button is linked to a callback function in the Calculator class. To give you an insight into what the stack contains at any time, a separate div contains a table displaying the stack entries.
Further down in the file, replace the render() function with the following.
Style Your Calculator in React With Sass
Back in the days when CSS was all the rage, it came with a promise of a bright future where content and style were completely separated. Your HTML code would only contain the actual content and the markup would be completely semantic. One of the promises was that class names would only relate to the meaning of the content and not the way that it was displayed on the screen.
Using Sass together with the Foundation CSS framework, it is possible to regain this strict separation. You might have noticed in the code above, that I have used semantic className attributes. The classes tell you what is contained in a div and not how it should be shown on the screen. This actually has an accessibility advantage because screen readers can group the contents in a meaningful way.
To get started with Sass and Foundation, install two more packages. In the terminal run the following command.
Copy the default settings from the Foundation folder to your src/ folder by running the following command in a terminal.
Now open src/_settings.scss and, and change line 63 ( @import ‘util/util’; ) to the following:
If you look through the settings file, you can see that it defines a huge number of Sass variables. Foundation is highly customizable but the default settings provide a good starting point. Now rename src/App.css to src/App.scss and replace its content with the following.
In this style sheet, I have used a number of Sass features. I have used a number of @include statements to include mixins from the Foundation framework.
These variables are defined in the src/_settings.scss file. If you want to learn more about the Sass language, the official documentation is a good starting point.
How I Theme My React App With Sass is a good tutorial that teaches you more about the power of mixins.
To include the stylesheet in your application, open Home.js and change the import of App.css to the following.
Congratulations, you should now see something like this in your browser.
Learn More About React and Sass
In this tutorial, you learned how to use Sass in a React application. Using the create-react-app command makes it extremely easy to include Sass without any further configuration needed. I also showed you how to achieve truly semantic markup in your application while still using a powerful CSS framework. In this tutorial, I used Zurb’s Foundation as an example. You can achieve a similar effect when using the Bootstrap framework.
You can find the source code for this tutorial on GitHub in the oktadeveloper/okta-react-sass-example repository.
If you want to learn more about Sass, React, or the use of Schematics, feel free to check out the links below.
Please leave a comment below if you have any questions. If you liked this tutorial, follow @oktadev on Twitter to be notified when we publish new ones. We also have a YouTube channel you might like.
Okta Developer Blog Comment Policy
We welcome relevant and respectful comments. Off-topic comments may be removed.