Skip to content

Reset At Rule

Tommy Hodgins edited this page Sep 28, 2019 · 1 revision

A custom at-rule that adds a CSS reset to the file, optionally scoped to a CSS selector and its children.

Syntax

@--reset;
@--reset <css selector>;
  • <css selector> is any valid CSS selector

Usage

There are two ways to use this, either as a global reset by using @--reset with no selector:

Input

@--reset;

Output

* {
  box-sizing: border-box;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-kerning: auto;
}

Or alternatively you can supply a CSS selector to reset elements matching that selector and their children:

Input

@--reset div;

Output

div, div * {
  box-sizing: border-box;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-kerning: auto;
}

More Info

This reset is styled after tomhodgins/preset