CODEWITHSUNDEEP
csstwitter-bootstrapsass
Marin Takanov
Marin Takanov

Reputation: 1138

Bootstrap Sass/Less, overriding variables flexibility

I'm using bootstrap-sass and want to achieve the following:

$custom-brown: #8B4513;

$link-color: orange;
$link-hover-color: darken($link-color, 15%);
$nav-link-hover-bg: darken($custom-brown, 10%);

.myCustomClass {
    $link-color: green;
    $link-hover-color: darken($link-color, 15%);
    $nav-link-hover-bg: darken($custom-brown, 10%);
}

@import "../bootstrap-sass/assets/stylesheets/bootstrap";

The goal is to have different color look depending on the parent class. How can we do it?

Upvotes: 1

Views: 61

Answers (2)

JustH
JustH

Reputation: 1402

Since there is now some level of variable scoping in sass you could try something like: 

$custom-brown: #8B4513;

$link-color: orange;
$link-hover-color: darken($link-color, 15%);
$nav-link-hover-bg: darken($custom-brown, 10%);
@import "../bootstrap-sass/assets/stylesheets/bootstrap";

.myCustomClass {
  $link-color: green;
  $link-hover-color: darken($link-color, 15%);
  $nav-link-hover-bg: darken($custom-brown, 10%);
  @import "../bootstrap-sass/assets/stylesheets/bootstrap/type";
}

Upvotes: 0

Seika85
Seika85

Reputation: 2021

The only option I can think about is using @mixins, like that: https://jsfiddle.net/2zdj4h8z/1/
 

SCSS

$custom-brown: #8B4513;
$link-color: orange;
$custom-link-color: limegreen;

@mixin colorize($base) {
    color: $base;
    &:hover {
        color: darken($base, 15%);
        background: darken($custom-brown, 10%);
    }
}

a {
    @include colorize($link-color);
    .myCustomClass > & {
        @include colorize($custom-link-color);
    }
}

Upvotes: 1

Related Questions