Closed victorkane closed 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>
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.
"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)
"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)
(this section mainly derived from Sass lang basics)
Sass takes your preprocessed SCSS file and saves it as a normal CSS file that you can use in your web site.
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.
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;
}
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.
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;
}
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;
}
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;
}
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%;
}
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:
styles.scss
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
If we wish to change the layout, we want to work with Zen Grids use in sass/layouts/_responsive.scss
Read and study the Zen Grids Reference documentation
The layout is specified in sass/layouts/_responsive.scss
Experiment with some changes.
We need styling, and with our Zen sub-theme we are going to use Sass (stands for “syntactically awesome style sheets”)!
compass watch [path/to/project]
Install ruby and sass
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: