Sass Loops Maps

Config

• Maps
  • Brand Colors
  • Config Colors
  • Site Colors
  • Breakpoints
  • Image Sizes
  • Radius
  • Loader Colors
  • Background Sizes

Layout

Blocks

• Loops
  • variable.$columns
  • config.$breakpoints
  • Margin & Padding letters
  • variables.$xy-border
  • variables.$spacers

Components

Buttons

• Maps
  • Button Colors
• Loop
  • Button colors

Errors

• Loops
• Error colors

Images

• Loops
  • config.$image-size

Menus

• Maps
  • All Colors
• Loops
  • variables.$spacers
  • variables.$xy-border
  • All colors

Messages

• Loops
  • variables.$message-colors

Root

• Loop
  • All Colors (not doing anything)
  • config.$radius

Tooltip

• Loops
  • variables.$xy-border

Utilities

Background Image

• Loops
  • config.$bg-size

Borders

• Loops
  • variables.xy-borders
  • colors.all-colors

Colors

• Maps
  • Message Colors
  • Grayscale Colors
  • Error Colors
  • Utilities Colors
• Loops
  • All Colors
  • Error Colors

Display

• Maps
  • Displays
• Loops
  • config.$breakpoints
  • variables.$displays
  • $d in (s: show, h: hide) (This will be removed)

Flex

• Loops
  • variables.$flex-align
  • variables.$flex-direction
  • variables.$flex-justify

Other Utilities

• Cursors
• Map
  • Cursor types
• Loops
  • Cursor types
• Positions
  • Loops
    • variables.$positions
    • variables.$xy-borders
• Corners
• Maps
  • Directions
• Loops
  • variables.$spacers
  • $corners
• Height & Weight
  • Loops
  • variables.$quarter-values
• Overflow
  • Loops
    • variables.$overflow

Spacers

• Loops
  • variables.$xy-border
  • variables.$spacers
  • $letter in (margin: m, padding: p) (This will most likely be removed with using fluid spacing.

Typography

• Loops
  • variables.$font-style
  • variables.$text-align
  • variables.$text-transform
  • variables.$greyscale
  • variables.$font-scale

Variables

• Other
  • Maps
    • Position
    • Border
    • Columns
    • Quarter Values
    • Overflow
• Radius
  • Maps
    • $radius
• Spacing
  • Maps
    • Spacers
• Typography
  • Maps
    • Font scale
    • Font style
    • Text align
    • Text transform
• Flex
  • Maps
    • Flex-align
    • Flex-direction
    • Flex-justify