This is an extremely high-level overview of what kinds of things you could do using Compass, Breakpoint, SMACSS and kittens.

1. Drupal 8 Themes with
SASS and SMACSS
(and kittens)

3. Who am I?

5. Liisa, The CSS Nazi
Senior Software Developer, Super-
hyper Drupal Girl @Tieto
d.org: lduerig
Twitter: @LisKit7

6. About Tieto
Tieto is the largest Nordic IT services provider, offering full
life-cycle services, mainly focusing in:
● Financial services
● Manufacturing, Retail and Logistics
● Public, Healthcare and Welfare
● Telecom, Media and Energy

7. Not part of the scope of this presentation, but
ask if you want to know more. May be good for
a later presentation.
=

8. Old school.
● media queries /
breakpoints
● sprites
● fixed gutter width
● fixed sprite width
Unmaintainable, manual
labour and prone to
inconsistencies.

9. SASS - CSS with Superpowers
$variable + @mixin + @extend ==
less copy/paste ==
consistant ==
AWESOME!
(Be careful with @extends.
And nesting fever. (Later))

10. What about Drupal?
● Can’t modules handle this?
o Yes, but if you know enough code to be writing
SCSS, you probably shouldn’t need a module for it.
● How does this work with Drupal dev?
o Perfectly. Separately.

11. Setup
● Ruby
● Sass
● Compass
● Breakpoint
● Bundler, for version management

12. Ruby
config.rb
● Environment (minification)
● Firesass
● Resources
● Compass plugins
● Import external stuff
● SASS options

13. Bundler Gemfile
Useful if you are working on a pre-existing
setup, and need specific versions of things.

14. Variables? Awesome!
Use for:
● breakpoints
● measurements
● font-sizes
● font-families
● … anything that you use often or should have a default.
Benefits:
● Consistent CSS.
● Easy to make site-wide changes.
● No need to sift through code if a breakpoint or font-size
should be changed.
● No need to remember what these default values are.

15. Best practices
● Keep most site-wide variables in a partial _variables.scss, within your
SMACSS “base” directory.
● Use these variables in other partials, don’t mix up static styles with
variables!
o Every time I find font-size: 10px an SCSS partial, God kills a kitten and
I have nightmares.
● Vertical measurement variables and font-sizes should be ems and
calculated with Compass vertical-rhythm library.
● Horizontal measurement variables can be set however you want, perhaps
using multiples of a $base-unit-pixels. Be consistent.

16. SASS @mixins
Use mixins for bits of code
that you use frequently in
your SCSS.
This little mixin makes it very
easy to whip up media
queries on-the-fly.

17. And then the mixin grew up and realized life
wasn’t
so
simple.

18. Don’t re-invent the wheel.
SASS libraries have a lot of awesome functions
and mixins to do this stuff for you.

19. Breakpoint
http://breakpoint-sass.com
Compiles
to

20. Breakpoint
http://breakpoint-sass.com
Really Simple, Organized,
Media Queries with Sass

21. How about that obnoxious
sprite?

22. Compass - Sprites
Files:
images/my-icons/new.png
images/my-icons/edit.png
images/my-icons/save.png
images/my-icons/delete.png
SCSS:
@import "compass/utilities/sprites";
@import "my-icons/*.png";
@include all-my-icons-sprites;
Generated CSS:
.my-icons-sprite,
.my-icons-delete,
.my-icons-edit,
.my-icons-new,
.my-icons-save { background: url('/images/my-icons-
s34fe0604ab.png') no-repeat; }
.my-icons-delete { background-position: 0 0; }
.my-icons-edit { background-position: 0 -32px; }
.my-icons-new { background-position: 0 -64px; }
.my-icons-save { background-position: 0 -96px; }

23. Compass - Sprites
● Configuration options per sprite or sprite-map
● Magic selectors
● Magic imports
● Sprite layouts
● Sass functions
tutorial: http://compass-style.org/help/tutorials/spriting/

24. Compass - Sprites
We need:
● toggle menu icon for mobile
● fixed width and height
● list-items in the menu should
be of equal height
● More control, no extra classes
SCSS Generated CSS

25. Compass - Sprites
That’s extra lines of code, what’s the point?
● I am not wasting my time fiddling around with a sprite.
● I don’t care how many pixels a particular image is offset
in the sprite.
● I don’t care what size the image is.
● My designers don’t have to care about creating sprites
or listen to me whine, either.

26. What else can we do with
Compass?

27. Compass - CSS3
Which of these would you rather write?
HINT!

28. Compass - Links
● Hover Link – Underline a link when you hover over it.
● Link Colors – Easy assignment of colors to link states.
● Unstyled Link – Make a link appear like regular text.

29. Compass - Lists
● Bullets – Mixins for managing list bullets.
● Horizontal List – Float a list so it appears horizontally.
● Inline-Block List – set list-elements to inline-block so they appear
horizontally while retaining their structure.
● Inline List – Style a list as inline text.

30. Compass - Text
● Ellipsis – Text truncation with ellipsis.
● Force Wrap – Wrap URLs and long lines of text.
● No Wrap – Remembering whether or not there's a hyphen in white-
space is too hard.
● Text Replacement – Replace text with images.

31. Compass - Typography
Vertical Rhythm
A massive pile of variables, constants, functions and mixins
to help create and manage vertical rhythm on your site.
This stuff is AWESOME, check it out.

32. Compass also has it’s own
layout import, and there are
many other Sass layout
libraries out there, Susy,
Bootstrap, Zen grids...

33. Compass can be
overkill

35. But usually is a timesaver.
● Calculates ems for you with Vertical Rhythm.
● Generates sprites and all kinds of sprite-related
goodies.
● Allows you to do all kinds of things that would normally
require many lines of CSS to be cross-browser
compatible.
● All kinds of fun stuff that is tedious to do by hand.

36. Nesting
is the best thing
ever, right?
.block {
h2.title {
color: MediumSeaGreen;
}
}

37. Only logged in users
actually wanted to see
this colour and only in
the content region...
.logged-in {
#content {
.block {
h2.title {
color: MediumSeaGreen;
}
}
}
}

38. Wait, the
sidebar should
be different!
.logged-in {
#content {
.block {
h2.title {
color: MediumSeaGreen;
}
}
.sidebar-second {
.block {
h2.title {
color: LightGoldenRodYellow;
}
}
}
}
}

39. Communications
department has a
special announcement,
they want a special
block style to highlight
it.
.logged-in {
#content {
.block {
h2.title {
color: MediumSeaGreen;
}
}
.sidebar-second {
.block {
h2.title {
color: LightGoldenRodYellow;
}
&#my-special-block {
h2.title {
color: YouGottaBeKiddingMe;
}
}
}
}
}
}

40. Poor kitty. :’(
.logged-in {
#content {
.block h2.title {
color: MediumSeaGreen;
}
.sidebar-second {
.block {
h2.title {
color: LightGoldenRodYellow;
}
&#my-special-block {
h2.title {
color: YouGottaBeKiddingMe;
}}}}}} /* This is called saving space */
.logged-in #content .block h2.title { color: MediumSeaGreen; }
.logged-in #content .sidebar-second .block h2.title { color: LightGoldenRod
.logged-in #content .sidebar-second .block#my-special-block h2.title { colo

41. Override this, I dare you.
.node-type-key-topics #main #content .panel-pane.pane-key-topics-portfolio-panel-
pane-2 .view-key-topics-portfolio > .view-content li.views-row > div {
}
Real life example. Love the ability to nest selectors in SASS/LESS, but remember that nesting isn’t
always necessary. If you don’t need to nest to achieve a certain level of specificity, don’t do it.
Rule of thumb: Nest no more than 3-4 levels deep!
http://www.creativebloq.com/css3/avoid-css-mistakes-10135080 - For all the insights on everything
everyone is doing wrong.
padding: 0;padding: 0 $base_unit
!important;
There, I did it. Neener, neener.

42. Other Pitfalls
● !important
● Over-specificity
● #id selectors - Not cool! Practically
impossible to override and slower
performance.
Please keep your module CSS non-
specific. Overspecify, and I would rather
write my own module than use yours.

43. SMACSS
● Scalable and
● Modular
● Architecture for
● Cascading
● Style
● Sheets
https://smacss.com/

44. Why?
● Organization
● Working with individual, repeatable
components, rather than whole-page
mentality
● Less nesting
● Fewer unnecessary overrides
● BEM - Easier to tell what a component is doing from
name alone
● Styleguide-driven development

45. Sass structure
● Base - Resets, defaults, variables, mixins, no classes or ids!
● Layout - Set it and forget it. No styles!
● Module (Component) - Individual and repeatable separate pieces of your
site (e.g. .button)
o Block
o Element
o Modifier
● State - hover and other contextual issues
● Theme (Skin) - Things specific to your theme, independant of
components, etc.

46. BEM Naming
Conventions
.cat { // Block: A cat. }
.cat__fur { // Element: Fur is an element “in” the cat. }
.cat__box { // Element: Box is a wrapper around the cat. }
.cat--fetish { // Modifier: Fetish is a specific cat. }
.cat--fetish.is-purring { // State: Fetish the cat is purring. }
.living-room .cat { // Theme: A cat in the living room. }

47. Styleguide driven development

48. New to front-end development?
“Here’s a secret: No one
else really knows what
they’re doing either.”
Nicholas Gallagher, 2013
(stolen from John Albin)

49. Further reading/watching/tools
● http://styleguides.io/
● Styleguide driven
development -
https://www.youtube.com/wat
ch?v=0ulC_UiObS0
● http://bourbon.io