Sass Workshop

RailsConf 2018 Sass Workshop

Transcript

1. Let's Get Sassy! https://github.com/icorson3/sass_workshop
2. Who am I? • Ilana Corson - she/her • Associate Instructor at Turing School of Software and Design • Find me on all things as ICORSON3
3. What is Sass? • Syntactically Awesome Style Sheets • An extension of CSS - compiled to CSS. • Coded in Ruby !! • All CSS is valid Sass but all Sass is not valid CSS. • Supports other frameworks (i.e. Bootstrap, Materialize). • Use file extension .scss (Sassy CSS. more commonly used syntax) or .sass (older syntax). • Provides variables, nesting, mixins, and selector inheritance.
4. I am a backend developer, why should I care? • Industry-wide = you will see it more often. • Has a lot of features which help with ORGANIZATION! • Allow for some principles of OOP. • "Cascading" is confusing!
5. Learning Goals • Explain why SASS is a better option than raw CSS. • Be able to set up SASS in a Rails project. • Understand how to create variables in SASS. • Understand how to nest elements in SASS. • Understand how to nest properties in SASS. • Break files up in a logical way.
6. CSS Refresh • To target an element in CSS such as a "p" tag: p • To target a class in CSS: .class • To target an id in CSS: #id • End a CSS statement: ";"
7. Workshop Follow the README: https://github.com/icorson3/ sass_workshop
8. Wrap Up Questions • What does Sass stand for? • Why is Sass a better option than CSS? • How is a variable declared and assigned in Sass? • Why is nesting a benefit? Both at an element and property level? • How is a mixin declared and assigned in Sass?