Standard Price Mixin SASS

The Mixin

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.


HTML Code:


CSS Code:

  • 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:

Related Posts

Simple Sticky Element

The user scrolls down the page and once the scrolling reaches the top of an element of my choosing, that element sticks to the top of the window, so it's always visible from that point on...
Read Post

A Nicer Select Dropdown

Better select boxes are all over the internet, but I actually couldn't find one that I liked, and that worked for what I needed...
Read Post

My Emerging CSS System

My attempt at doing CSS better.
Read Post

SASS, Something Went Wrong Reaching...

Tearing my hair out, trying to figure out what's wrong with my SASS files. I keep get a "something went wrong reaching..."
Read Post