How to change correctly color variable with SASS (for button

Topic: How to change correctly color variable with SASS (for button, etc ...)

AlexPEREIRA free asked 8 years ago

Hello ! I use MDB PRO (with MDB Free with bower) and i want to change correctly color of primary / default / success / ... ETC variables for change by example button. But i change that with SASS in custom file but it's never works. Do you have any solution for me ? For this moment i use that :

%primary-color{
    background-color: $primary-color;
    &:hover,&:focus{
        background-color: $primary-color-dark !important;
    }
}

but i just want to change $success-color variable for exemple. Thx

Add comment

twentyfour pro answered 5 years ago

0 0 Best answer

Just double-checking for the MDB-Pro users: editing the /sass/mdb/free/colors.scss file is also the correct way for us? thanks very much !

Bartłomiej Malanowski staff commented 5 years ago

You can modify that file, but if you want to be sure that your changes won't be overwritten, I recommend you to add your custom code to "_custom-styles..scss" or "_custom-variables.scss"

Add comment

ijabit free answered 8 years ago

0 0 Best answer

.btn-primary {
    background: $btn-primary-bg;
    &:hover, &:focus {
        background-color: lighten( $brand-warning, 5%)!important;
    }
}

.btn-success {
    background: $btn-success-bg;
    &:hover, &:focus {
        background-color: lighten( $btn-success-bg, 2%)!important;
    }
}

.btn-info {
    background: $btn-info-bg;
    &:hover, &:focus {
        background-color: lighten( $btn-info-bg, 5%)!important;
    }
}

.btn-warning {
    background: $btn-warning-bg;
    &:hover, &:focus {
        background-color: lighten( $btn-warning-bg, 6%)!important;
    }
}

.btn-danger {
    background: $btn-danger-bg;
    &:hover, &:focus {
        background-color: lighten( $btn-danger-bg, 3%)!important;
    }
}

Please insert min. 20 characters.

Because I didn't want to change one of the primary colors of the entire site just to change the buttons, I re-declared the button styles after MDB did it's thing: .btn-default { color: $btn-default-color !important; background: $btn-default-bg; &:hover, &:focus { background-color: lighten( $brand-warning, 5%)!important; } } .btn-primary { background: $btn-primary-bg; &:hover, &:focus { background-color: lighten( $brand-warning, 5%)!important; } } .btn-success { background: $btn-success-bg; &:hover, &:focus { background-color: lighten( $btn-success-bg, 2%)!important; } } .btn-info { background: $btn-info-bg; &:hover, &:focus { background-color: lighten( $btn-info-bg, 5%)!important; } } .btn-warning { background: $btn-warning-bg; &:hover, &:focus { background-color: lighten( $btn-warning-bg, 6%)!important; } } .btn-danger { background: $btn-danger-bg; &:hover, &:focus { background-color: lighten( $btn-danger-bg, 3%)!important; } }

Add comment

Michal Szymanski staff answered 8 years ago

0 0 Best answer

Hi, If you set a variable in your custom .scss file, MDB doesn't know about that so it wont work. Go to sass/mdb/free/colors.scss file and find "success-color" variable. Change it, compile scss file to new css file and it will work.

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

ForumUser: Free
Premium support: No
Technology: General Bootstrap questions
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: No
Provided link: No

AlexPEREIRA

0Support score
2Questions 0Answers 0Snippets