Silent mode

Some styled Origami components come with a ‘silent mode’ Sass variable, which is used to control when the component outputs CSS. However, this is now deprecated in favour of including a Sass mixin to control CSS output.

$o-component-silent-mode defaults to ON. You do not need to explicitly set it to be on, but you do need to be aware of this default.

If we consider a small snippet of SCSS, as the one below, we can illustrate how silent mode works.

$o-message-is-silent: true !default;

@mixin oMessage() {
	.o-message {
		display: block;
	}

	.o-message--closed {
		display: none;
	}
};

@if ($o-message-is-silent == false) {
	@include oMessage();

	// Set to silent again to avoid being output twice
	$o-message-is-silent: true !global;
}

ON

When a component’s silent mode is set to true or ‘on’: $o-component-is-silent: true, the SCSS mixins and variables will be made available, but they will not be included or built.

What will be available to you in this case is:

@mixin oMessage() {
	...
}

OFF

When a component’s silent mode is false or, ‘off’: $o-component-is-silent: false, the SCSS in the example above will be included automatically and will build all of its styles.

The following will be available for you to use in your project:

.o-message {
	display: block;
}

.o-message--closed {
	display: none;
}