Using a PostCSS function to automate your responsive workflow

Before, you may have read this CSS-Tricks article where I described how to use RFS mixin to automate responsive font sizes. In the latest version of v9, RFS is able to resize any value (with px or rem units) of any CSS attribute, such as margin, padding, border-radius, and even box-shadow.

Today, we will focus on its PostCSS implementation. First, install RFS using npm:

 npm install rfs

The next step is to add RFS to the PostCSS plug-in list. If you are using a postcss.config.js file, you can add it to the list of other PostCSS plugins such as Autoprefixer:

 module.exports = {
  plugins: [
    require('rfs'),
    require('autoprefixer'),
  ]
};

Once the configuration is complete, you can use the rfs() function anywhere in your custom CSS. For example, if you want the font size to be responsive:

 .title {
  font-size: rfs(4rem);
}

…or use it with any attribute you want:

 .card {
  background-color: #fff;
  border-radius: rfs(4rem);
  box-shadow: rfs(0 0 2rem rgba(0, 0, 0, .25));
  margin: rfs(2rem);
  max-width: 540px;
  padding: rfs(3rem);
}

The above code will output the following CSS:

 .card {
  background-color: #fff;
  border-radius: calc(1.525rem 3.3vw);
  box-shadow: 0 0 calc(1.325rem 0.9vw) rgba(0, 0, 0, .25);
  margin: calc(1.325rem 0.9vw);
  max-width: 540px;
  padding: calc(1.425rem 2.1vw);
}

@media (min-width: 1200px) {
  .card {
    border-radius: 4rem;
    box-shadow: 0 0 2rem rgba(0, 0, 0, .25);
    margin: 2rem;
    padding: 3rem;
  }
}

Demo

Here is an example showing how it works. You can resize the demo to see the smooth rescaling effect.

Learn more about how RFS parses CSS

The plugin will look for any occurrence of the rfs() function in the declared value and replace the function with the fluid value using the calc() function. After each rule, the RFS generates a media query that contains some extra CSS to prevent the value from becoming too large.

RFS converts only px and rem values ​​in the declaration; all other values ​​(such as em values, numbers, or colors) will be ignored. This function can also be used multiple times in a declaration, as shown below:

 box-shadow: 0 rfs(2rem) rfs(1.5rem) rgba(0, 0, 255, .6);

RFS and custom properties

 :root {
  --title-font-size: rfs(2.125rem);
  --card-padding: rfs(3rem);
  --card-margin: rfs(2rem);
  --card-border-radius: rfs(4rem);
  --card-box-shadow: rfs(0 0 2rem rgba(0, 0, 0, .25));
}

These variables can be used later in your CSS.

 .card {
  max-width: 540px;
  padding: var(--card-padding);
  margin: var(--card-margin);
  background-color: #fff;
  box-shadow: var(--card-box-shadow);
  border-radius: var(--card-border-radius);
}

Hopefully you find these updates useful at work. If you have any questions or feedback, please leave a comment!

The above is the detailed content of Using a PostCSS function to automate your responsive workflow. For more information, please follow other related articles on the PHP Chinese website!