A logical and modular way of styling buttons with SCSS

sass-buttons.scss

.action_button {
    
    background-color: #999;
    border-color: #999;
    
    &:hover {
        background-color: lighten(#999, 10%);
        border-color: lighten(#999, 10%);
    }
    
    &.action_button--primary {
        
        $color: #e0004d;
        
        background-color: $color;
        border-color: $color;

        &:hover {
            background-color: lighten($color, 10%);
            border-color: lighten($color, 10%);
        }
        
    }
    
    &.action_button--secondary {
        
        $color: #03a196;
        
        background-color: $color;
        border-color: $color;

        &:hover {
            background-color: lighten($color, 10%);
            border-color: lighten($color, 10%);
        }
        
    }
    
    &.action_button--tertiary {}
    
    // Sizes
    
    &.action_button--small {}
    
    &.action_button--large {}
    
    // Styles
    
    &.action_button--hollow {
        
        &.action_button--primary {
            
            $color: #e0004d;
                
            background: transparent;
            color: $color;
            &:hover {
                background: $color;
                color: #fff;
            }
        }
        
        &.action_button--secondary {
            
            $color: #03a196;
            
            background: transparent;
            color:    $color;
            &:hover {
                background: $color;
                color: #fff;
            }
        }   
    }   
}