Vars

Sass variables, starting with $, replace values with names for simplicity and power. They reduce repetition, enable complex math, configure libraries, and enhance efficiency and versatility in your stylesheets.

Why there are helpful

Sass variables are incredibly helpful for efficient and maintainable stylesheets due to the following reasons:

• Code Reusability: Variables enable storing and reusing values throughout stylesheets, reducing repetition and improving consistency. They allow you to easily update values in a single place, leading to efficient maintenance.
• Scalability and Adaptability: With variables, making global style changes becomes effortless. As your project grows, variables ensure consistent updates by modifying their values, enabling easy scalability.
• Readability and Collaboration: Variables enhance code readability by using descriptive names that reflect their purpose. This aids comprehension and facilitates collaboration among team members.
• Dynamic Capabilities and Configuration: Variables support dynamic values, enabling complex operations, theming, and integration with libraries. They provide flexibility in generating styles and customizing third-party frameworks.

In summary, Sass variables offer code reusability, scalability, readability, and dynamic capabilities that enhance the efficiency and maintainability of stylesheets. They promote consistency, ease of maintenance, and collaboration within development teams.

How do we use them

Variables are essential in defining key aspects of our project, such as the grid system, breakpoints, fonts, and units of measurement. They ensure consistency and streamline development by allowing easy customization and configuration. Centralized management of variables facilitates efficient adjustments and maintains a cohesive design.

It is important that, if new variables need to be created during the development of the project, this is discussed with the team and coordinated with the design team.

/* Colors */

$color-a: #7B44D1;
$color-b: #4D49F3;
$color-c: #26DAF6;
$color-d: #EAF0F6;
$color-e: #FFFFFF;
$color-f: #0A132A;
$color-g: #CE1111;

$color-options: (
    a: $color-a,
    b: $color-b,
    c: $color-c,
    d: $color-d,
    e: $color-e,
    f: $color-f,
    g: $color-g,
);

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

/* Typography */
$type-a: 'Jost', sans-serif;
$type-b: 'Hero New', sans-serif;

/* Grid */
//Container
$g-container-width: 1300px;

$all: 0;
$desktop: 1700px;
$laptop: 1570px;
$tabletl: 1300px;
$tabletm: 1024px;
$tablets: 810px;
$mobile: 580px;
$viewport-type: max-width;
$columns: 12;
$gutter-width: 32px;
$half-gutter-width: $gutter-width*.5;
$gutter-compensation: -1 * $half-gutter-width;

// Use for almost all Uitlities:
// Display, Aspect Ratio, Flex, Float, Justify, Spacing, Text-align
$breakpoints-grid: (
    all: $all,
    desktop: $desktop,
    laptop: $laptop,
    tabletl: $tabletl,
    tabletm: $tabletm,
    tablets: $tablets,
    mobile: $mobile,
) !default;

/*
    End Foundations
*/

// Measure
$measure: 0.5rem; /* 0.5rem = 8px */

// border
$border-radius-a: 2px;
$border-radius-b: 4px;
$border-radius-c: 16px;

// Time
$time-a: 0.1s; // Micro-interactions such as button and toggle
$time-b: 0.3s; // Expansion, system communication, toast
$time-c: 0.6s; // Background dimming

// Ease
$ease-standard-a: cubic-bezier(0.2, 0, 0.38, 0.9); //productive
$ease-standard-b: cubic-bezier(0, 0, 0.3, 1); //expresive
$ease-entrance-a: cubic-bezier(0, 0, 0.38, 0.9); //productive
$ease-entrance-b: cubic-bezier(0.4, 0.14, 0.3, 1); //expresive
$ease-exit-a: cubic-bezier(0.2, 0, 1, 0.9); //productive
$ease-exit-b: cubic-bezier(0.4, 0.14, 1, 1); //expresive

// header
$headerDesktop: 88px;
$headerTabletl: 72px;

How to use it in Foundations

// Basic Loop Colors
@each $color-name, $color in $color-options {
  .f--color-#{$color-name} {
    color: $color;
  }
}

How to use it in Components

// regular color options
.c--card-a {
  &__item {
    color:map-get($color-options,a);
    padding:$measure*2;
    border-radius:$border-radius-c;
  }
}

// extend color options (better approach)
.c--card-a {
  &__item {
    @extend .f--color-a;
    padding:$measure*2;
    border-radius:$border-radius-c;
  }
}