Using a variable for border-radius, instead of a placeholder?

Victor Gil Borrego

Variables are best used for property values -- like a color that you want to use in multiple properties, such as border, color, background-color, and so on.

Use placeholders for one or more declarations (property and value pairs). Placeholders are great for assigning the same set of declarations to more than one style. Here's an example of Sass using placeholders:

%icon {
  transition: background-color ease .2s;
  margin: 0 .5em;
}

.error-icon {
  @extend %icon;
  background-color: red;
}

.info-icon {
  @extend %icon;
  background-color: green;
}

And here's the final CSS that's generated:

.error-icon, .info-icon {
  transition: background-color ease .2s;
  margin: 0 .5em;
}

.error-icon {
  background-color: red;
}

.info-icon {
  background-color: green;
}

The placeholder creates a group selector .error-icon, .info-icon with the common properties shared by the two styles. This means you don't need to repeat that same code in two different places.

Victor,

I imagine you're asking whether or not you should make this into a class vs. styling each element individually. I think this falls back on the concept of 'DRY' programming. If you notice that you're writing a ton of code, giving EVERYTHING the same border radius style, then it is best to write it ONE place, and apply a class to the elements you want styled with a class, or a specific selector. For example, if you're styling a ton of images with a border, instead of going through your HTML and giving every image a class, you can just select files that end/begin with certain words. This would look something like this;

img[src$=".jpg"] {
  border-radius: 10px;
}

the above would target every image ending in .jpg and apply the desired border to it. If you're fuzzy on selectors, take a look at the selectors CSS course, as it is pretty in depth on the cool selectors you can use to make your CSS a little less 'class' heavy.

Hi Garrett,

the thing that I was thinking about was more something between these:

%b-r:{
    border-radius: 10px;
}

vs

.class{
   border-radius: $b-r;
}