search

victorkane / lit-drupal-lean

Distro project for DrupalPicchu2014 Drupal Lean Process Workshop
GNU General Public License v2.0
10 stars 4 forks source link

Sass environment #30

Closed victorkane closed 10 years ago

victorkane commented 10 years ago

We need styling, and with our Zen sub-theme we are going to use Sass (stands for “syntactically awesome style sheets”)!

lit@awebfactory:~/lit-dev$ sudo apt-get install rubygems
lit@awebfactory:~/lit-dev$ sudo gem update
Updating installed gems
Nothing to update
lit@awebfactory:~/lit-dev$ sudo gem install sass
lit@awebfactory:~/lit-dev$ sass -v
Sass 3.2.13 (Media Mark)

Install compass

lit@awebfactory:~/lit-dev$ sudo gem install compass

Zen Grids

For a non-Drupal non-Zen sub-theme project (where Zen Grids is already installed, do sudo gem install zen-grids

Tell Compass to "watch" the sass directory so that any time a .scss file is changed it will automatically place a generated CSS file into your sub-theme's css directory:

lit@awebfactory:~/lit-dev$ compass watch docroot/sites/all/themes/litthemezen/
>>> Change detected at 19:23:32 to: styles-rtl.scss
overwrite docroot/sites/all/themes/litthemezen/css/styles-rtl.css 
overwrite docroot/sites/all/themes/litthemezen/css/styles.css 
>>> Compass is polling for changes. Press Ctrl-C to Stop.
victorkane commented 10 years ago

First let's dive into pure Sass:

Books

Next, best practices for developing Drupal based web apps with these tools!

victorkane commented 10 years ago

With compass and sass installed, in a code dir do:

$ compass create sass01
/Users/victorkane/Work/Learn/Sass>
directory sass01/ 
directory sass01/sass/ 
directory sass01/stylesheets/ 
   create sass01/config.rb 
   create sass01/sass/screen.scss 
   create sass01/sass/print.scss 
   create sass01/sass/ie.scss 
   create sass01/stylesheets/ie.css 
   create sass01/stylesheets/print.css 
   create sass01/stylesheets/screen.css 

*********************************************************************
Congratulations! Your compass project has been created.

You may now add and edit sass stylesheets in the sass subdirectory of your project.

Sass files beginning with an underscore are called partials and won't be
compiled to CSS, but they can be imported into other sass stylesheets.

You can configure your project by editing the config.rb configuration file.

You must compile your sass stylesheets into CSS when they change.
This can be done in one of the following ways:
  1. To compile on demand:
     compass compile [path/to/project]
  2. To monitor your project for changes and automatically recompile:
     compass watch [path/to/project]

More Resources:
  * Website: http://compass-style.org/
  * Sass: http://sass-lang.com
  * Community: http://groups.google.com/group/compass-users/

To import your new stylesheets add the following lines of HTML (or equivalent) to your webpage:
<head>
  <link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" />
  <link href="/stylesheets/print.css" media="print" rel="stylesheet" type="text/css" />
  <!--[if IE]>
      <link href="/stylesheets/ie.css" media="screen, projection" rel="stylesheet" type="text/css" />
  <![endif]-->
</head>
/Users/victorkane/Work/Learn/Sass>
/Users/victorkane/Work/Learn/Sass>
victorkane commented 10 years ago

Leave compass watching for changes and compiling in real time from the command line in a terminal you just leave open:

Victors-MacBook-Air:sass01 victorkane$ ls
config.rb   sass        stylesheets
Victors-MacBook-Air:sass01 victorkane$ compass watch
>>> Compass is polling for changes. Press Ctrl-C to Stop.
victorkane commented 10 years ago

Minimal set of points to bear in mind while "getting started with Sass"

Sass actually has two syntaxes

"The main syntax is referred to as "SCSS" (for "Sassy CSS") and is new as of Sass 3. The older syntax (part of that history I mentioned) is referred to as the indented syntax (or just "Sass")." (Sass Way Getting Started).

"In Sass 3.0 the developers introduced a new, more CSS-like syntax called SCSS (or “Sassy CSS”)" Now, "anything that’s valid CSS is also valid SCSS. In other words, all of your existing style sheets should work with the Sass processor with no problems." (Ala Sass)

SCSS (Sassy CSS) is a scripting language

"Unlike regular CSS, Sass’ SCSS is a real scripting language, with expressions, functions, variables, conditional logic, and loops. You don’t have to use all of these features to get some benefit out of Sass, but they’re there if you need them, and on large projects they can make complex or repetitive CSS much easier to write." (Ala Sass)

Sass basic features

(this section mainly derived from Sass lang basics)

Pre-processing

Sass takes your preprocessed SCSS file and saves it as a normal CSS file that you can use in your web site.

Variables

Think of variables as a way to store information that you want to reuse throughout your stylesheet. Sass uses the $ symbol to make something a variable. An example:

$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

When the Sass is processed, it takes the variables we define for the $font-stack and $primary-color and outputs normal CSS with our variable values placed in the CSS.

Nesting

When you write HTML you've probably noticed that it has a fairly clear nested, visual hierarchy. CSS, on the other hand, isn't. Sass will let you nest your CSS selectors in a way that follows the same visual hierarchy of your HTML. Here's an example of some typical styles for a site's navigation:

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

When you generate the CSS you'll get something like this:

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav li {
  display: inline-block;
}

nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

Partials

You can create partial Scss files that contain little snippets that you can include in other Scss files. This is a great way to modularize and to keep things easier to maintain. A partial is simply an Scss file named with a leading underscore. You might name it something like _partial.scss. Partials are included with the @import directive.

Import

In CSS, each time you use @import it creates another HTTP request. Sass builds on top of the current CSS @import but instead of requiring an HTTP request, Sass will take the file that you want to import and combine it with the file you're importing it into so you can serve a single CSS file to the web browser.

Let's say you have a couple of Sass files, reset.scss and base.scss. We want to import reset.scss into base.scss.

/* _reset.scss */

html,
body,
ul,
ol {
  margin:  0;
  padding: 0;
}
/* base.scss */

@import 'reset';

body {
  font-size: 100% Helvetica, sans-serif;
  background-color: #efefef;
}

Mixins

What in some scripting and programming languages are called "functions" or "sub-routines", a mixin lets you make groups of CSS declarations that you want to reuse throughout your site. You can even pass in values to make your mixin more flexible. An example:

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
       -o-border-radius: $radius;
          border-radius: $radius;
}

.box { @include border-radius(10px); }

To create a mixin you use the @mixin directive and give it a name. We've named our mixin border-radius. We're also using the variable $radius inside the parentheses so we can pass in a radius of whatever we want. After you create your mixin, you can then use it as a CSS declaration starting with @include followed by the name of the mixin. When your CSS is generated it'll look like this:

.box {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;
}

Extend/Inheritance

Analogous to object-oriented classes, using @extend lets you share a set of CSS properties from one selector to another. It helps keep your Sass very DRY. In our example we're going to create a simple series of messaging for errors, warnings and successes.

.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;
}

Operators

Doing math in your CSS is very helpful. Sass has a handful of standard math operators like +, -, *, /, and %. In our example we're going to do some simple math to calculate widths for an aside & article.

.container { width: 100%; }

article[role="main"] {
  float: left;
  width: 600px / 960px * 100%;
}

aside[role="complimentary"] {
  float: right;
  width: 300px / 960px * 100%;
}

We've created a very simple fluid grid, based on 960px. Operations in Sass let us do something like take pixel values and convert them to percentages without much hassle. The generated CSS will look like:

.container {
  width: 100%;
}

article[role="main"] {
  float: left;
  width: 62.5%;
}

aside[role="complimentary"] {
  float: right;
  width: 31.25%;
}

Continue with Ala Sass article referenced above

Todo Basic Html + Sass example

victorkane commented 10 years ago

How is Sass used in Drupal in general and in Zen in particular?

Useful resources here are sass/README.txt and css/README.txt Another: Most voted answer to Zen theme: understanding the zen grids design in _responsive.scss

The main thing to understand is the following structure, and that Zen Grids is incorporated into your Zen sub-theme via _responsive.scss.

Invocation:

File system directory structure:

sass
├── README.txt
├── _init.scss
├── _mixins.scss
├── _normalize-rtl.scss
├── _normalize.scss
├── _print.scss
├── components
│   ├── _misc-rtl.scss
│   └── _misc.scss
├── layouts
│   ├── _fixed-rtl.scss
│   ├── _fixed.scss
│   ├── _responsive-rtl.scss
│   └── _responsive.scss
├── styles-rtl.scss
└── styles.scss
sass-extensions
└── zen-grids
    ├── stylesheets
    │   ├── _zen.scss
    │   └── zen
    │       ├── _background.scss
    │       └── _grids.scss

\ Compass library, on MacBook Air installed via ruby is at /Library/Ruby/Gems/1.8/gems/compass-0.12.2

Resources

victorkane commented 10 years ago

Diving into Zen, Zen Grids, Sass and Compass

Step 1: Understand where Sass appears in the Zen sub-theme (see above)

If we wish to change the layout, we want to work with Zen Grids use in sass/layouts/_responsive.scss

Step 2: Understand Zen Grids thoroughly

Read and study the Zen Grids Reference documentation

Step 3: See how Zen Grids is used in the Zen sub-theme layout off the shelf

The layout is specified in sass/layouts/_responsive.scss Experiment with some changes.

Step 4: Make the landing page options block for Anonymous users responsive

victorkane commented 10 years ago

Addendum

Sass vs Less vs ...?