Using variables get class in html - html

Question

I'm pretty new to Sass and I want to depending on certain condition use one css class or another...
Basically if my #media has size #media width:320px I would like to use bootstrap's col-xs-12 and #media has size width:480px then bootstrap's col-xs-6. I've tried to accomplish that by #extend these two classes within #media, but It wont compile.
There is a way to declare a variable and use it in classname?
Something like that:
$my-class: none;
#media (min-width:320px) {
$my-class: col-xs-12;
}
#media (min-width:480px) {
$my-class: col-xs-6;
}
And in my html:
<div class="row">
<div class="col $my-class"><!--Replace with the value of this variable.-->
</div>
</div>
I've read some material of Sass, but like a said, I'm very, very new to it.
I don't know if I'm asking correctly or even if make sense...

Answer 1

Your syntax is a bit off for SASS, but the root of the problem, is that you need to extend or include bootstraps classes. The col-xx-xx classes are actual media queries, so you are essentially placing a media query within a media query.
You want to do this for your SASS:
.row {
.col {
#extend .col-xs-12;
#extend .col-sm-6;
}
}
You don't need the special class for the .col unless you need to apply styles to elements with that class only.
So, your SASS could look like this:
.row {
.your-class {
#extend .col-xs-12;
#extend .col-sm-6;
}
}
Your HMTL
<div class="row">
<div class="col your-class"></div>
</div>
As the other answer posted, SASS doesn't directly affect your HTML and cannot read variables in your HTML. You simply need to use classes like normal CSS as SASS just gets processed to CSS.
As a note! For this to work you must include bootstrap in your SASS file so the preprocessor has access to the variables:
Your SASS file (at the top):
#include 'bootstrap.scss' <-- or wherever your bootstrap SASS files live
Hopefully this helps.

Answer 2

Sass can't access or modify HTML markup. It can only compile to a static CSS file.
Using Bootstrap's grid, you should be able to include column classes for each breakpoint, e.g. col-xs-12 col-sm-6 to get 12 columns # the xs breakpoint and 6 columns # the sm breakpoint.
Alternatively, if you're using Boostrap v4 (still in alpha), you can use #include make-col(6) within your media queries to have a little more control and keep your markup classes more semantic.