esio esio - 4 months ago 25
Sass (Sass) Question

Select css class depend on content

I have a problem with css.

I would like to select element class. I use bootstrap and I would like use bootstrap classes like


I use vue.js and I have a object with id, name, status, etc., status name doesn't match to .success or .danger but I need to use this two classess depends of status name.

I know two solution:

  1. Write JS function to return class name depends on status name.
    <tr class={{myFun(object.status)}}
    . My function is simple case statement.

  2. Extend bootstrap class name in sass.
    .STATUS { @extend .success; }

I'm beginner with frontend, before I created very simple static html pages and I'm courious which solution I should use? Maybe another one? I tried to find something in internet but I found nothing interested.
Could anybody has any advice for me?


You can use Vue's built-in class directive, like so:

    'success': object.status === 'somestatus',
    'error': object.status === 'otherstatus'

There's no need to write a new method for that. Take a look at the Class & Style Bindings Guide for more examples.