Category: SCSS

Replacing text with Font awesome

This replaces a bit of text in a div with some font awesome icon.

Read More

CSS Odd even rows

Use the following CSS code to add a style to odd or even div elements or entries: .row{ &:nth-child(odd){   background-color: darken($grey,3%); } }    

Read More

XMP – Great to embed code for documentation

Use the XMP tag to embed code for your documentation.

Read More

CSS expanding text ellipsis dots (…)

If a title or text within a H1 or H2 tag is too large and to prevent the text from wrapping or breaking a column use the following bit of code which will embed (…) instead of the text.

Read More

Using For loop with animation delay

The following way is an easy SCSS for loop that will generate child classes to delay animations of divs with the same class. .service{ position: relative; padding: $padding_l 0px; opacity: 0; &.visable{ opacity: 1; } // Loop through the items and add some delay. @for $i from 1 through 12…

Read More

Setting the SCSS Output Folder

Use the code to set the output directory of a SCSS file. sass –watch input-dir:output-dir  

Read More

Adding a @mixin

Mixins are one awesome little tool you can use in SCSS, to pull in code that could be commonly used in a variety of locations. Mixins do act like mini CSS functions. This is a very basic example of a mixin:

Read More
© Toffy Digital 2018 Powered by Toffy Digital