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 84,256+ developers who get early access to new tutorials, screencasts, articles, and more.

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