Basics of Sass configuration in combination with other ruby gems such as compass, breakpoint and singularitygs.

1. Understanding Sass
By: Mario Hernandez
November 15, 2014

2. Mario Hernandez
Front-End Developer
@DesignsDrive

3. 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

4. ● Why sass and Compass?
● Requirements
● sass in Visual Studio
● Configure environment
● Doing magic
@Mediacurrent
Agenda

5. What is sass?
@Mediacurrent
CSS with superpowers

6. 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.

7. What is sass?
@Mediacurrent
http://sass-lang.com

8. Features of Sass
@Mediacurrent
● Variables
● Nesting
● Partials
● Imports
● Mixins

9. $variables
@Mediacurrent

10. @Mediacurrent
$font-stack: Helvetica, sans-serif;
$primary-color: #333;

11. @Mediacurrent
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
body {
font-family: $font-stack;
color: $primary-color;
}

12. Nesting
@Mediacurrent

13. @Mediacurrent
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li { display: inline-block; }
a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}

14. _partials
@Mediacurrent

15. @imports
@Mediacurrent

16. @Mediacurrent
// _reset.scss
html,
body,
ul,
ol {
margin: 0;
padding: 0;
}

17. @Mediacurrent
/* base.scss */
@import 'reset';
body {
font: 100% Helvetica, sans-serif;
background-color: #efefef;
}

18. @Mediacurrent
html, body, ul, ol {
margin: 0;
padding: 0;
}
body {
font: 100% Helvetica, sans-serif;
background-color: #efefef;
}

19. @mixins
@Mediacurrent

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

21. @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); }

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

23. 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.

24. What is Compass?
@Mediacurrent
http://compass-style.org

25. Requirements
● Ruby
● Compass
● sass
@Mediacurrent

26. Requirements
● Ruby Installer (Windows)
● Ruby
● Compass
● sass
● Mindscape Web Workbench (Visual Studio)
@Mediacurrent

27. Installing Compass
@Mediacurrent
gem install compass

28. Installing Sass
@Mediacurrent
gem install sass

29. Starting a new sass
project
@Mediacurrent
compass create <myproject>

30. Not a fan of the command
line?
@Mediacurrent
http://compass.handlino.com
http://mhs.github.com/scout-app

31. What’s your problem?
@Mediacurrent

32. I have 99 problems
@Mediacurrent

33. I have 99 problems
… and markup is one of them
@Mediacurrent

34. @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>

35. @Mediacurrent
<div class="wrapper">
<div class="main">...</div>
<div class="sidebar">...</div>
</div>

36. Other Gems
● Breakpoint
● Singularity
@Mediacurrent

37. Breakpoint
Breakpoint makes writing media
queries in Sass super simple.
@Mediacurrent
#mobile

38. #mobile
Breakpoint
Breakpoint makes writing media
queries in Sass super simple.
http://breakpoint-sass.com/
@Mediacurrent

39. Singularity Grid System
Singularity is a next generation grid
framework built from the ground up to be
responsive.
@Mediacurrent

40. 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

41. Resources
● http://www.mediacurrent.com/search/results/sass
● http://leveluptuts.com/tutorials/sass-tutorials
● http://sassmeister.com/
@Mediacurrent

42. Thank You!
Questions?
@Mediacurrent Mediacurrent.com
slideshare.net/mediacurrent