How to reuse and apply scss module to other web with different id names?

Question

I am learning css/scss. I would like to make a scss module and others also can use it in their app in the simplest way. I hope others just need to change id name and can use it. For example, I have a module _buttons.scss:

.btn {
  position: relative;
  background: #27022d;
  color: #fff;
  transition: 500ms;
  background-image: (linear-gradient(270deg, #8e9ac2, #42579a));
  background-size: 400% 400%;
  animation: TransitioningBackground 10s ease infinite;

  &:hover {
    background-image: (linear-gradient(to left, #2d8fe5, #d155b8));
    transform: scale(1.05);
    cursor: pointer;
  }
  // shine animation left side
  &::before {
    content: '';
    display: block;
    position: absolute;
    background: rgba(255, 255, 255, 0.5);
    width: 60px;
    height: 100%;
    top: 0;
    filter: blur(30px);
    transform: translateX(-100px) skewX(-15deg);
  }
  // shine animation right side
  &::after {
    content: '';
    display: block;
    position: absolute;
    background: rgba(255, 255, 255, 0.2);
    width: 30px;
    height: 100%;
    top: 0;
    filter: blur(5px);
    transform: translateX(-100px) skewX(-15deg);
  }

  &::before, &::after {
    transform: translateX(300px) skewX(-15deg);
    transition: 0.7s;
  }
}

@keyframes TransitioningBackground {
  0% {
    background-position: 1% 0%;
  }
  50% {
    background-position: 99% 100%;
  }
  100% {
    background-position: 1% 0%;
  }
}

How to wrap up everything as a function or module and be able to apply to other btn with different ID names, such as <btn id="test-me1"> ?

Thank you!

score 0 · Accepted Answer · answered Jun 03 '21 at 00:55

What you're doing is designing a framework.

Modern CSS frameworks include Bootstrap, Foundation, Bulma, UIKit, and more.

What they do is provide pre-made CSS for you to use on your components. This allows you to make websites without having to mess too much with the CSS besides edge cases. Instead, you just give the relevant elements class names that correspond to the style you desire.

Generally, having multiple elements with the same ID is bad practice. This is because you use IDs to refer to elements such as buttons, or to scroll-navigate the page on redirects. It's important that IDs are unique, so you don't want to apply styles from your framework through those.

What you should do, is once you're done building your custom framework, you can host it online, and have people import it using a <link rel="stylesheet" href="LINK_HERE"> inside of the <head></head> tag, just like how you do with normal imported stylesheets.

Now that your CSS framework is imported on their website, they can apply the classes you created by simply adding them to the class attribute.

.red_background {
  background: red;
}

.blue_text {
  color: blue;
}

.green_border {
  border: 2px solid green;
}

.fat_margin {
  margin: 64px 0;
}

<div class="red_background blue_text green_border">This should have a red background, blur text, and green border... how ugly!</div>
<div class="blue_text green_border">Sometimes we might only want certain properties, however.</div>
<div class="fat_margin blue_text">We can use any of the classes we defined in our stylesheet to style our components. the .fat_margin class adds a massive margin to this element!</div>

How to reuse and apply scss module to other web with different id names?

1 Answers1