Does this SASS make sense?

Question

I'm trying to automate the CSS I write by developing SASS files I can reuse. I want to create a utility SASS file for padding and came up with the following.


// Variables to set the amount of padding

$_1: 0.25rem !default;
$_2: 0.5rem !default;
$_3: 1rem !default;
$_4: 1.5rem !default;
$_5: 3rem !default;

// Various Padding mixins

// Padding on the Y-axis

@mixin py($unit) {
  padding-top: $unit !important;
  padding-bottom: $unit !important;
}

// Padding on the X-axis

@mixin px($unit) {
  padding-left: $unit !important;
  padding-right: $unit !important;
}

//   Padding all around

@mixin p($unit) {
  padding: $unit !important;
}

// Padding on top

@mixin pt($unit) {
  padding-top: $unit !important;
}

// Padding on the right

@mixin pr($unit) {
  padding-right: $unit !important;
}

// Padding on the bottom

@mixin pb($unit) {
  padding-bottom: $unit !important;
}

// Padding on the left

@mixin pl($unit) {
  padding-left: $unit !important;
}

Does it make any sense though? Im not too sure. Does it mean I can use it like this? If I want to set padding of a nav element?


nav ul {
  @include py(1);
}

Alessandro Lo Verde · Answer

No, it does not make sense; the goal of SASS is to make things dry and maintainable. There's no point in writing:
nav ul {
  @include py(1);
}

instead of:
nav ul {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

or:
nav ul {
  padding: 1rem 0;
}

With your mixing you are not writing less code and you make it sightly less readable.
Furthermore you should note that the !important keyword should be avoided as much as possible, since it's very hard to override and, in most of the cases, that's not what you want.

Does this SASS make sense?

One Answer

Add your own answers!

Ask a Question