How to build css classes dynamically?

Hi guys,

i am using laravel as a backend for vuejs. right now i am styling some content that has state and i keep changing css classes to make it look nice. Therefore i am currently tayloring a lot of css classes which are basically always the same, just the names and the colors change (i am using tailwind classes for styling). And i keep thinking that there must be a smarter way to construct the necessary css classes. So I am not yet all too familiar with this whole mix toolchain and it might be a totally obvious solution if you know the toolchain. However, can someone point me in the right direction how to solve this problem more efficiently?

Thank you all very much in advance.

jlrdw

7 years ago

Level 75

You do not have to use mix. Or all css doesn't need compiling. You can use custom css file where needed. Especially a case where one page is same as other except style.

For the css that is the same you can pop it in as needed:

<?= View::make('partials/dpag')->render(); ?>

Where I am putting this in:

.pagination li {
    display: inline-block;
}

.pagination a {
    font-size: 1.7em;
    font-weight: bold;
    /*height: 25px;*/
    color: #3097D1;
    padding: 8px 12px;
    text-decoration: none;
    transition: background-color .3s;
    border: 1px solid #3097D1;
    margin: 0 4px;
}
.active {
    font-size: 1.7em;
    background-color: #3097D1;
    color: #fff;
    border: 1px solid #4CAF50;
    padding: 8px 12px;
}
.yiiactive {
    font-size: 1.7em;
    background-color: #3097D1;
    color: #fff;
    border: none;
    padding: 8px 12px;
}

.pagination a:hover {
    background: #cccccc;
}

.disabled {
    font-size: 1.7em;
    color: #fff;
    background-color: #ddd;
    padding: 8px 12px;
}
.yiidisabled {
    font-size: 1.7em;
    color: #fff;
    border: none;
    padding: 8px 12px;
}

It is put right into an existing style tag. This part remains the same on all the pages.

Dig into laravel's API, it has much information.

Note I don't use blade.

But there are packages now where you can conditionally control css. I have never needed a package.

Please or to participate in this conversation.