# Site specific components

You can easily add your own components to a project. Create a Sass file and @use it in your entry point (all.scss). You can then @apply all the classes you find in the HTML in the SCSS to build components.

As a general rule: remove the . and add -- before the classname. The @apply rules will be overwritten by Webpack and the SCSS compiler for the correct properties in the output CSS.

// all.scss
@use "~bruut-sass" as bruut; // Namespaced as bruut
@use "./components/example";

// components/_example.scss
@use "~bruut-sass" as bruut;

.my-component {
	@apply --is-flex;
	@apply --mr-2;
	@apply --is-color-alpha-100;
	@include bruut.text-size(5); // namespace.mixin-name
}