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

Recommended

Recommended

More Related Content

What's hot

What's hot (18)

Viewers also liked

Viewers also liked (14)

Similar to Theming and Sass

Similar to Theming and Sass (20)

More from James Pearce

More from James Pearce (20)

Recently uploaded

Recently uploaded (20)

Theming and Sass