SCSS FAQs

➡️ VARS

Can I create my own variables?

Yes, you can create your own variables, but we recommend sticking to the ones we have provided. If needed, create new variables at the bottom of the file.

Can I modify gutter/columns or breakpoints?

No, you can’t. If you’re having an issue, reach out to your manager.

Can I add more properties of border-radius / measure / time or ease?

• ✅ You can add more properties of border radius
• ❌ You can’t modify $measure, as that will create a who.
• ❌ Can I modify eases? Ideally, you can’t.

Do I always need to use map.get to reference colors & backgrounds?

Yes, you should always use map.get for all cases. This practice is convenient because we may need to adjust colors in the future.

Example:

.c--card-a {
    $color: map.get($color-options, a);
    $background: map.get($colorbg-options, c);
}

Do I have to use $measure for everyhing?

Yes, most of the time distance values such as width/height/margin and padding uses $measure.

Think of it as one unit that will be spread across the project.

Examples:

.c--card-a {
    display: inline-block;
    position: fixed;
    padding: $measure*0.5; //half measure 4px
    right: $measure*4;
    top: $measure*4;
    width: $measure*5;
    &__content{
        display: flex;
        justify-content: center;
    }
}

In some cases that you need to add fixed, it’s totally fine to use other values.

.c--card-b {
    width: 315px;
    height: 100vh;
    padding: $measure*2;
}

---

➡️ MIXINS

Can I include a foundations mixin in a component?

In general, it’s best not to include the mixin directly and to rely on extending the corresponding foundation class instead.

However, there are cases where including the mixin is necessary. For example, if a component uses font-c by default but one of its modifiers needs to use font-b, the mixin must be included. Since font-c would otherwise always override font-b, using the mixin is the only way to ensure the correct font is applied in that modifier.

When should I create a mixin?

In most projects, we typically don’t need to create new mixins and will primarily use those available in the foundations. However, creating a mixin can be useful if we want to reuse the same set of styles or rules with different values. For instance, if we have a project where background shapes need to be positioned differently in each section, we could create a mixin that accepts these values and applies the necessary styles accordingly. The mixin could look like this:

.c--bg-a {
    @extend .u--position-relative;
    @extend .f--backgound-b;
    &::before,
    &::after {
        content: '';
        @extend .u--position-absolute;
        background-color: rgba(map.get($color-options, a), .3);
        z-index: 0;
    }
    &::before {
        border-radius: 100%;
    }
}
@mixin make-bg-a(
    $circleTop,
    $circleLeft,
    $circleBottom,
    $circleRight,
    $circleWidth,
    $squareTop,
    $squareLeft,
    $squareBottom,
    $squareRight,
    $squareWidth,
) {
    @extend .c--bg-a;
    &::before {
        @if $circleTop {
            top: $circleTop;
        }
        @if $circleLeft {
            left: $circleLeft;
        }
        @if $circleBottom {
            bottom: $circleBottom;
        }
        @if $circleRight {
            right: $circleRight;
        }
        @if $circleWidth {
            width: $circleWidth;
            height: $circleWidth;
        }
    }
    &::after {
        @if $squareTop {
            top: $squareTop;
        }
        @if $squareLeft {
            left: $squareLeft;
        }
        @if $squareBottom {
            bottom: $squareBottom;
        }
        @if $squareRight {
            right: $squareRight;
        }
        @if $squareWidth {
            width: $squareWidth;
            height: $squareWidth;
        }
    }
}

This mixin allows you to pass different positioning and sizing values for both a circle and a square shape in the background. You can then apply the mixin to different sections, like so:

.c--hero-a {
    @include make-bg-a(
        $circleLeft: -100px,
        $circleBottom: -100px,
        $circleWidth: 200px,
        $squareTop: -50px,
        $squareRight: -50px,
        $squareWidth: 180px,
    );
    &--second {
        @include make-bg-a(
            $circleTop: 50%,
            $circleBottom: auto,
            $circleWidth: 25vw,
            $squareWidth: 28vw,
        );
    }
}

By using this approach, we can keep the code clean and flexible, making it easier to adjust the positioning of these background elements as needed across various sections of the website.

---

FOUNDATIONS

Can I create my own gaps, sections or spaces?

The ideal approach is to use one of the values provided in foundations. However, if none of these values fit, it’s better to check with the design team before creating a new one to determine if we should add a new foundation value or use an isolated spacing.

Can we use a background color with opacity as a foundation (f—background-X)?

Yes, as long as we add it to $colorbg-options in vars.

Example:

$colorbg-options: (
    a: $color-d,
    b: $color-e,
    c: rgba($color-f, .5),
);

Can I use a font in the project that isn’t included in foundations?

No, unless specified by the design team. If we come across a font that isn’t included in foundations, it is likely an error and should correspond to an existing font.

---

➡️ COMPONENTS

The wrapper of an image is slightly taller than the image itself.

This can be fixed by setting display: block on the image.

When making an image dynamic, it becomes distorted, but this didn’t happen when it was hardcoded.

This may be because when the image is made dynamic, the width and height are added dynamically. To prevent distortion, we should always override these values. Usually, this is done with width: 100% and height: auto, but there may be cases where the width is another percentage or a specific pixel value, and the height has a known value.

I’ve set the font-weight to 600, but it’s not working properly.

Make sure you’ve imported that weight with that font style on the website. Some fonts do not have all the weights.

How can I make all the cards in the same row the same height?

To make all the cards the same height, simply set display: flex on the parent container without specifying align-items. This approach can be used in a column layout, slider, or any other layout. When setting display: flex on the parent, be sure to add width: 100% to the card itself, as otherwise, it will adjust to the width of the content.

In iOS, form fields have a border-radius even though I haven’t set one

iOS applies a default border-radius. The only thing you need to do is set border-radius: 0.

When I try to fill out a form on iOS, it zooms in automatically.

In iOS, if the font-size of input fields is smaller than 16px, it automatically zooms in because it considers the text too small. To fix this, make sure the font-size of the input fields is set to 16px or more.

I’m using a backdrop-filter, but it doesn’t work on Safari and iOS.

To make it work properly in Safari and iOS, you need to add -webkit-backdrop-filter with the desired value. It’s recommended to add -webkit-backdrop-filter before backdrop-filter to ensure that backdrop-filter will override it in other browsers.

---

➡️ GLOBAL COMPONENTS

Can I use !important in a custom-option?

Yes, but to avoid errors, it should be written like this: string.unquote('value !important')

I’m applying a different font in the modifier, but it keeps using the default component font.

If the font in the default component has a smaller height, it won’t be overridden because the className property operates with extends. Extends retain the CSS order of the class they extend, and font-a will always appear before others, so it won’t override another font class. In cases like this, even if additional code is added, it’s best to include the mixin of the desired font directly. This way, if the font changes in the future, it will still follow the intended logic and styling.

I want to add an underline on hover to some text, but the only hover option available is text-underline-color.

This is because text-decoration doesn’t support transitions, whereas text-underline-color does. If we want to underline something on hover, we should add the underline in its default state but make it transparent, then change the color on hover.