CODEWITHSUNDEEP
sass
Evanss
Evanss

Reputation: 23593

Set both normal and hover style with SASS

This seems like a basic question but I cant find the answer anywhere. How can I set both the normal and :hover styles for a link with SASS?

I want to control the default and hover styles for all links in one place and be able to pass this 'variable' (or whatever the correct word is) to different selectors throughout my CSS.

So similar to the code below but I want to control the default and hover style on the first line. So later if I wanted these links to have an :active style I could just add it once at the top of the page. 

$primary-color: #333;

.some-class {
  color: $primary-color;
}

.some-class-other-class {
  color: $primary-color;
}

Upvotes: 0

Views: 1706

Answers (3)

Fellow Stranger
Fellow Stranger

Reputation: 34013

Solution for any selector:

&,
&:hover {
  color: red;
}

E.g.

.my-class {
  &,
  &:hover {
    color: red;
  }
}

If you specifically only want to target all links:

a, a:hover {
  color: red;
}

Upvotes: 6

Evanss
Evanss

Reputation: 23593

This works: 

@mixin style-1 {
    background: red;
    &:hover {
        background: $blue
    }
}

.something {
    @include style-1;
}

.something-else {
    @include style-1;
}

.something-else-again {
    @include style-1;
}

Upvotes: 1

Guzman Iglesias
Guzman Iglesias

Reputation: 89

You can try:

a{
    &:link, &:hover{
        color: $primary-color;
    }
    &:active{
        color: $other-color;
    }
}

Upvotes: 0

Related Questions