Sass 'if' statement based on existing class

The answer is you cannot do this with SASS/SCSS.

You are trying to detect the possession/assignment of a class to a DOM element.

The way to interact with DOM elements is JavaScript

What you need to do is use JavaScript to detect if "picture-x#" has class "class-top" and then set a random top value accordingly.

E.g.

var picture = document.GetElementById('picture-1');
var pic_class = picture.className
if(pic_class.indexOf('class-top') != -1)
{
    /*Returns a random number between 1 and 100*/
    picture.style.top = Math.floor((Math.random()*100)+1) + 'px';
}

Sidenote: top requires a unit of measurement (e.g. px), hence the + 'px'

Sounds like what you want is something that can figure out which code paths go unused in your css and minifies accordingly. Not sure if something like that exists, since it would have to make the assumption that you don't dynamically assign such paths using JS later, which is not really a safe assumption (even if it tried to parse the JS to do so, you could always assign a class based on user input...), so it would have to be a configurable option turned off for default for some plugin to gulp/grunt/etc, it sounds like.

In your particular case, you do have a few options, but they're outside the bounds of sass/scss. Basically, if you're generating these images with positioning classes server side, you could have the same code at the same time construct a matching file that later gets imported by sass. Your 'master' file that contains all possible classes doesn't get processed, just used as a reference by this other file.

If you're doing it client side, then what your proposing doesn't make sense. You could inject the CSS rules dynamically with javascript, but then you're just sending all the rules in the JS to be added there instead of just including them in the CSS to begin with, so what's the point? To avoid that, you'd have to have them imported from the server as-needed, which would be a terrible/absurd idea.

I'm going to say, though, this sounds like quite the over-optimization. What's the problem having a few extra CSS rules? Are you really trying to save a few bytes? Throw everything in the CSS file and don't worry about unless you have a good reason to.

Bit old now but I worked on something similar recently - here I use an array to loop through the differing classes of buttons and append styles accordingly. Please be aware that there are variables in the code snippet that are not declared.

$buttonSizes: large-buttons, medium-buttons, small-buttons;
@each $buttonSizesItem in $buttonSizes {
  %#{nth($buttonSizesItem, 1)}{
    @if (nth($buttonSizesItem, 1))== large-buttons{
      @include font-size(2);
      @include rounded(6);
      padding: 8px 15px;      
    }
    @if (nth($buttonSizesItem, 1))== medium-buttons{
      @include font-size(1.8);
      @include rounded(5);
      padding: 4px 12px;
      &.button-loading {
        &:before{
          top: 2px;      
        }
      }
    }
    @if (nth($buttonSizesItem, 1)) == small-buttons{
      @include font-size(1.6);
      @include rounded(4);
      padding: 4px 10px;
      &.button-loading {
        &:before{
          top: 0;      
        }
      }
    }
  }
}