Convert Less to Sass

[anselmbradford]

Changes

• Convert docs site to scss from less.

• Add scss to packages.

• Change grid__push to u-grid-push.

• Change grid__nested-col-group to u-grid-nested-col-group.

• Change grid__column to u-grid-column.

• Change u-link--colors to u-link-colors.

• Change u-link--colors-base to u-link-colors-base.

• Change u-link--no-border to u-link-no-border.

• Change u-link--hover-border to u-link-hover-border.

• Change u-link--border to u-link-border.

• Change @grid_gutter-width to $grid-gutter-width

• Change @block--bg to $block-bg.

Testing

1. yarn install && yarn build && yarn build-packages
2. Deploy preview https://deploy-preview-1993--cfpb-design-system.netlify.app/design-system/ should look okay.

Notes

• Sass deprecates division using /, and instead uses the namespaced math.div(…,…).

Todo

• The import works differently in Sass than it does in Less. In our Less configuration, the imports will weed out duplicates. In the Sass config, it will not weed out duplicates, so each package that imports other packages will get the other package's contents, which means the built dependencies are duplicated across the individual packages. Arguably this is correct. Each package should be able to be used independently of the others. However, how we currently use the packages is to install each one individually. Instead of working out removing this duplication, what I will be working on is having one published package, cfpb-design-system, from which each component can be extracted. In the interim, what we should do in cfgov is to import cfpb-design-system.scss instead of the individual packages. Some of the other imports will need to be sorted out on a case-by-case basis, since import (reference) doesn't have an equivalent in sass (see https://stackoverflow.com/questions/22851662/what-is-the-equivalent-of-lesss-import-reference-style-in-sass).

[netlify]

✅ Thanks for the improvements! Browse a preview of your changes using the link below.

Name	Link
🔨 Latest commit	c95501c
🔍 Latest deploy log	https://app.netlify.com/sites/cfpb-design-system/deploys/66915755108e4800082e72b7
😎 Deploy Preview	https://deploy-preview-1993--cfpb-design-system.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[contolini]

Using both manual and automated checks, I haven't been able to find any visual differences between the staging site and prod so everything seems a-okay.