css-atoms/src/less/background-atom.less

A legal way of doing inline css

// Size
.bg-size@{background-separator}cover {
  background-size: cover;
}

.bg-size@{background-separator}contain {
  background-size: contain;
}

// Position
.bg-position@{background-separator}center {
  background-position: center;
}

.bg-position@{background-separator}right {
  background-position: right;
}

.bg-position@{background-separator}bottom {
  background-position: bottom;
}


// Repeat
.bg-repeat@{background-separator}none {
  background-repeat: no-repeat;
}

.bg-repeat@{background-separator}y {
  background-repeat: repeat-y;
}

.bg-repeat@{background-separator}x {
  background-repeat: repeat-x;
}