{"id":4017,"date":"2019-03-18T14:48:19","date_gmt":"2019-03-18T14:48:19","guid":{"rendered":"https:\/\/leap.staging.ribbitt.com\/insights\/migrating-from-sass-to-postcss\/"},"modified":"2019-03-18T14:48:19","modified_gmt":"2019-03-18T14:48:19","slug":"migrating-from-sass-to-postcss","status":"publish","type":"insights","link":"https:\/\/leap.staging.ribbitt.com\/insights\/migrating-from-sass-to-postcss\/","title":{"rendered":"Migrating From SASS to PostCSS"},"content":{"rendered":"

PostCSS<\/a> is a tool that developers can use to write CSS in a familiar way. Additionally it gives them the flexibility of a pre-processor. <\/p>\n

But adopting PostCSS into your workflow is a process. I’ll show you how to convert common SASS features into the PostCSS way and leave you with a challenge. To follow along, you will need an understanding of CSS\/SASS, npm, and JavaScript, but are not required.<\/p>\n

By the end of this article, you’ll know how to:<\/p>\n

1. Install or run PostCSS
\n2. Build your PostCSS into an output file
\n2. Replace SASS variables
\n3. Replace SASS nested rules
\n4. Use named media queries<\/p>\n

Installing & Running<\/h2>\n

PostCSS is best used in conjunction with a build tool such as Parcel or Webpack but can also used via their command line tool (CLI). <\/p>\n

Instead of installing the command line tool, we can use npx to run any commands needed. The npx command pulls a package, runs the command with the arguments given, and then deletes itself. This is great for one time use tools or if you want to keep your filesystem clean.<\/p>\n

\nnpx postcss -o main.css css\/app.css\n<\/div>\n

\nThis command executes the following steps…<\/p>\n

1. Tells PostCSS to look for a file named css\/app.css
\n2. Compiles the css
\n3. Outputs the new css into a file named main.css<\/p>\n

Variables<\/h2>\n

In SASS\/SCSS, you declare variables the $ symbol. With PostCSS, you have several options.<\/p>\n

1. Install the postcss-nested-vars<\/strong><\/a><\/strong> plugin, which enables SASS style variables
\n2. Refactor your variables into native CSS variables<\/p>\n

I recommend using option 2. Using native CSS variables removes some overhead, as you don’t need a plugin. Not to mention, they’re fun to use! They also offer you flexibility since CSS variables can be changed in real time. Think of the possibilities!<\/p>\n

Writing CSS variables is easy. To declare global variables, you can add them to a :root element. This will wrap them into a global context of sorts. You can also declare variables inside of another selector if you wanted.<\/p>\n

\n
\n:root {\n    --primary-color: #393a4a;\n}\n\n.bg-primary {\n    --secondary-color: #eee;\n    Background-color: var(--primary-color);\n    Color: var(--secondary-color);\n}\n<\/code><\/pre>\n<\/div>\n
<\/p>\n
Nested Selectors<\/h2>\n
PostCSS, by default, does not include support for nested selectors. Yet, this functionality can be enabled through the use of the postcss-nested<\/a> plugin. But before we do that, we need to create a configuration file.<\/p>\n
This configuration file tells PostCSS what plugins to use and where they’re located. You can name the file anything, but for best practices, it’s best to name it postcss.config.js<\/strong>. Place this file in the root of your project.<\/p>\n
\n
module.exports = {\n  plugins: [\n    require(‘postcss-nested’), \n  ]\n}\n<\/code><\/pre>\n<\/div>\n
Next, initialize an npm project.<\/p>\n
\n
npm init<\/code><\/pre>\n<\/div>\n
Now install the plugin.<\/p>\n
\n
npm install postcss-nested –save<\/code><\/pre>\n<\/div>\n
Now when you run your PostCSS command you can specify that you have a settings file using the -c flag.<\/p>\n
\n
\nnpx postcss -o main.css -c postcss.config.js css\/app.css<\/code><\/pre>\n<\/div>\n
\nWith that out of the way, you can now write nested selectors that will expand.<\/p>\n
\n
\n.selector-1 {\n\t.selector-2 {\n\t\tColor: black;\n\t}\n}\n\n\/* output *\/\n.selector-1 .selector-2 {\n\tColor: black;\n}<\/code><\/pre>\n<\/div>\n
<\/p>\n
Named Media Queries<\/h2>\n
If you’re like me, you’ve grown accustomed to naming your CSS queries. The postcss-custom-media<\/a><\/strong> plugin lets you do exactly that.<\/p>\n

\n<\/code><\/p>\n
@custom-media --small-viewport (max-width: 30em);\n<\/code><\/pre>\n<\/div>\n
Here I’ve defined a new media query named small-viewport<\/em> using the @custom-media <\/strong>directive. When you use this query, you reference it using the @media directive<\/strong>.<\/p>\n
\n
@media (--small-viewport) {}\n<\/code><\/pre>\n<\/div>\n
I hope you have learned a little bit about PostCSS and how you can begin using it today. There are many plugins that extend the abilities of PostCSS that make it an invaluable tool to have.<\/p>\n","protected":false},"excerpt":{"rendered":"
PostCSS is a tool that developers can use to write CSS in a familiar way. Additionally, giving them the flexibility of a pre-processor. In this article I am going to show you how you can adopt PostCSS into your workflow.<\/p>\n","protected":false},"featured_media":4018,"menu_order":54,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-4017","insights","type-insights","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized"],"acf":[],"_links":{"self":[{"href":"https:\/\/leap.staging.ribbitt.com\/wp-json\/wp\/v2\/insights\/4017","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/leap.staging.ribbitt.com\/wp-json\/wp\/v2\/insights"}],"about":[{"href":"https:\/\/leap.staging.ribbitt.com\/wp-json\/wp\/v2\/types\/insights"}],"version-history":[{"count":0,"href":"https:\/\/leap.staging.ribbitt.com\/wp-json\/wp\/v2\/insights\/4017\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/leap.staging.ribbitt.com\/wp-json\/wp\/v2\/media\/4018"}],"wp:attachment":[{"href":"https:\/\/leap.staging.ribbitt.com\/wp-json\/wp\/v2\/media?parent=4017"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/leap.staging.ribbitt.com\/wp-json\/wp\/v2\/categories?post=4017"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/leap.staging.ribbitt.com\/wp-json\/wp\/v2\/tags?post=4017"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}