SASS – Making CSS more fun! – Who am I?

View Github Repository Open presentation in a new window

sirjessthebrave

See all presentation from sirjessthebrave

SASS – Making CSS more fun! – Who am I?

0 0

intro-to-sass

Slides for the Women in Tech Summit Washington DC 2016: Intro to Sass

On Github sirjessthebrave / intro-to-sass

SASS

Making CSS more fun!

Created by Jessica Bell / @SirJessTheBrave

Agenda

  • About Me
  • What is SASS
  • Folder Structure: Global, Components, Base
  • DEMO: Breaking Down your project
  • WORK POINT: Getting set up on Cloud 9
  • SMACCS
  • WORK POINT: Change something on your starter!

Who am I?

I'm Jess!

Front End Developer @RepEquity

Organizations: DC Tech Meetup, DCFem Tech, Women Who Code, General Assembly, JavaScript Guild, Hear Me Code

Connect with me on Twitter @SirJessTheBrave

SOOO What is SASS?

SASS

SASS stands for Syntactically Awesome Style Sheets and is a CSS pre-processor that allows you to use programmatic functionality and better organize your CSS.

Read all the SASS documentation at sass-lang.com/

initially designed by Hampton Catlin and developed by Natalie Weizenbaum. Sass is a scripting language that is interpreted into CSS. There are 2 syntaxes; .sass and .scss THIS IS NOT A FRAMEWORK ONLY A DEVELOPER TOOL

SASS takes your .SCSS files, and compiles them into a normal css style sheet to be included in your project.

SASS is organized into folders with smaller .scss files called partials. The meat of your SASS files will be your Components partials. The functionality of SASS comes from the Base partials.

Time to get Sassy!

The SASS Folder Structure

  • Global: Your global layout including typography, base form styles, and html elements
  • Components: Your modules, states, and section layouts
  • Base: Your Variables, Mixins, Extendables, and Vendor style sheets (normalize, formalize, reset ect bold
at this point, pull up project and show them folder structure in a project

How SASS works

  • Partials
  • Variables, Mixins, Extendables
  • Compiling
  • Import partial
  • Output Style sheet

Demo: How Sass Compiles

]
```

Global: styles to be applied globally

  • Global Layout
  • Typography
  • Forms

Components: site specific reusable bits

Modular sections of you page. Repeatable bits of code. For example: Header/Footer, side-bar, display for blog articles, hero images, ect.

Base: the functionality of SASS

  • Variables
  • Extendables
  • Mixins
  • Vendor

Breaking down a site

Work Point

Sass requires an installation process as well a compiler such as gulp or grunt to run. To save time we will be using Cloud 9 to spin up an environment with all the dependencies we will need.

  • Head to c9.io and sign up for a free account
  • Fork and clone the 'Minimal Site' repo from my Git Hub account
  • Open up the project in your Cloud9 account and make a change to the SASS files
  • Run the following command in your terminal: sass sass/style.scss stylesheets/style.css
  • Celebrate!

SMACSS

SMACSS stands for Scalable and Modular Architecture for CSS and is a way of organizing one's css is a more reusable and sectioned out way. It is NOT a library or framework, but a way of styling and organizing your css. It was written by Jonathan Snook and is freely available on-line.

Get the free SMACS Online book at SMACSS.com

Categories of SMACSS

Base: The most basic layout of your page/site

Layout: Holding one or more 'modular' sections together

Module: Reusable chunks of code

State: The look of a particular module while in a certain state such as hover, active, expanded, on mobile

Theme: Often not required, but describe how the modules or layouts might look

Naming Conventions

Naming conventions are very important to writing clean, well understood code. This is only a sample of how you COULD do naming conventions - the key is to define and stick with a convention

```

Why SMACSS and SASS?

SASS has a folder structure that is parsed out into categories and smaller functional components, which works really well with SMACSS theory. It also is necessary to have good naming conventions in your variables, mixins, and extendibles for clean, clear, readable SASS

pause for questions

Thank you!

Contact Me:

Resources: