Styling the font size in a nav bar

Question

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.

Answer 1

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.

• jtmingus: You have an extra closing bracket for .navButtonText p css
• JohannesB: Yes, thank you for pointing that out, I copied his CSS though, it's also wrong in the original question.

Answer 2

You could also go for a scss or less solution (the syntax would be identical for both preprocessors in this case), which imo gives you even cleaner code the what @JohannesB suggested. The resulting (compiled) css would be the same though.

.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) {
 font-size: 18px;
 }
 @media only screen and (max-width: 550px) {
 font-size: 16px;
 }
 @media only screen and (max-width: 450px) {
 font-size: 14px;
 }
 @media only screen and (max-width: 350px) {
 font-size: 12px;
 }
}

• JohannesB: You missed the max-width:450px and font-size:14px, other than that, good answer.
• DJONES: sorry about the confusion guys, I didn't know CodeReview was a thing.
• JohannesB: @Jonathan, on SO it is not considered good practice to focus on the person instead of on the content, please read the name-calling section in the be nice-policy.