All threads / How do I generate dynamic classes?

Ask A Question

Notifications

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. 

https://github.com/digitaledgeit/sass-spacing

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

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

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

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

    logo Created with Sketch.

    Ruby on Rails tutorials, guides, and screencasts for web developers learning Ruby, Rails, Javascript, Turbolinks, Stimulus.js, Vue.js, and more. Icons by Icons8

    © 2020 GoRails, LLC. All rights reserved.