Standard Price Mixin SASS
Mostly automatically formats a price in the design shown, with the dollar sign raised and the cents is stacked above the "/mo". There are parameters to adjust the some of the placement of elements.
Why Was This Created?
This format for pricing appears quite often, so I might as well make a reusable element to get me most of the way there. It will take the font height for the dollar amount and adjust everything accordingly (although there is some placement of elements that probably needs slightly adjusted, which you can through the mixin parameters).
1. Make sure you're using SASS
2. Add the mixin code below to your SASS stylesheet
3. Add the HTML to set up your pricing:
4. For the elment you would like to style, add the CSS code below:
5. Make adjustments to the parameters in the mixin until everything is lined up and sized properly.
- The first parameter is the height for the font of the dollar amount (generally the largest font size in this arrangement).
- The second parameter is the top margin on the dollar sign, so it can be adjusted up and down as needed.
- The third parameter is the top margin for the dollar amount.
- The fourth parameter is the top margin for the cents.
- The fifth parameter is the top margin for the "/mo" part of the arrangement (however the mixin tries to place this along the baseline automatically).
- The fifth parameter is the right margin for the "/mo" part, so it can be adjusted horizontally. It's set to be at the bottom right corner, but usually needs to be adjusted with this parameter.
SASS Mixin Code:
The Built Environment