My application.scss file in SASS is causing unexpected CSS changes on the production server, particularly affecting my a:hover
Here is a snippet from my application.css:
pre {
background-color: #eee;
padding: 10px;
font-size: 11px; }
a {
color: #000000;
}
a:visited {
color: #666666;
}
a:hover {
border-bottom: none;
}
div {
&.field, &.actions {
margin-bottom: 10px; } }
However, Firefox reports different CSS on the production server:
pre {
background-color: #EEEEEE;
font-size: 11px;
padding: 10px;
}
a {
color: #000000;
}
a:visited {
color: #666666;
}
a:hover {
border-bottom: 1px solid #777777;
}
div.field, div.actions {
margin-bottom: 10px;
}
On my development machine, Firefox shows the following CSS instead:
a:hover {
border-bottom: medium none;
}
I am using Rails 3.2.13 and I have never encountered this issue before. I have spent hours trying to fix this problem as it negatively impacts the appearance of my homepage, making it look unprofessional.