AnswerBun.com

Does this SASS make sense?

Code Review Asked by Neil Meyer on November 16, 2020

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

One 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.

Answered by Alessandro Lo Verde on November 16, 2020

Add your own answers!

Related Questions

C++ linked list inheriting from node class

1  Asked on November 17, 2021 by devinthenrough

       

MMMRjs a product of BYTES Genesis

3  Asked on November 17, 2021 by syed-mohammad-sannan

         

Simple marker rendering

1  Asked on November 17, 2021

     

C++20 ScopeGuard

1  Asked on November 15, 2021

   

LeetCode 37: Sudoku Solver

1  Asked on November 13, 2021

         

Converting a float to a fraction as a string

1  Asked on November 11, 2021 by stonkilla4

   

C# consecutive and redundant null checks

6  Asked on November 11, 2021 by frederik-hoeft

   

Format string processing similar to date or printf()

2  Asked on November 11, 2021 by domsson

     

Improvement to Luhn-Checksum Algorithm in Java

2  Asked on November 11, 2021 by elauser

   

Full Adder in Verilog

1  Asked on November 8, 2021

 

Python palindrome checker function

4  Asked on November 8, 2021 by dicomp

     

Ask a Question

Get help from others!

© 2022 AnswerBun.com. All rights reserved. Sites we Love: PCI Database, MenuIva, UKBizDB, Menu Kuliner, Sharing RPP, SolveDir