Skip to content
Terra Docs

Vars FAQs

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 $mesasure.

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