My First Drupal 8 Theme using Compass

Non-themer attempt
By Cathy Theys

I was at the Fox Valley, Illinois USA meetup that dicussed compass. Of course, I wanted to try it for real... and on Drupal 8. Here is what I did.

Installing compass

I prepared for the meetup by installing compass earlier in the day. I looked at two tutorials:

and installed it by doing:

$ sudo gem update --system<br>$ sudo gem install sass --pre<br>$ sudo gem install compass --pre

I got some warnings and ignored them.

The Meetup

I watched (and gently heckled) @j_bell at the Fox Valley meetup. The presentation is at http://jasonbell.github.io/dcfv-sass/#/ After the presentation, Jason and I got a Drupal 8 theme going on my laptop in about 10 minutes.

Making my first Drupal 8 theme

Themes go right in the top level theme directory. My local webroot is ~/foo and my drupal root is at: ~/foo/drupal. So first I did: cd ~/foo/drupal
Then cd themes and decided to name my theme "my". So I make a directory with that name. mkdir my and cd my

I initialized the directory with compass init And started watching it (in another terminal window) with compass watch

I copied the info file from stark with cp ~/foo/drupal/core/themes/stark/stark.info.yml my.info.yml

I edited that file, changing the name and the stylesheets, so that it looked like:

name: My<br>type: theme<br>description: 'This theme demonstrates My Drupal''s default HTML markup and CSS styles. To learn how to build your own theme and override Drupal''s default code, see the &lt;a href="http://drupal.org/theme-guide"&gt;Theming Guide&lt;/a&gt;.'<br>package: Core<br>version: VERSION<br>core: 8.x<br>stylesheets:<br>&nbsp; all:<br>&nbsp;&nbsp;&nbsp; - stylesheets/screen.css

To enable it I went to the admin screen for themes under appearance at admin/appearance and enabled my theme and set it as the default.

I inspected a menu to see what I might change, and then edited the sass/screen.scss file, trying out some of the things I learned in the presentation like, variables, lighten(), and @include inline-block-list, to be:

/* Welcome to Compass.<br> * In this file you should write your main styles. (or centralize your imports)<br> * Import this file using the following HTML or equivalent:<br> * &lt;link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" /&gt; */<br><br>@import "compass";<br>@import "compass/reset";<br><br>$green : #008822;<br><br>nav[role="navigation"] {<br>&nbsp; background: lighten($green, 40%);<br>&nbsp; ul {<br>&nbsp;&nbsp;&nbsp; @include inline-block-list(2em);<br>&nbsp; }<br>}

When saving, I see in the other terminal window that is watching, that the files were recompiled.
Opening up the home page (so I am not seeing the admin theme) yields:

I'm not a themer, so even though it is not usable, I was pretty proud of this first little step with both compass and a Drupal 8 theme. :)

-YesCT

Original Article: