some scss properties aren't highlighted correctly

[alexr00]

Prerequisites

• Put an X between the brackets on this line if you have done all of the following:
  • Reproduced the problem in Safe Mode: http://flight-manual.atom.io/hacking-atom/sections/debugging/#using-safe-mode
  • Followed all applicable steps in the debugging guide: http://flight-manual.atom.io/hacking-atom/sections/debugging/
  • Checked the FAQs on the message board for common solutions: https://discuss.atom.io/c/faq
  • Checked that your issue isn't already filed: https://github.com/issues?utf8=✓&q=is%3Aissue+user%3Aatom
  • Checked that there is not already an Atom package that provides the described functionality: https://atom.io/packages

Description

[Description of the issue]

Steps to Reproduce

1. Open an scss file that has a class name with the font property used.
2. Swap between scss and css highlighting in the bottom right

body {
	margin: initial;
	font: 400 1em/1 'Inter', sans-serif;
	background: rgb(var(--dark-600, 255, 0.0));
}

Expected behavior: font gets a different scope from the other properties

Actual behavior: The SCSS looks like:

Reproduces how often: [What percentage of the time does it reproduce?]

Versions

You can get this information from copy and pasting the output of atom --version and apm --version from the command line. Also, please include the OS and what version of the OS you're running.

Additional Information

Any additional information, configuration or data that might be necessary to reproduce the issue.

Originally from @whaaaley in microsoft/vscode#144101