Ian McNally

PropertyUnits rule in SCSS Lint

April 06, 2015

Feeling proud about my latest open source contribution. This time, it’ to SCSS Lint.

I added a rule that enforces the units used on element(s).

From the docs:


Configure which units are allowed for property values.

By default a value may have any kind of unit. You can adjust which units are allowed globally by setting the global option. Alternately, you can specify a list of units for a single property by adding it to the properties option, e.g.

  global: ['em', 'rem', '%'] # Allow relative units globally
    border: ['px'] # Only pixels
    'line-height': [] # No units allowed
    margin: ['em', 'rem']

With the above configuration, the following issues would be reported:

p {
  border: 1rem solid blue; /* rem not in `border` list */
  line-height: 55px; /* px not in `line-height` list */
  padding: 10px; /* px not in `global` list */
  margin: 10%; /* % not in `margin` list */

Ian McNally

Hey, I'm Ian. I build websites and write about what I learn as I go. Follow me on Twitter.