284 lines
13 KiB
HTML
284 lines
13 KiB
HTML
<!DOCTYPE html>
|
||
<html class="no-js" lang="en-GB">
|
||
<head>
|
||
<title>How to use SASS and Compass in Drupal 7 using Sassy | Oliver Davies</title>
|
||
|
||
<meta charset="UTF-8">
|
||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
|
||
|
||
<meta property="og:url" content="https://www.oliverdavies.uk/blog/2012/12/06/use-sass-and-compass-drupal-7-using-sassy/">
|
||
<meta property="og:title" content="How to use SASS and Compass in Drupal 7 using Sassy"/>
|
||
|
||
|
||
|
||
<meta property="og:image" content="https://www.oliverdavies.uk/assets/images/me-precedent.jpg"/>
|
||
<meta property="og:image:height" content="327"/>
|
||
<meta property="og:image:type" content="image/jpg">
|
||
<meta property="og:image:width" content="327"/>
|
||
|
||
|
||
|
||
<link rel="stylesheet" href="https://www.oliverdavies.uk/assets/css/main.css">
|
||
|
||
<link rel="apple-touch-icon" href="/assets/images/me-precedent.jpg?s=57" sizes="57x57">
|
||
<link rel="apple-touch-icon" href="/assets/images/me-precedent.jpg?s=114" sizes="114x114">
|
||
<link rel="apple-touch-icon" href="/assets/images/me-precedent.jpg?s=72" sizes="72x72">
|
||
<link rel="apple-touch-icon" href="/assets/images/me-precedent.jpg?s=144" sizes="144x144">
|
||
<link rel="apple-touch-icon" href="/assets/images/me-precedent.jpg?s=60" sizes="60x60">
|
||
<link rel="apple-touch-icon" href="/assets/images/me-precedent.jpg?s=120" sizes="120x120">
|
||
<link rel="apple-touch-icon" href="/assets/images/me-precedent.jpg?s=76" sizes="76x76">
|
||
<link rel="apple-touch-icon" href="/assets/images/me-precedent.jpg?s=152" sizes="152x152">
|
||
|
||
<link rel="icon" href="/assets/images/me-precedent.jpg?s=160" sizes="160x160">
|
||
<link rel="icon" href="/assets/images/me-precedent.jpg?s=96" sizes="96x96">
|
||
<link rel="icon" href="/assets/images/me-precedent.jpg?s=32" sizes="32x32">
|
||
<link rel="icon" href="/assets/images/me-precedent.jpg?s=16" sizes="16x16">
|
||
</head>
|
||
<body class="">
|
||
<nav class="navbar navbar-inverse navbar-fixed-top">
|
||
<div class="container">
|
||
<div class="navbar-header">
|
||
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
|
||
<span class="sr-only">Toggle navigation</span>
|
||
<span class="icon-bar"></span>
|
||
<span class="icon-bar"></span>
|
||
<span class="icon-bar"></span>
|
||
</button>
|
||
<a class="navbar-brand" href="https://www.oliverdavies.uk/">Oliver Davies</a>
|
||
</div>
|
||
|
||
<div id="navbar" class="collapse navbar-collapse" role="navigation">
|
||
<ul class="nav navbar-nav">
|
||
<li class="">
|
||
<a href="/">About</a>
|
||
</li>
|
||
|
||
<li class="">
|
||
<a href="/experience">Experience</a>
|
||
</li>
|
||
|
||
<li class="">
|
||
<a href="/testimonials">Testimonials</a>
|
||
</li>
|
||
|
||
<li class="">
|
||
<a href="/talks">Talks</a>
|
||
</li>
|
||
|
||
<li class="active">
|
||
<a href="/blog">Blog</a>
|
||
</li>
|
||
|
||
<li class="">
|
||
<a href="/contact">Contact</a>
|
||
</li>
|
||
</ul>
|
||
</div> </div>
|
||
</nav>
|
||
|
||
<div class="container">
|
||
<div class="row">
|
||
<main class="col-md-9">
|
||
<h1>How to use SASS and Compass in Drupal 7 using Sassy</h1>
|
||
|
||
<p class="posted text-light">6th December 2012</p>
|
||
|
||
<p>I've recently started using <a href="http://sass-lang.com">SASS</a> rather than LESS to do my CSS preprocessing - namely due to its integration with <a href="http://compass-style.org">Compass</a> and it's built-in CSS3 mixins. There are three modules that provide the ability to use SASS within Drupal:</p>
|
||
|
||
<ul>
|
||
<li><a href="http://drupal.org/project/sassy" title="Sassy module on drupal.org">Sassy</a></li>
|
||
<li><a href="http://drupal.org/project/prepro" title="Prepro module on drupal.org">Prepro</a></li>
|
||
<li><a href="http://drupal.org/project/libraries" title="Libraries API module on drupal.org">Libraries API</a></li>
|
||
</ul>
|
||
|
||
<p>Alternatively, you could use a base theme like <a href="http://drupal.org/project/sasson" title="Sasson theme on drupal.org">Sasson</a> that includes a SASS compiler.</p>
|
||
|
||
<h2 id="download-the-phpsass-library">Download the PHPSass Library</h2>
|
||
|
||
<p>The first thing to do is download the PHPSass library from <a href="https://github.com/richthegeek/phpsass" title="PHPSass on GitHub">GitHub</a>, as this is a requirement of the Sassy module and we can't enable it without the library. So, in a Terminal window:</p>
|
||
|
||
<pre><code class="language-bash">$ mkdir -p sites/all/libraries;
|
||
$ cd sites/all/libraries;
|
||
$ wget https://github.com/richthegeek/phpsass/archive/master.tar.gz;
|
||
$ tar zxf master.tar.gz;
|
||
$ rm master.tar.gz;
|
||
$ mv phpsass-master/ phpsass
|
||
</code></pre>
|
||
|
||
<p>Or, if you're using Drush Make files:</p>
|
||
|
||
<pre><code class="language-ini">libraries[phpsass][download][type] = "get"
|
||
libraries[phpsass][download][url] = "https://github.com/richthegeek/phpsass/archive/master.tar.gz"
|
||
</code></pre>
|
||
|
||
<p>The PHPSass library should now be located at <code>sites/all/libraries/phpsass</code>.</p>
|
||
|
||
<h2 id="download-and-enable-the-drupal-modules">Download and enable the Drupal modules</h2>
|
||
|
||
<p>This is easy if you use <a href="http://drupal.org/project/drush">Drush</a>:</p>
|
||
|
||
<pre><code class="language-bash">$ drush dl libraries prepro sassy
|
||
$ drush en -y libraries prepro sassy sassy_compass
|
||
</code></pre>
|
||
|
||
<p>Otherwise, download the each module from it's respective project page and place it within your <code>sites/all/modules</code> or <code>sites/all/modules/contrib</code> directory.</p>
|
||
|
||
<h2 id="configuring-the-prepro-module">Configuring the Prepro module</h2>
|
||
|
||
<p>The Prepro module provides various settings that can be changed for each preprocessor. Go to <code>admin/config/media/prepro</code> to configure the module as required.</p>
|
||
|
||
<p>Personally, in development, I'd set caching to 'uncached' and the error reporting method to 'show on page'. In production, I'd change these to "cached" and "watchdog" respectively. I'd also set the output style to "compressed",</p>
|
||
|
||
<h2 id="adding-sass-files-into-your-theme">Adding SASS files into your theme</h2>
|
||
|
||
<p>With this done, you can now add SASS and SCSS files by adding a line like <code>stylesheets[all][] = css/base.scss</code> in your theme's .info file.</p>
|
||
|
||
<p class="tags">
|
||
Tags:
|
||
<a href="https://www.oliverdavies.uk/blog/tags/compass">compass</a>, <a href="https://www.oliverdavies.uk/blog/tags/css">css</a>, <a href="https://www.oliverdavies.uk/blog/tags/drupal">drupal</a>, <a href="https://www.oliverdavies.uk/blog/tags/drupal-7">drupal-7</a>, <a href="https://www.oliverdavies.uk/blog/tags/drupal-planet">drupal-planet</a>, <a href="https://www.oliverdavies.uk/blog/tags/less">less</a>, <a href="https://www.oliverdavies.uk/blog/tags/preprocessing">preprocessing</a>, <a href="https://www.oliverdavies.uk/blog/tags/sass">sass</a> </p>
|
||
<div class="post-pager is-flex">
|
||
<div class="is-half">
|
||
<a href="/blog/2012/11/17/open-sublime-text-2-mac-os-x-command-line/">
|
||
« Open Sublime Text 2 from the Mac OS X Command Line
|
||
</a>
|
||
</div>
|
||
|
||
<div class="is-half text-right">
|
||
<a href="/blog/2013/01/09/checking-if-user-logged-drupal-right-way/">
|
||
Checking if a user is logged into Drupal (the right way) »
|
||
</a>
|
||
</div>
|
||
</div>
|
||
<div class="about-author">
|
||
<h2>About the Author</h2>
|
||
|
||
<img src="//www.oliverdavies.uk/assets/images/me-precedent.jpg" alt="Picture of Oliver" class="img-circle">
|
||
|
||
<p>Oliver Davies is a Web Developer, System Administrator and Drupal specialist based in the UK. He is a Senior Developer at <a href="https://microserve.io">Microserve</a> and also provides freelance consultancy services for Drupal websites, PHP applications and Linux servers.</p>
|
||
</div>
|
||
</main>
|
||
|
||
<div class="col-md-3">
|
||
<div class="panel badges text-center">
|
||
<a href="https://assoc.drupal.org/membership" title="I’m a Drupal Association member." class="is-block">
|
||
<img
|
||
src="//www.oliverdavies.uk/assets/images/badges/da-individual-member.png"
|
||
alt="Drupal Association Individual Member"
|
||
width="200"
|
||
/>
|
||
</a>
|
||
|
||
<div class="is-flex align-items-center">
|
||
<img
|
||
src="//www.oliverdavies.uk/assets/images/badges/acquia-d8-developer.png"
|
||
alt="Acquia Certified Developer - Drupal 8 Exam Badge"
|
||
class="is-2"
|
||
/>
|
||
|
||
<img
|
||
src="//www.oliverdavies.uk/assets/images/badges/acquia-d8-back-end.png"
|
||
alt="Acquia Certified Back End Specialist - Drupal 8 Exam Badge"
|
||
class="is-2"
|
||
/>
|
||
</div>
|
||
|
||
<a href="http://conference.phpnw.org.uk/phpnw17" class="is-block">
|
||
<img src="//www.oliverdavies.uk/assets/images/badges/phpnw17.png" alt="">
|
||
</a>
|
||
</div>
|
||
<div class="availability panel panel-default">
|
||
<div class="panel-heading">Availability</div>
|
||
|
||
<div class="panel-body">
|
||
<p>
|
||
<i class="fa fa-thumbs-o-up text-warning"></i>
|
||
|
||
|
||
Currently have limited part-time capacity
|
||
</p>
|
||
<p>
|
||
<i class="fa fa-thumbs-o-down text-danger"></i>
|
||
|
||
Currently no spare full-time capacity.
|
||
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div class="latest-posts panel panel-default">
|
||
<div class="latest-posts__heading panel-heading">Latest blog posts</div>
|
||
|
||
<ul class="list-group">
|
||
<li class="post list-group-item">
|
||
<span class="post__title">
|
||
<a href="/blog/2017/07/13/publishing-sculpin-sites-with-github-pages/">
|
||
Publishing Sculpin Sites with GitHub Pages
|
||
</a>
|
||
</span> -
|
||
<span class="post__date">13th July, 2017</span>
|
||
</li>
|
||
<li class="post list-group-item">
|
||
<span class="post__title">
|
||
<a href="/blog/2017/06/09/introducing-the-drupal-meetups-twitterbot/">
|
||
Introducing the Drupal Meetups Twitterbot
|
||
</a>
|
||
</span> -
|
||
<span class="post__date">9th June, 2017</span>
|
||
</li>
|
||
<li class="post list-group-item">
|
||
<span class="post__title">
|
||
<a href="/blog/2017/05/20/turning-drupal-module-into-feature/">
|
||
Turning Your Custom Drupal Module into a Feature
|
||
</a>
|
||
</span> -
|
||
<span class="post__date">20th May, 2017</span>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
</div> </div>
|
||
<footer class="container">
|
||
<p class="copyright">
|
||
© 2010-2017 Oliver Davies. Built with <a href="https://sculpin.io">Sculpin</a>.
|
||
</p>
|
||
|
||
<div class="meetups">
|
||
<h2>Things that I organise</h2>
|
||
<ul>
|
||
<li class="meetups--drupal-bristol">
|
||
<a href="http://www.drupalbristol.org.uk" title="Drupal Bristol">
|
||
<img
|
||
src="//www.oliverdavies.uk/assets/images/meetups/drupal-bristol.jpeg"
|
||
alt="Drupal Bristol logo"
|
||
>
|
||
</a>
|
||
</li>
|
||
<li class="meetups--drupalcamp-bristol">
|
||
<a href="http://www.drupalcampbristol.co.uk" title="DrupalCamp Bristol">
|
||
<img
|
||
src="//www.oliverdavies.uk/assets/images/meetups/drupalcamp-bristol.png"
|
||
alt="DrupalCamp Bristol logo"
|
||
>
|
||
</a>
|
||
</li>
|
||
<li class="meetups--phpsw">
|
||
<a href="http://phpsw.uk" title="PHPSW">
|
||
<img
|
||
src="//www.oliverdavies.uk/assets/images/meetups/phpsw.jpeg"
|
||
alt="PHPSW logo"
|
||
>
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</footer>
|
||
|
||
<script src="https://www.oliverdavies.uk/assets/js/site.js"></script>
|
||
|
||
<script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-11967257-1', 'auto'); ga('send', 'pageview');</script>
|
||
|
||
</body>
|
||
</html>
|