Mixins

The πŸ“ base/_mixins.scss file is used to collect SASS mixins and functions.

⚠️ The files inside the base/ folder contain essential CSS rules and utility classes. We suggest you don't modify them. Use the custom-style/ folder to add your own style.


πŸ” On this page:

  1. Color
  2. Typography
  3. Space Unit
  4. Miscellaneous

Color #

Name Description
defineColorHSL(--color-name, hue, saturation, lightness) SASS Mixin. Used to define HSL color variables.
alpha(var(--color-name), alpha) SASS Function. Used to return a color with different opacity value.
lightness(var(--color-name), alpha) SASS Function. Used to return color with different lightness value.

defineColorHSL Mixin

Here's an example of how to use the defineColorHSL mixin:

:root {
  @include defineColorHSL(--color-primary, 220, 90%, 56%);
}

The mixin will define 4 different css variables:

Make sure to define all your color variables inside the πŸ“ custom-style/_colors.scss file.

If you want to learn more about why we use this mixin to define our color variables, you can take a look at this article on combining SASS color functions and CSS Variables.

alpha Function

Here's an example of how to use the alpha function:

.component {
  // return color with opacity 0.2
  color: alpha(var(--color-name), 0.2);
}

⚠️ Important: the --color-name variable needs to be defined using the defineColorHSL mixin for the alpha function to properly work.

lightness Function

Here's an example of how to use the lightness function:

.component {
  // return color with lightness equal to (--color-name-l*0.9)
  background-color: lightness(var(--color-name), 0.9);
}

⚠️ Important: the --color-name variable needs to be defined using the defineColorHSL mixin for the lightness function to properly work.

Typography #

Name Description
fontSmooth SASS Mixin. Edit font rendering.
lhCrop SASS Mixin. Remove top space on text elements.

fontSmooth Mixin

This mixin can be used to add font smoothing to your text elements. It modifies the -webkit-font-smoothing/-moz-osx-font-smoothing CSS property of the text.

We suggest to use it for light text on dark backgrounds:

.dark-theme {
  @include fontSmooth;
}

lhCrop Mixin

This mixin is used to remove the top space of a text element that is caused by the element line-height.

Here's how you can use this mixin:

.text-to-crop {
  @include lhCrop(1.2); // pass the line-height of .text-to-crop element
}

The mixin also accepts a (not required) second parameter (a number smaller than 1 that varies with the font-family value) that improves the crop effect:

.text-to-crop {
  @include lhCrop(1.2, 0.72);
}

Since this additional parameter depends on the font-family only (it is not affected by font-size or font-weight or line-height), a good idea would be to define a CSS variable for each one of your font families. You can then use that variable to call the lhCrop mixin; this way, if you need to change your font-family, you’ll only need to update theβ€Š value of that variable with no need to modify the mixin calls. 

In the πŸ“ custom-style/_typography.scss file, you find this variable defined for the primary font (--font-primary-capital-letter). Its default value is one, so make sure to update it according to your font-family.

.text-to-crop {
  @include lhCrop(1.2, var(--font-primary-capital-letter));
}

If your project requires more than one font-family, make sure to define new css variables for each one of them (eg. --font-secondary-capital-letter, ...).

You can use the Typography Editor to determine the value of this variable (and export the code for the line-height crop).

If you want to learn more about the mixin, take a look at this article explaining how the mixin formula works.

Space Unit #

Name Description
spaceUnit SASS mixin. Edit space unit on a component level.

The spaceUnit mixin can be used to modify the CSS --space-unit variable on a component level. Pass to the mixin the value you wish to use as new --space-unit value for your component:

.component {
  @include spaceUnit(1.2em); // --space-unit is now 1.2em
}

The mixin will automatically update all the --space-{size} variables based on the new value of the --space-unit.

For example, you can use this mixin to switch from a spacing system based on em units (which is the default for the CodyHouse framework) to one based on rem units:

.component {
  @include spaceUnit(1rem);
}

This could be useful if you don't want your spacing variables to change when the font-size of the body (or component element) is updated.

Miscellaneous #

Name Description
triangle SASS mixin. Create CSS Triangle.
reset SASS mixin. Reset user agent style.

triangle Mixin

This mixin can be used to create a CSS triangle. Add it to the element that you want to shape as a triangle:

.triangle {
  @include triangle(right, 12px, var(--color-white));
}

You will need to pass the direction of the triangle (eg. right), the width of the triangle (distance between base and vertex, eg. 12px) and the background color (eg. var(--color-white)).

reset Mixin

You can use this mixin to reset the default user agent style of an element. For example, you can use it to reset the default style of a button element:

.button-element {
  @include reset;
}