SASS and JADE - SEBIS - Technische Universität München

SASS and JADE
Daniel Schosser, April 7th 2015, Munich
Software Engineering for Business Information Systems (sebis)
Department of Informatics
Technische Universität München, Germany
wwwmatthes.in.tum.de
About Me
Daniel Schosser
B. Sc.
Munich, Germany
4th Master Semester
Focus:
- Project Management
- Software Engineering
- Security / Social Engineering
Personal Projects:
- Web Development > 10 years
- TumStuff
131123 Matthes sebis
© sebis
2
Overview
1.
2.
Introduction to HTML & CSS
SASS (Syntactically Awesome StyleSheets)
 Setup
 Commands
 Syntax
 Competitors
3.
Jade (Node Template Engine)
 Setup
 Commands
 Syntax
 Competitors
4.
5.
Pros & Cons
Exercise
131123 Matthes sebis
© sebis
3
Introduction to
HTML & CSS
131123 Matthes sebis
© sebis
4
HTML & CSS
• Hypertext Markup Language
• Structured digital documents (e.g. Web pages)
• Tag based
• Current version HTML5 (since Oct. 28, 2014)
• Cascading Style Sheets
• Extension for html
• Style for web pages
• Current version CSS3
• since June 1999 (release CSS2)
• Split up in modules (some already level 4)
131123 Matthes sebis
© sebis
5
SASS
Syntactically Awesome StyleSheets
131123 Matthes sebis
© sebis
6
SASS – What is it?
• CSS Preprocessor
• since 2007
• sass-lang.com
• Write Scss/Sass files with extended functionality
• Compile Scss/Sass files to CSS
• Convert CSS to Scss/Sass files
• Old Syntax: Sass
• No braces
• No semi-colons
• Indentation/white-space
• New Syntax: Scss
131123 Matthes sebis
© sebis
7
SASS - Setup
Requirements:
• Ruby / npm
Install
$ gem install sass
$ npm install node-sass
131123 Matthes sebis
© sebis
8
SASS - Commands
Compile File/Folder
$ sass input.scss:output.css
$ sass <inputDir>:<outputDir>
Watch File/Folder
–w
–-watch
input.scss
<dir>
Output Folder
$ sass input.scss /public/css/input.css
131123 Matthes sebis
© sebis
9
SASS - Commands
Convert CSS/Sass/Scss
$ sass-convert –F {type} –T {type} inputFile outputFile
–F
–T
131123 Matthes sebis
can be css, scss or sass
can be scss or sass
© sebis
10
SASS - Commands
Style File/Folder
$ sass input.scss:output.css
$ sass <inputDir>:<outputDir>
-t {type}
--style {type}
Styles:
• nested
• expanded
• compact
• compressed
131123 Matthes sebis
© sebis
11
SASS - Styles
Nested (Default)
Expanded
#main {
color: #fff;
background-color: #000; }
#main p {
width: 10em; }
.huge {
font-size: 10em;
font-weight: bold;
text-decoration: underline; }
#main {
color: #fff;
background-color: #000;
}
#main p {
width: 10em;
}
.huge {
font-size: 10em;
font-weight: bold;
text-decoration: underline;
}
Compact
Compressed
#main { color: #fff; background-color: #000;
}
#main p { width: 10em; }
.huge { font-size: 10em; font-weight: bold;
text-decoration: underline; }
#main{color:#fff;background-color:#000}#main
p{width:10em}.huge{font-size:10em;fontweight:bold;text-decoration:underline}
131123 Matthes sebis
© sebis
12
SASS – Features
•
•
•
•
•
•
Variables
Nested
Mixins
Arguments
Inheritance
Calculations
• Tons of other functions to modify/read colors, lists, strings, …
http://sass-lang.com/documentation/Sass/Script/Functions.html
131123 Matthes sebis
© sebis
13
SASS – Features (Variables)
SCSS
CSS
$brandTextColorPrimary: #3A293D;
$brandTextColorSecondary: lightblue;
$textColor: #141414;
.brandName {
color: #3A293D;
}
.brandName {
color: $brandTextColorPrimary;
}
body {
font-size: 12px;
font-family: "Helvetica Neue", Helvetica,
Arial, sans-serif;
color: #141414;
}
body {
font-size: 12px;
font-family: "Helvetica Neue", Helvetica,
Arial, sans-serif;
color: $textColor;
}
131123 Matthes sebis
© sebis
14
SASS – Features (Nested)
SCSS
CSS
table {
font-family: "Helvetica Neue", Helvetica,
Arial, sans-serif;
color: #141414;
tr {
font-style: italic;
th {
font-size: 14px;
font-weight: bold;
color: darkslateblue;
}
td {
font-size: 12px;
}
}
}
table {
font-family: "Helvetica Neue", Helvetica,
Arial, sans-serif;
color: #141414;
}
table tr {
font-style: italic;
}
table tr th {
font-size: 14px;
font-weight: bold;
color: darkslateblue;
}
table tr td {
font-size: 12px;
}
131123 Matthes sebis
© sebis
15
SASS – Features (Mixins)
SCSS
CSS
@mixin transition($args) {
-webkit-transition: $args;
-moz-transition: $args;
-ms-transition: $args;
-o-transition: $args;
transition: $args;
}
a {
color: gray;
-webkit-transition: color 0.3s ease;
-moz-transition: color 0.3s ease;
-ms-transition: color 0.3s ease;
-o-transition: color 0.3s ease;
transition: color 0.3s ease;
}
a:hover {
color: black;
}
a {
color: gray;
@include transition(color .3s ease);
&:hover {
color: black;
}
}
131123 Matthes sebis
© sebis
16
SASS – Features (Arguments)
SCSS
CSS
@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-ms-border-radius: $radius;
border-radius: $radius;
}
body p.small {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
border-radius: 5px;
}
body p.small {
@include border-radius(5px);
}
body p.big {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
border-radius: 10px;
}
body p.big {
@include border-radius(10px);
}
131123 Matthes sebis
© sebis
17
SASS – Features (Inheritance)
SCSS
CSS
.notification {
width: 100%;
border: 1px solid #ccc;
padding: 10px;
color: #141414;
}
.notification, .success, .error {
width: 100%;
border: 1px solid #ccc;
padding: 10px;
color: #141414;
}
.success {
@extend .notification;
border-color: darkgreen;
}
.success {
border-color: darkgreen;
}
.error {
@extend .notification;
border-color: darkred;
}
131123 Matthes sebis
.error {
border-color: darkred;
}
© sebis
18
SASS – Features (Import)
SCSS
CSS
// _base.scss
html, body, ul, ol {
margin: 0;
padding: 0;
}
html, body, ul, ol {
margin: 0;
padding: 0;
}
--------------------------------------------
body {
font: 100% Helvetica, sans-serif;
color: #141414;
}
// style.scss
@import 'base';
body {
font: 100% Helvetica, sans-serif;
color: #141414;
}
131123 Matthes sebis
© sebis
19
SASS – Features (Calculations)
SCSS
CSS
body {
width: 100%;
}
body {
width: 100%;
}
.container {
float: left;
width: 600px / 960px * 100%;
}
.container {
float: left;
width: 62.5%;
}
.sidebar {
float: right;
width: 300px / 960px * 100%;
}
.sidebar {
float: right;
width: 31.25%;
}
131123 Matthes sebis
© sebis
20
SASS – Features (Return)
SCSS
CSS
@function calculateRem($size) {
$remSize: $size / 16px;
@return $remSize * 1rem;
}
p {
font-size: 14px;
font-size: 0.875rem;
}
@mixin font-size($size) {
font-size: $size;
font-size: calculateRem($size);
}
p {
@include font-size(14px)
}
131123 Matthes sebis
© sebis
21
SASS – Competitors
• LESS (http://lesscss.org/)
• Inspired by SASS
• Inheriting styles complicated compared to SASS/Stylus
• Variables declaration “@foo”
• Stylus (https://learnboost.github.io/stylus/)
• Gets confusing pretty fast (No semi-colons, colons, braces,
transparent mixins, argument definitions)
• Variables declaration “foo” or “$foo”
131123 Matthes sebis
© sebis
22
Jade
Node Template Engine
131123 Matthes sebis
© sebis
23
Jade - Setup
Requirements:
• Ruby / npm
Install
$ gem install jade
$ npm install jade
131123 Matthes sebis
© sebis
24
Jade - Commands
Compile File/Folder
$ jade input.jade
$ jade {foo,bar}.jade
$ jade <dir>
Watch File/Folder (Does not pickup new files)
–w
input.jade
–-watch <dir>
Output Folder
–o
–-out
131123 Matthes sebis
<dir>
<dir>
© sebis
25
Jade - Styles
Default
Pretty
<!DOCTYPE html><html
lang="en"><head><title></title><script
type="text/javascript">if (foo) {
bar(1 + 5)
}</script></head><body><h1>Jade - node
template engine</h1><div id="container"
class="col"><p>Get on it!</p><p>Jade is a
terse and simple
templating language with a
strong focus on performance
and powerful
features.</p></div></body></html>
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<script type="text/javascript">
if (foo) {
bar(1 + 5)
}
</script>
</head>
<body>
<h1>Jade - node template engine</h1>
<div id="container" class="col">
<p>Get on it!</p>
<p>
Jade is a terse and simple
templating language with a
strong focus on performance
and powerful features.
</p>
</div>
</body>
</html>
131123 Matthes sebis
© sebis
26
Jade – Features
•
•
•
•
•
•
•
Attributes
Buffered Code
Conditionals
Extends/Inheritance
Includes
Iterations
Mixins
131123 Matthes sebis
© sebis
27
Jade – Features (Attributes)
Jade
a(class='button', href='tutorial.com') Example Page
a(class='button', href='javascript:;', onclick='fooBar()') FooBar-Action
Translated
<a href="tutorial.com" class="button">Example Page</a>
<a href="javascript:;" onclick="fooBar()" class="button">FooBar-Action</a>
131123 Matthes sebis
© sebis
28
Jade – Features (Buffered Code)
Jade
p= 'This <code>string</code> is escaped'
p!= 'This code is <strong>not</strong> escaped'
Translated
<p>This <code>string</code> is escaped</p>
<p>This code is <strong>not</strong> escaped</p>
131123 Matthes sebis
© sebis
29
Jade – Features (Conditionals)
Jade
- var authorized = false
#user
if authorized
h2 Description
p.description= 'Welcome back!'
else
h2 Description
p.description= 'Please login!'
Translated
<div id="user">
<h2>Description</h2>
<p class="description">Please login!</p>
</div>
131123 Matthes sebis
© sebis
30
Jade – Features (Extends/Inheritance)
Jade
//- extends.jade
extends ./includes/layout.jade
block title
title Page title
block content
article First entry
p Content of the first entry
|
|
|
|
|
|
|
|
//- layout.jade
doctype html
html
head
block title
title Tutorial page
body
block content
Translated
<!DOCTYPE html>
<html>
<head>
<title>Page title</title>
</head>
<body>
<article>First entry
<p>Content of the first entry</p>
</article>
</body>
</html>
131123 Matthes sebis
© sebis
31
Jade – Features (Includes)
Jade
//- includes.jade
doctype html
html
body
h1 Tutorial Page
p This is the content of the page
include ./includes/footer.jade
|
|
|
|
|
|
|
//- includes/footer.jade
#footer
p Copyright (c)2015
Translated
<!DOCTYPE html>
<html>
<body>
<h1>Tutorial Page</h1>
<p>This is the content of the page</p>
<div id="footer">
<p>Copyright (c)2015</p>
</div>
</body>
</html>
131123 Matthes sebis
© sebis
32
Jade – Features (Iterations I)
Jade
ul
each val, index in ['zero', 'one', 'two']
li= index + ': ' + val
Translated
<ul>
<li>0: zero</li>
<li>1: one</li>
<li>2: two</li>
</ul>
131123 Matthes sebis
© sebis
33
Jade – Features (Iterations II)
Jade
- var n = 0 // unbuffered code starts with ul
while n < 4
li= n++
Translated
<ul>
<li>0</li>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
131123 Matthes sebis
© sebis
34
Jade – Features (Iterations III)
Jade
ul
- for (var x = 0; x < 3; x++)
li item
Translated
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
131123 Matthes sebis
© sebis
35
Jade – Features (Mixins)
Jade
mixin link(href, name)
a(class='button', href=href)= name
mixin list
ul
li.item foo
+link('http://google.com', 'Google')
+list
Translated
<a href="http://google.com" class="button">Google</a>
<ul>
<li class="item">foo</li>
</ul>
131123 Matthes sebis
© sebis
36
Jade – Competitors/Extensions
• Mustache (https://mustache.github.io/)
• Handlebars (http://handlebarsjs.com/)
• HTML code with {{handles}} to fill in content
• Transparency (https://leonidas.github.io/transparency/)
• Maps JSON objects to DOM elements
131123 Matthes sebis
© sebis
37
Pros & Cons
131123 Matthes sebis
© sebis
38
Pros & Cons
• Pros
• Variables
• Save time by reusing code (mixin/block)
• Easier to read (nested/indented tags)
• Cons:
• Initial time investment to learn new syntax
• One more compiling step between code and website
131123 Matthes sebis
© sebis
39
Demo
131123 Matthes sebis
© sebis
40
Thank you! Any Questions?
Daniel Schosser
B.Sc.
Technische Universität München
Department of Informatics
Chair of Software Engineering for
Business Information Systems
Boltzmannstraße 3
85748 Garching bei München
Tel
Fax
+49.89.289.
+49.89.289.17136
[email protected]
wwwmatthes.in.tum.de

Download Report