Ask A Question


You’re not receiving notifications from this thread.

How do I generate dynamic classes?

William Kennedy asked in CSS
Is there a way to generate dynamic classes with scss/sass? For example, in my HTML. I want to write 

div class='mt-10'></div>
div class='mt-7'></div>
div class='mt-3'></div>

This should create a div that has a margin-top of 10px, 7px, 3px and I imagine the CSS will look like this:

.mt-{x} {
  margin-top: x;

Any help appreciated?

Ya I was looking at that but then I found this cool library that accomplished what I wanted.

I'm play around with it some more and see if I can come up with a robust solution. 

I did something like this when I was working out the column widths once, maybe you could do similar.

$grid-columns : 16 !default;
$grid-gutter : 0% !default;
$column-width : 100 / $grid-columns;

// Lets calculate the column widths, outputs in %'s
@function grid-column-width($n) {
@return $column-width * $n - ($grid-gutter*($grid-columns - $n)/$grid-columns);

@for $n from 1 through $grid-columns {
%col-#{$n} {
width: grid-column-width($n);
Join the discussion
Create an account Log in

Want to stay up-to-date with Ruby on Rails?

Join 76,990+ developers who get early access to new tutorials, screencasts, articles, and more.

    We care about the protection of your data. Read our Privacy Policy.

    Screencast tutorials to help you learn Ruby on Rails, Javascript, Hotwire, Turbo, Stimulus.js, PostgreSQL, MySQL, Ubuntu, and more. Icons by Icons8

    © 2023 GoRails, LLC. All rights reserved.