The document provides an overview of Sass (Syntactically Awesome Style Sheets), a CSS preprocessor. It discusses features of Sass like variables, nesting, inheritance, mixins and more that make writing CSS easier. It also covers using Sass with Compass, an open source CSS authoring framework, and Gulp, an automation tool for tasks like minification, concatenation, image optimization, and deploying files via SSH. Finally, it briefly introduces GreenSock for advanced animation capabilities.

1. ISEP | 19.9.2015

2. o/
• Marco Pinheiro
• geek | biker | open source envagelist
• head of dev.
• @marcopinheiro
• marco.alex.pinheiro@gmail.com

3. agenda

4. syntactically awesome style sheets
aka: CSS with superpowers
http://sass-lang.com/guide

5. sass
• CSS on its own can be fun, but stylesheets are getting
larger, more complex, and harder to maintain.
• This is where a preprocessor can help. Sass lets you
use features that don't exist in CSS yet like variables,
nesting, mixins, inheritance and other nifty goodies
that make writing CSS fun again.

6. sass
• “SASS is the most mature, stable, and powerful CSS
preprocessor in the world.”
• Sass is open-source, and is actively developed by
several tech companies and hundreds of developers
wordwide at http://github.com/nex3/sass

7. sass - install n compile
• $ gem install sass
• $ sass input.scss output.css
or
• $ sass --watch input.scss:output.css

8. http://codepen.io
sass - quick test-drive

9. sass - quick test-drive
http://codepen.io

10. sass - some ingredients…
• partials
• variables
• nesting
• extending / inheritance
• mixins
• conditions

11. sass - partials
• use partials to organize (modularize) your code
• the file names must start with underscore and you can suppress the
extension
@import 'shared/global';
@import ‘pages/home' (aka _home.scss)
@import 'pages/blog';

12. sass - variables - $
(_variables.scss)
$portolinux-purple: “#669”;
$sans-serif-font: 'ff-dagny-web-pro', 'Helvetica Neue', Arial, sans-serif;
$serif-font: 'ff-tisa-web-pro', Georgia, Times, serif;
they make code easier to change by reducing duplication but they also allow you to
assign names to special property values like colors, which helps you understand the
intent behind a given style.

13. sass - DRY - nesting
body.home .media-unit {
border: 1px solid #ccc;
background-color: #fff;
}
body.home .media-unit .right {
border-left: 1px solid #ccc;
}
body.home .media-unit .right h1 {
font-size: 24px;
}
body.home {
.media-unit {
border: 1px solid #ccc;
background-color: #fff;
.right {
border-left: 1px solid #ccc;
h1 {
font-size: 24px;
}
}
}
}
Nesting will help keep your code clean, logical, and well-organized, which should
also make it easier to manage over time.

14. sass - DRY - nesting @
.container {
width: 940px;
@media screen and (max-width:
940px) {
width: auto;
}
}
Sass allows you to nest media queries inside other rules, making it easier to see
which styles are applied to a given object on your page:
.container {
width: 940px;
}
@media screen and (max-width:
940px) {
.container {
width: auto;
}
}

15. sass - DRY - nesting &
a {
color: $portolinux-purple;
&:visited {
color: red;
}
&:hover {
color: green;
}
&:active {
color: blue;
}
}
a{color: #669}
a:visited{}
a:hover{}
a:active{}
Use an ampersand & as a "shorthand" way to include a parent.

16. sass - DRY - nesting &
.stupid-long-selector-name {
background: $color-background;
&:hover {
background: $color-hover;
}
}
Use an ampersand & as a "shorthand" way to include a parent.

17. sass - DRY - extend/inheritance
.message {
border: 1px solid #ccc;
padding: 10px;
color: #333;
}
.success {
@extend .message;
border-color: green;
}
.error {
@extend .message;
border-color: red;
}
Using @extend lets you share a set of CSS properties from one selector to another.
.message, .success, .error {
border: 1px solid #cccccc;
padding: 10px;
color: #333;
}
.success {
border-color: green;
}
.error {
border-color: red;
}

18. sass - mixins
@mixin centerer {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
reusable sets of properties or rules that you include, or “mix,” into other rules.
You define them using the @mixin keyword, and include them using the @include
keyword.
.parent {
position: relative;
}
.holly-cented-block {
@include centerer;
}

19. sass - mixins (with args.)
@mixin rounded-corners ($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-ms-border-radius: $radius;
border-radius: $radius;
}
.button {
@include rounded-corners (5px);
}
@mixin opacity ($opacity) {
opacity: $opacity;
$opacity-ie: $opacity * 100;
filter: alpha(opacity=$opacity-ie); //
IE8
}
.button {
@include opacity (0.8);
}

20. sass - mixins (vendor)
• http://paranoida.github.io/sass-mediaqueries/
• $ bower install sass-mediaqueries
or
• curl -O https://raw.githubusercontent.com/paranoida/sass-
mediaqueries/master/_media-queries.scss
@import "media-queries";

21. @ screen(min-width, max-width,
orientation)
@ min-screen(width)
@ max-screen(width)
--
@ screen-height(min-height, max-
height, orientation)
@ min-screen-height(height)
@ max-screen-height(height)
--
@ hdpi(ratio)
--
@ landscape
@ portrait
@ iphone3(orientation)
@ iphone4(orientation)
@ iphone5(orientation)
@ iphone6(orientation)
@ iphone6-plus(orientation)
--
@ ipad(orientation)
@ ipad-retina(orientation)
--
@ hdtv(standard)
sass - mixins (vendor)

22. @include screen(320px, 640px) { ... }
sass - mixins (vendor)
@media screen and (min-width:
320px) and (max-width: 640px){
}
.brand {
background-image: url(logo.png);
@include hdpi {
background-image: url(logo_2x.png);
}
}

23. Compass is an open-source CSS
Authoring Framework.
http://compass-style.org/

24. compass
(screen.scss)
@import “compass”
$ gem install compass
$ compass create portolinuxproj
$ compass watch

25. compass - config.rb
require 'compass/import-once/activate'
# Require any additional compass plugins here.
# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "assets/css/final"
sass_dir = "assets/sass"
images_dir = "assets/img"
javascripts_dir = "assets/js"
fonts_dir = "assets/fonts"
#output_style = (environment == :production) ? :compressed : :expanded
output_style = :expanded
# To disable debugging comments that display the original location of your
selectors. Uncomment:
# line_comments = false
color_output = false
preferred_syntax = :scss

26. compass - let’s rock!
@import “compass/reset”
@import "compass/css3"
@include inline-block;
@include transition(all 0.3s ease-in-out);
@include text-shadow( 0 1px 1px rgba(#000,0.3) );
@include single-transition(color, 0.5s, ease-in);
@include border-radius(4px, 4px);
@include box-shadow(red 2px 2px 10px);
@include opacity(0.1);

27. @import “compass/reset”
@import "compass/css3"
@include sticky-footer(72px, "#layout", "#layout_footer", “#footer");
@include transform(rotate(-135deg) scale(2) skew(-10deg, -10deg));
compass - let’s rock!

28. Gulp.js
Automate and enhance your workflow
http://gulpjs.com | http://gulpjs.com/plugins/

29. gulp.js
$ npm install --global gulp
//gulpfile.js
var gulp = require('gulp');
gulp.task('default', function() {
// place code for your default task here
});
$ gulp

30. gulp.js - require mods.
var
gulp = require('gulp'),
rsync = require('rsyncwrapper').rsync,
minifyCSS = require('gulp-minify-css'),
uglify = require('gulp-uglify'),
concat = require('gulp-concat'),
rename = require('gulp-rename'),
imagemin = require('gulp-imagemin'),
sass = require('gulp-sass'),
notify = require('gulp-notify');

31. img optimize
gulp.task('optimize-imgs', [], function () {
return gulp.src(‘./assets/img/*.jpg’)
.pipe(imagemin({optimizationLevel: 5}))
.pipe(gulp.dest(‘./assets/img/compressed’))
.pipe(notify({message: 'Finished IMG compression'}));
});

32. js compression/uglyf.
gulp.task('js-compress', function () {
gulp.src(‘./assets/js/*.js’)
.pipe(uglify())
.pipe(gulp.dest(‘./assets/js/min’))
});

33. css compress/concat
gulp.task('css', function () {
gulp.src('assets/css/final/*.css')
.pipe(concat('style.css'))
.pipe(gulp.dest(‘./assets/css/min’))
.pipe(minifyCSS())
.pipe(rename('style.min.css'))
.pipe(gulp.dest(‘./assets/css/min’))
.pipe(notify({message: 'Finished minifying n combyning CSS'}));
});

34. js concatenation
gulp.task('js', function () {
gulp.src(‘./assets/js/*.js’)
.pipe(uglify())
.pipe(concat(‘all.min.js'))
.pipe(gulp.dest(‘./assets/js/min’))
.pipe(notify({message: 'Finished JS concatenation'}));
});

35. watch
gulp.task('watch', function () {
gulp.watch(‘./assets/js/**/*.js’, ['js-compress']);
gulp.watch(‘./assets/img/*’, ['optimize-imgs']);
gulp.watch(‘./assets/sass/**/*.scss’, ['sass']);
});

36. ssh commands
var gulpSSH = require('gulp-ssh')({
ignoreErrors: false,
sshConfig: {
host: '192.168.1.251',
port: 22,
username: 'devel1'
}
});

37. ssh commands
gulp.task('default', ['css', 'js', 'js-compress', 'optimize-imgs'], function () {
rsync({
src: './',
dest: 'devel1@192.168.1.251:/home/devel1/proj1/public_html/',
recursive: true,
args: ['--verbose'],
exclude: ['.idea', '.editorconfig', 'node_modules', '.git'],
compareMode: 'checksum',
onStdout: function (data) {
console.log(data.toString());
}
}, function (error, stdout, stderr, cmd) {
gulp.task('shell', function () {
return gulpSSH
.shell(["chown -R devel1:devel1 /home/devel1/proj1/public_html/*",
"find /home/devel1/proj1/public_html -type f -exec chmod 664 {} ;", "find /home/
devel1/proj1/public_html -type d -exec chmod 755 {} ;"], {filePath: 'shell.log'})
.pipe(gulp.dest('logs'))
.pipe(notify({message: 'SSH n CHMOD finished!'}));
});
});
});

39. http://greensock.com/jump-start-js#welcome

40. • Crazy fast (http://greensock.com/js/speed.html)
• Compatible
• Lightweight (7kb for TweenLite) & expandable
• No dependencies
• Advanced sequencing
<!--CDN link for the latest TweenMax-->
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/
TweenMax.min.js"></script>

41. http://codepen.io/marcoalexpinheiro/pen/epZJOy

42. http://codepen.io/allanpope/pen/gpepOz

43. https://ihatetomatoes.net/wp-content/uploads/2015/08/GreenSock-Cheatsheet-2.pdf