-1
\$\begingroup\$

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);
}

\$\endgroup\$
1
  • 1
    \$\begingroup\$ Does it do what you expect it to do? \$\endgroup\$
    – slepic
    Aug 28, 2020 at 9:27

1 Answer 1

1
\$\begingroup\$

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.

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.