Theming and Sass

James Pearce
Sr Director, Developer Relations

@ jamespearce
jamesp@sencha.com

It’s easy to forget
it’s all in a browser

CSS hopefully
needs no introduction

<!DOCTYPE html>
<html>
<head>
<script src="sencha-touch.js"
type="text/javascript">
</script>
<link href="sencha-touch.css"
type="text/css"
rel="stylesheet"
/>
...

div {
background: #cc66ff;
}

div {
background: rgba(
204, 102, 255, 0.5
);
}

div {
-webkit-border-radius: 10px;
}

div {
-webkit-box-shadow:
4px 4px 3px #000;
}

div {
text-shadow:
1px 1px 0px #fff;
}

div {
background-image:
-webkit-gradient(
linear,
0 0,
0 100%,
from(#f77),
to(#77f)
);
}

@font-‐face {
font-‐family: 'Consolas';
src: url('consolas.woff');
}

div {
font-‐family: 'Consolas';
}

http://westciv.com/tools/gradients/

https://github.com/bluesmoon/pngtocss

http://www.google.com/webfonts

Variables
/* SCSS */ /* CSS */

$blue: #3bbfce; .content-navigation {
$margin: 16px; border-color: #3bbfce;
color: #2b9eab;
.content-navigation { }
border-color: $blue;
color: .border {
darken($blue, 9%); padding: 8px;
} margin: 8px;
border-color: #3bbfce;
.border { }
padding: $margin / 2;
margin: $margin / 2;
border-color: $blue;
}

Functions
rgb($red, $green, $blue)
lighten($color, $amount)
complement($color)
transparentize($color, $amount)
...

ceil($value)
...

if($condition, $if-true, $if-false)
...

Nesting
/* SCSS */ /* CSS */

table.hl { table.hl {
margin: 2em 0; margin: 2em 0;
td.ln { }
text-align: right; table.hl td.ln {
} text-align: right;
} }

li { li {
font: { font-family: serif;
family: serif; font-weight: bold;
weight: bold; font-size: 1.2em;
size: 1.2em; }
}
}

Mixins
/* SCSS */ /* CSS */

@mixin table-base { #data {
th { float: left;
text-align: center; margin-left: 10px;
font-weight: bold; }
} #data th {
td, th {padding: 2px} text-align: center;
} font-weight: bold;
}
@mixin left($dist) { #data td, #data th {
float: left; padding: 2px;
margin-left: $dist; }
}

#data {
@include left(10px);
@include table-base;
}

Selector Inheritance
/* SCSS */ /* CSS */

.error { .error, .badError {
border: 1px #f00; border: 1px #f00;
background: #fdd; background: #fdd;
} }
.error.intrusion {
font-size: 1.3em; .error.intrusion,
font-weight: bold; .badError.intrusion {
} font-size: 1.3em;
font-weight: bold;
.badError { }
@extend .error;
border-width: 3px; .badError {
} border-width: 3px;
}

CSS3 Modules
Appearance Font Face
Background Clip Gradient
Background Origin Images
Background Size Inline Block
Border Radius Opacity
Box Text Shadow
Box Shadow Transform
Box Sizing Transition
Columns

For example
/* SCSS */
div {
@include border-radius(4px, 4px);
}

/* CSS */
div {
-webkit-border-radius: 4px 4px;
-moz-border-radius: 4px / 4px;
-o-border-radius: 4px / 4px;
-ms-border-radius: 4px / 4px;
-khtml-border-radius: 4px / 4px;
border-radius: 4px / 4px;
}

Typography
Links Text
Lists Vertical Rhythm

Utilities
Color Sprites
General Tables

...

$> sudo gem install compass

http://rubyinstaller.org/

$> compass -v

Compass 0.11.1 (Antares)
Copyright (c) 2008-2011 Chris Eppstein
Released under the MIT License.

$> sass -v

Sass 3.1.1 (Brainy Betty)

$> compass create .

directory sass/
directory stylesheets/
create config.rb
create sass/screen.scss
create sass/print.scss
create sass/ie.scss

conﬁg.rb

# Compass configurations
sass_dir = "sass"
css_dir = "stylesheets"
output_style = :compressed

# or :nested :expanded :compact

conﬁg.rb

# Get the directory that this
# configuration file exists in
dir = File.dirname(__FILE__)

# Load the sencha-touch framework
# automatically.
load File.join(dir, '..', 'themes')

# Compass configurations
sass_path = dir
css_path = File.join(dir, "..", "css")
environment = :production
output_style = :compressed

sencha-touch.scss
@import 'sencha-touch/default/all';

@include sencha-panel;
@include sencha-buttons;
@include sencha-sheet;
@include sencha-picker;
@include sencha-tabs;
@include sencha-toolbar;
@include sencha-toolbar-forms;
@include sencha-carousel;
@include sencha-indexbar;
@include sencha-list;
@include sencha-list-paging;
@include sencha-list-pullrefresh;
@include sencha-layout;
@include sencha-form;
@include sencha-msgbox;
@include sencha-loading-spinner;


@import 'widgets';

@import 'widgets/toolbar';
...
@mixin sencha-toolbar {
.x-toolbar {
overflow: hidden;
position: relative;
...

@include sencha-toolbar;
...

sencha-touch.scss
$include-default-icons: false;


...

sencha-touch.scss

$include-default-icons: false;


@include pictos-iconmask('action');

...

apple.scss
$base-color: #7c92ae;
$base-gradient: 'glossy';

$list-active-gradient: 'bevel';
$list-header-bg-color: transparentize(
saturate($base-color, 10%), .25
);
$list-header-gradient: 'matte';

$tabs-dark: #111;


...

_variables.scss
$include-html-style: true; $base-color: #354F6E;

$include-default-icons: true; $base-gradient: 'matte';

$include-form-sliders: true; $alert-color: red;

$include-floating-panels: true; $confirm-color: #92cf00;

$include-default-uis: true; $page-bg-color: #eee;

$include-highlights: true; $global-row-height: 2.6em;

$include-border-radius: true; $active-color: darken(
saturate($base-color, 55%),
$basic-slider: false; 10%);

http://dev.sencha.com/deploy/touch/docs/theme/

$> compass watch .

>>> Change detected to:
seattlebars.scss
overwrite ./seattlebars.css

>>> Compass is watching for
changes. Press Ctrl-C to Stop.

@mixin color-by-background(
$bg-color, $contrast: 100%
) {
@if (lightness($bg-color) > 50) {
color: darken($bg-color, $contrast)
} @else {
color: lighten($bg-color, $contrast)
}
}

https://github.com/
senchalearn/
seattlebars

ext-all.scss

@import 'compass';
@import 'ext4/default/all';

_all.scss
@import 'functions';
@import 'variables';
@import 'mixins';

@import 'core';

@import 'layout/layout';

@import 'util/tool';
@import 'util/messagebox';
@import 'util/splitter';
@import 'util/resizable';
@import 'util/dragdrop';
@import 'util/scroller';
@import 'util/focus';
...

variables/_core.scss
...

$color: #000;
$font-family:
tahoma,arial,verdana,sans-serif;

$font-size : 12px !default;

$base-gradient: 'matte';
$base-color : #C0D4ED;
$neutral-color: #eeeeee;

...

test.scss

$base-color: #FF8000;

$panel-header-font-size: 15px;

@import 'compass';
@import 'ext4/default/all';

Slicer

$> sencha slice theme
-d .
-c resources/css/test.css
-o ./test-images

Add these to your theme’s images directory

var chart = Ext.create(
'Ext.chart.Chart', {
theme: 'Blue',
...
}
);

// Base, Green, Sky, Red,
// Purple, Blue, Yellow...
// or {}

CSS3
Sass & Compass
Sencha Touch
Ext JS 4

Theming and Sass

More Related Content

What's hot

Viewers also liked

Similar to Theming and Sass

More from James Pearce

Recently uploaded

Theming and Sass