Upload
mario-hernandez
View
223
Download
1
Embed Size (px)
DESCRIPTION
Basics of Sass configuration in combination with other ruby gems such as compass, breakpoint and singularitygs.
Citation preview
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
@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;}
@Mediacurrent
nav { ul {
margin: 0;padding: 0;list-style: none;
} li { display: inline-block; } a {
display: block;padding: 6px 12px;text-decoration: none;
}}
@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;}
@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… 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