CODEWITHSUNDEEP
cssruby-on-railssass
SoSimple
SoSimple

Reputation: 701

SASS - user agent stylesheet overriding link colours

This might seem like a really silly question but I'm having trouble with webkit overriding my SASS.

In my view I have: 

<%= link_to 'New Category', new_category_path, :class => 'button button-new' %>

And in application.css.scss:

.button{
    font-family: "Verdana", sans-serif;
    font-weight: bold;
    font-size: 15px;
    text-align: center;
    border-radius: 3px;

    a{
        color: #FFF;
        text-decoration: none;
    }
}

.button-new{
    background-color: #428bca;
    padding: 1% 2% 1% 2%;   
}

However the link color in my browser is the default blue with an underline. When I inspect the element under developer tools, styling for the link is not being seen/read. Instead the link is using styling from user agent stylesheet.

I know I must be doing something fairly simple wrong but I can't for the life of me spot it!

Upvotes: 1

Views: 747

Answers (2)

cristian
cristian

Reputation: 8744

You should define your SASS like this:

.button{
  font-family: "Verdana", sans-serif;
  font-weight: bold;
  font-size: 15px;
  text-align: center;
  border-radius: 3px;

  color: #FFF;
  text-decoration: none;
}

because your link has .button class.

Upvotes: 1

Richard Peck
Richard Peck

Reputation: 76784

Structure

Your link will create an <a href= element with the class button

This means your styling will not match your HTML structure, as you've got a nested inside the button class, the CSS will basically be looking for this:

<div class="button">
   <a href="..."></a>
</div>

--

The way you want it to work is like this:

<a href="..." class="button"></a>

To do this in the SCSS, you need to style the a tag in line with your class, like this:

a.button{
    font-family: "Verdana", sans-serif;
    font-weight: bold;
    font-size: 15px;
    text-align: center;
    border-radius: 3px;
    color: #fff;
    text_decoration: none;
}

Upvotes: 0

Related Questions