3
\$\begingroup\$

I want to know if my SCSS code looks correct.
Note: Everything works as I expected. The Main Idea of this code is to generate Word Break Utilities for controlling word breaks in an element.
using SCSS mean I can declare only css classes in html element.

here is the result of my code :

.break-normal {
  overflow-wrap: normal;
  word-break: normal;
}

.break-words {
  overflow-wrap: break-word;
}

.break-all {
  word-break: break-all;
}

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

My SCSS CODE :

$wordBreak: (
  "break-normal": normal,
  "break-words": break-word,
  "break-all": break-all,
  "truncate": (
    "overflow": hidden,
    "text-overflow": ellipsis,
    "white-space": nowrap
  ),
) !default;

@each $wordBreakClassName , $wordBreakType in $wordBreak {
  @if ($wordBreakClassName) == "break-normal" {
    .#{$wordBreakClassName} {
      overflow-wrap: $wordBreakType;
      word-break: $wordBreakType;
    }
  }
  @else if ($wordBreakClassName) == "break-words" {
    .#{$wordBreakClassName} {
      overflow-wrap: $wordBreakType;
    }
  }
  @else if ($wordBreakClassName) == "break-all" {
    .#{$wordBreakClassName} {
      word-break: $wordBreakType;
    }
  }
  @else if ($wordBreakClassName) == "truncate" {
    .#{$wordBreakClassName} {
      overflow: map-get(map-get($wordBreak, truncate), overflow);
      text-overflow: map-get(map-get($wordBreak, truncate), text-overflow);
      white-space: map-get(map-get($wordBreak, truncate), white-space);
    }
  }
}
\$\endgroup\$
  • 1
    \$\begingroup\$ Could you explain why you are using SASS here at all? The SASS code is more conplicated and difficult to understand that the created CSS. \$\endgroup\$ – RoToRa Oct 6 '20 at 21:37

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.