How to easy and fast create Drupal themes using on Sass && Susy

We will talk about

• Why I choose custom instead of contrib Drupal theme
• What are SASS, Compass and Susy
• How to install all of that
• Why Sass instead of css
• All about Susy
• How to use it with Drupal 7. Examples

#ledc2015

Why I choose custom instead of contrib Drupal theme.

#ledc2015

Sass (Syntactically Awesome Stylesheets) is a stylesheet language. Sass is a scripting language that is interpreted into Cascading Style Sheets (CSS).

Sass is the most mature, stable, and powerful professional grade CSS extension language in the world.

What are SASS, Compass and Susy.

#ledc2015

apt-get install ruby-full rubygems

gem install sass

gem install compass

gem install susy

sass -v 

compass -v

How to install all of that

#ledc2015

- Variables and nesting

Why Sass instead of css

$primary-font-color: #575757;
$secondary-font-color: #000000;

body {
  .some-first-class {
    color: $primary-font-color;
  }
  .some-second-class {
    color: $secondary-font-color;
  }
}

/* line 6, ../sass/style.scss */
body .some-first-class {
  color: #575757;
}
/* line 9, ../sass/style.scss */
body .some-second-class {
  color: #000000;
}

#ledc2015

- Import

Why Sass instead of css

// _variables.scss
$primary-font-color: #575757;
$secondary-font-color: #000000;


// style.scss
@import 'variables';

body {
  .some-first-class {
    color: $primary-font-color;
  }
  .some-second-class {
    color: $secondary-font-color;
  }
}

/* line 6, ../sass/style.scss */
body .some-first-class {
  color: #575757;
}
/* line 9, ../sass/style.scss */
body .some-second-class {
  color: #000000;
}

#ledc2015

- Mixins

Why Sass instead of css

// _mixins.scss
@mixin like-a-button() {
  padding: 10px 5px;
  line-height: 24px;
  font-size: 16px;
  border: 1px solid #d6d6d6;
  background: #ffffff;
  color: #000000;

  &:hover {
    background: pink;
  }
}

// style.scss
@import 'variables';
@import 'compass/css3';
@import 'mixins';

body {
  .some-first-class {
    color: $primary-font-color;
  }
  .some-second-class {
    color: $secondary-font-color;
    @include border-radius(10);
  }
  a.button {
    @include like-a-button();
  }
}

/* line 6, ../sass/style.scss */
body .some-first-class {
  color: #575757;
}
/* line 9, ../sass/style.scss */
body .some-second-class {
  color: #000000;
  -moz-border-radius: 10;
  -webkit-border-radius: 10;
  border-radius: 10;
}
/* line 13, ../sass/style.scss */
body a.button {
  padding: 10px 5px;
  line-height: 24px;
  font-size: 16px;
  border: 1px solid #d6d6d6;
  background: #ffffff;
  color: #000000;
}
/* line 9, ../sass/_mixins.scss */
body a.button:hover {
  background: pink;
}

#ledc2015

- Extend and inheritance

Why Sass instead of css

.message {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}
.success {
  @extend .message;
  border-color: green;
}
.error {
  @extend .message;
  border-color: red;
}
.warning {
  @extend .message;
  border-color: yellow;
}

.message, .success, .error, .warning {
  border: 1px solid #cccccc;
  padding: 10px;
  color: #333;
}
.success {
  border-color: green;
}
.error {
  border-color: red;
}
.warning {
  border-color: yellow;
}

#ledc2015

All about Susy

#ledc2015

// _grids.scss
@import "susy";

$susy: (
  columns: 12,
  gutters: 1/4,
  math: fluid,
  output: float,
  gutter-position: after,
  container: 1260px,

  debug: (
    image: show,
    color: #1095C2,
    output: background,
  )
);

@include container();
@include push();
@include span();
@include gutter();
@include break;
@include gallery();

How to use it with Drupal7.Examples

#ledc2015

compass create --using susy

// page.tpl.php
<main>
  <?php if ($page['header']): ?>
    <header id="header">
      <?php print render($page['header']); ?>
    </header>
  <?php endif; ?>

  <div id="content">
    <div id="main-content">
      <?php print $messages; ?>
      <?php if ($title): ?>
        <h1 class="title" id="page-title"><?php print $title; ?></h1>
      <?php endif; ?>
      <?php print render($page['content']); ?>
    </div>
  </div>

  <footer id="footer">
    <?php if ($page['footer']): ?>
      <div id="footer-region">
        <?php print render($page['footer']); ?>
      </div>
    <?php endif; ?>
  </footer>
</main>

How to use it with Drupal7.Examples

#ledc2015

Header

Main content

Footer

How to use it with Drupal7.Examples

#ledc2015

Header

Left sidebar

Main content

Some text 1

Some text 1

Some text 1

Povered by Drupal

How to use it with Drupal7.Examples

#ledc2015

<main>
  <header id="header">This is our header</header>

  <div id="content">
    <div id="main-content">
      <div id="left-sidebar">Left sidebar</div>
      <div id="content">Main content</div>
    </div>
  </div>

  <footer id="footer">
    <div id="footer-region">
      <div class="left">Left column</div>
      <div class="middle">Middle column</div>
      <div class="right">Right column</div>
      <div class="bottom">Powered by Drupal</div>
    </div>
  </footer>
</main>

How to use it with Drupal7.Examples

#ledc2015

How to use it with Drupal7.Examples

#ledc2015

main {
  @include container();

  header {
    background: rgba(#FF7D4F, .7);
    @include span(12);
  }
  #content {
    #left-sidebar {
      @include span(3 of 12);
      background: rgba(#E3C5ED, .8);
    }
    #main-content {
      @include span(9 last);
      background: rgba(#A6F58C, .7);
    }
  }
  footer {
    .left, .middle, .right {
      @include span(4 of 12);
      background: rgba(#F5A68C, .7);
    }
    .right {
      @include span(4 of 12 last);
    }
    .bottom {
      @include span(12);
      text-align: center;
      background: rgba(#E3C5ED, .7);
    }
  }
}

How to use it with Drupal7.Examples

#ledc2015

How to use it with Drupal7.Examples

#ledc2015

@import "compass/typography/vertical_rhythm";
@import "compass/reset";

$base-font-size: 22px !global;
$base-line-height: 33px !global;
$rhythm-unit: "px" !global;
$grid-background-baseline-color: red !global;

@include establish-baseline;

body {
  @include debug-vertical-alignment;
}

How to use it with Drupal7.Examples

#ledc2015

#ledc2015

Questions

?