Sass / scss

SASS / SCSS

SASS: We have extended css to make it DRY

Bitters: We have a clear folder structure for you

Quote: After some time of getting used to it, you'll appreciate Bitters more and more: its default structure suggests a place for almost everything. Especially when working in a team, it's great to simply know where things are defined - instead of having to search and wonder.

cheat sheets

• with selectors and pseudo classes
• animations
• https://www.rankred.com/css-cheat-sheets/

DONE

• bourbon + neat + bitters
• react + Sass menu
• dropdown menu in (../code/) : tutorial

TODO: css animations and pseudo-classes!

• media queries
• deconstruct some animations
• css selectors

media queries for responsive design

• https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

some funky css stuff

• https://techbrij.com/css-selector-adjacent-child-sibling

speed ups - achieving 60fps animations

• only css
• css + js

architecture of CSS (for large scale maintainability)

• https://sass-guidelin.es/#architecture
• https://smacss.com
• using a scaffold like Bitters

mixins ref

• https://www.git-tower.com/learn/bourbon-neat-bitters/in-practice/neat-mixins#start

pseudo classes

• pseudo classes source2 source3
• medium article

SASS Neat 2.0

• https://robots.thoughtbot.com/the-release-of-neat-2-0-a-lightweight-and-flexible-sass-grid

tutorials!

• https://medium.com/@thejasonfile/getting-started-with-sass-dedb271bdf5a
• https://tutorialzine.com/2016/01/learn-sass-in-15-minutes
• https://scotch.io/tutorials/getting-started-with-sass
• https://sass-lang.com/guide

watch a scss file (autocompile into css)

sass --watch input_file.scss:output_file.css

variables

• store colors, font stacks, or any css value you think you want to reuse
• use $ to turn it into a variable

$font-stack: Helvetica, sans-serif;

$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

shorthand in css

• https://www.webcredible.com/blog/css-shorthand-properties/

sass has FUNCTIONS

• http://sass-lang.com/documentation/Sass/Script/Functions.html

how to perform vertical centering

• decision tree on which ones to use

other tips and tricks (css)

• vignettes

bourbon neat and bitters (library, library, scaffold/project template)