Understanding Sass

By: Mario Hernandez

November 15, 2014

Mario HernandezFront-End Developer

@DesignsDrive

Design/Theming● Usability Testing

● Responsive Design

● Drupal Theming

● Annotated Wireframes

@Mediacurrent

Development● Drupal Support

● Custom Module Development

● Large Scale Systems Integration

● Security & Performance Expertise

We help organizations build highly impactful, elegantly designed Drupal websites that achieve the strategic results you need.

Digital Strategy● Content Strategy

● Content Generation

● Result Metrics

● Marketing Automation Integration

● Why sass and Compass?

● Requirements

● sass in Visual Studio

● Configure environment

● Doing magic

@Mediacurrent

Agenda

What is sass?

@Mediacurrent

CSS with superpowers

What is sass?

@Mediacurrent

Sass is an extension of CSS that adds power and elegance to the basic language. It allows you to use variables, nested rules, mixins, inline imports, and more. Sass helps keep large stylesheets well-organized, and get small stylesheets up and running quickly, particularly with the help of the Compass style library.

What is sass?

@Mediacurrent

http://sass-lang.com

Features of Sass

@Mediacurrent

● Variables● Nesting● Partials● Imports● Mixins

$variables

@Mediacurrent

@Mediacurrent

$font-stack: Helvetica, sans-serif;$primary-color: #333;

@Mediacurrent

$font-stack: Helvetica, sans-serif;$primary-color: #333;

body { font-family: $font-stack; color: $primary-color;}

Nesting

@Mediacurrent

@Mediacurrent

nav { ul {

margin: 0;padding: 0;list-style: none;

} li { display: inline-block; } a {

display: block;padding: 6px 12px;text-decoration: none;

}}

_partials

@Mediacurrent

@imports

@Mediacurrent

@Mediacurrent

// _reset.scss

html,body,ul,ol { margin: 0; padding: 0;}

@Mediacurrent

/* base.scss */

@import 'reset';

body { font: 100% Helvetica, sans-serif; background-color: #efefef;}

@Mediacurrent

html, body, ul, ol { margin: 0; padding: 0;}

body { font: 100% Helvetica, sans-serif; background-color: #efefef;}

@mixins

@Mediacurrent

@Mediacurrent

@mixin border-radius($radius) { -webkit-border-radius: $radius; -moz-border-radius: $radius; -ms-border-radius: $radius; border-radius: $radius;}

@Mediacurrent

@mixin border-radius($radius) { -webkit-border-radius: $radius; -moz-border-radius: $radius; -ms-border-radius: $radius; border-radius: $radius;}

.box { @include border-radius(10px); }

@Mediacurrent

.box { -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; border-radius: 10px;}

What is Compass?

@Mediacurrent

Compass is an open-source CSS authoring framework which uses the Sass stylesheet language to make writing stylesheets powerful and easy.

What is Compass?

@Mediacurrent

http://compass-style.org

Requirements● Ruby● Compass● sass

@Mediacurrent

Requirements● Ruby Installer (Windows)● Ruby● Compass● sass● Mindscape Web Workbench (Visual Studio)

@Mediacurrent

Installing Compass

@Mediacurrent

gem install compass

Installing Sass

@Mediacurrent

gem install sass

Starting a new sass project

@Mediacurrent

compass create <myproject>

Not a fan of the command line?

@Mediacurrent

http://compass.handlino.comhttp://mhs.github.com/scout-app

What’s your problem?

@Mediacurrent

I have 99 problems

@Mediacurrent

I have 99 problems… and markup is one of them

@Mediacurrent

@Mediacurrent

<div class="row wrapper">

<div class="main col-sm-6 col-md-5 col-lg-6">...</div>

<div class="sidebar col-sm-6 col-md-5 col-md-offset-2 col-lg-6 col-lg-offset-0">...</div>

</div>

@Mediacurrent

<div class="wrapper">

<div class="main">...</div>

<div class="sidebar">...</div>

</div>

Other Gems

● Breakpoint● Singularity

@Mediacurrent

Breakpoint

Breakpoint makes writing media queries in Sass super simple.

@Mediacurrent

#mobile

#mobile

Breakpoint

Breakpoint makes writing media queries in Sass super simple.

http://breakpoint-sass.com/

@Mediacurrent

Singularity Grid System

Singularity is a next generation grid framework built from the ground up to be responsive.

@Mediacurrent

Singularity Grid System

Singularity is a next generation grid framework built from the ground up to be responsive.https://github.com/at-import/Singularity

@Mediacurrent

Resources

● http://www.mediacurrent.com/search/results/sass

● http://leveluptuts.com/tutorials/sass-tutorials

● http://sassmeister.com/

@Mediacurrent

Thank You!Questions?

@Mediacurrent Mediacurrent.com

slideshare.net/mediacurrent