Styling the font size in a nav bar The font size scales up/down based on the size of the browser to fit the nav bar buttons (using @media).

.navButtonText p{
    text-align: center;
    margin: auto;
    font-family: 'Indie Flower', serif;
                 font-weight:900;
                 color: gray;
                 font-size: 20px;
line-height: 20px;
  vertical-align: middle;
    margin-top: 6px;
}
}
@media only screen and (max-width: 650px) {
    .navButtonText p{
    text-align: center;
    margin: auto;
    font-family: 'Indie Flower', serif;
                 font-weight:900;
                 color: gray;
                 font-size: 18px;
line-height: 20px;
  vertical-align: middle;
    margin-top: 6px;
}
}
@media only screen and (max-width: 550px) {
    .navButtonText p{
    text-align: center;
    margin: auto;
    font-family: 'Indie Flower', serif;
                 font-weight:900;
                 color: gray;
                 font-size: 16px;
line-height: 20px;
  vertical-align: middle;
    margin-top: 6px;
}
}
@media only screen and (max-width: 450px) {
    .navButtonText p{
    text-align: center;
    margin: auto;
    font-family: 'Indie Flower', serif;
                 font-weight:900;
                 color: gray;
                 font-size: 14px;
line-height: 20px;
  vertical-align: middle;
    margin-top: 6px;
}
}
@media only screen and (max-width: 350px) {
    .navButtonText p{
    text-align: center;
    margin: auto;
    font-family: 'Indie Flower', serif;
                 font-weight:900;
                 color: gray;
                 font-size: 12px;
line-height: 20px;
  vertical-align: middle;
    margin-top: 6px;
}
}


As you can see, it is quite a bit of styling for one thing. I was wondering if there was a way I could clean up this code, so I wouldn't need to have it in these many lines.

I have SASS and Compass which I am willing to use.
You could remove all the duplicate lines in the @media queries and provide only the changes in these tags. This is beacause in CSS, the CSS classes that are interpreted by the browser down-most on your page, are the ones prevailing in your final design. All previous defined CSS rules apply unless overwritten. In your case this means that only the font-size changes and should be redefined:

.navButtonText p {
    text-align: center;
    margin: auto;
    font-family: 'Indie Flower', serif;
    font-weight: 900;
    color: gray;
    font-size: 20px;
    line-height: 20px;
    vertical-align: middle;
    margin-top: 6px;
}
@media only screen and (max-width: 650px) {
    .navButtonText p {
        font-size: 18px;
    }
}
@media only screen and (max-width: 550px) {
    .navButtonText p {
        font-size: 16px;
    }
}
@media only screen and (max-width: 450px) {
    .navButtonText p {
        font-size: 14px;
    }
}
@media only screen and (max-width: 350px) {
    .navButtonText p {
        font-size: 12px;
    }
}


FYI: there is away to prevent this from happening, using the !important tag.