Like post-processing, there are CSS pre-processors too. CSS pre-processors solves the flexibility and reusability problems in CSS. It will be hard to manage CSS for large applications.
Nowadays, CSS supports a lot of magic done by pre-processors. That makes the pre-processors less glamourous. But before a few years, CSS pre-processors are like jQuery for writing CSS.
Some of the CSS pre-processors are,
Some of the common functionalities CSS pre-processors adds on top of regular CSS are,
We are going to convert our FAQ component's CSS to SCSS.
Check out this SCSS guide if you don't know it. To support SCSS files, we need to install
node-sass
.
yarn add node-sass@4.14.1
react-scripts
will auto detact the node-sass
and pre-process the .scss
file extensions.
We have a detailed blog post on adding SCSS support in a React app here.
Let's convert our faq.css
to faq.scss
file,
// SCSS Variable definitions $textColor: #65687d; .faq { padding: 48px; border: 1px solid #e7e9f3; border-radius: 24px; background-color: #fff; box-shadow: 0 4px 8px 0 rgba(117, 131, 253, 0.09); transition: transform 350ms ease, box-shadow 350ms ease, color 300ms ease, -webkit-transform 350ms ease; text-decoration: none; // Question and Answer text styles &-question { color: #354fe7; margin-bottom: 8px; font-size: 22px; line-height: 30px; font-weight: bold; transition: color 300ms ease; } &-answer { color: $textColor; margin-bottom: 24px; font-size: 18px; line-height: 28px; } // Details block &-details { display: flex; align-items: center; } // Date text &-date { color: $textColor; margin-bottom: 0px; font-size: 16px; line-height: 18px; } // Author block &-author { &-image { width: 48px; height: 48px; margin-right: 16px; border-radius: 50%; } &-name { color: #222433; margin-bottom: 8px; font-size: 18px; line-height: 18px; font-weight: bold; } } }
You can see the code in action here,