Category: Code

If you want to reuse a function called showMaterial that both are used to show individual teddybears materials but now is going to be used for showing all teddybears materials, creating a custom event and then trigger it is a great way to do it.

List through the documents that have an attachment and list them by a field called “name” that are on each document in this particular DB and then the filename that are a variable we assign the value to in the for loop.

Very minimal example on how to import a file called _reset.scss for example.

By moving the parent-selector & after the .users the compiled .css selector becomes: instead of:

By setting !default when declaring a variable it avoids conflicts. It’s a good thing to do when you only want to set that rule if it haven’t been set already. You can think of !default as an opposite to the !important declaration in CSS.

In order to use variables for other than values such as properties, selectors and strings. You will need to wrap it in #{$variable}

When compiled into .css .container will get: -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; and .content will get : -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;

Without adding the … to $val the argument would think that there are 2 arguments being passed in. By adding … the $val… becomes a variable argument and can handle the passed value.

To make mixins more clear when working in big project it is wise to specify a keyword.Then it doesn’t matter in which order you pass in the arguments.

Its important to have the $side in the beginning of the arguments in the assemble mixin as this is the only one without a default value it has to be declared first.