save time by using sass/scss
DESCRIPTION
This presentation is targeted to everyone interested in an easier way of creating and updating CSS for your websites. It shows the great benefits of using SASS/SCSS for design implementation. With the usage of SASS you gain the possibility to write CSS while using variables, nesting of styles and other flexible techniques like the powerful mixins, selector inheritance, basic operations (e.g. numbers, colors) or interpolation. The written code will be compiled into standard CSS and for meeting the different needs the output format can be configured e.g. compressed which will create a minified CSS file. For using SASS in your TYPO3 project right now the extension sassify is ready for editing and compiling SASS directly inside your TYPO3 installation.TRANSCRIPT
![Page 1: Save time by using SASS/SCSS](https://reader034.vdocuments.site/reader034/viewer/2022042714/54c79f1b4a7959f6318b45ac/html5/thumbnails/1.jpg)
Structured CSS with SASS and sassify
Save time by using SASS
![Page 2: Save time by using SASS/SCSS](https://reader034.vdocuments.site/reader034/viewer/2022042714/54c79f1b4a7959f6318b45ac/html5/thumbnails/2.jpg)
■ Frontend Developer, Certified TYPO3 Integrator at networkteam GmbH
■ TYPO3 Phoenix Core Team Member
■ TYPO3 Marketing Team Member
Berit Jensen
![Page 3: Save time by using SASS/SCSS](https://reader034.vdocuments.site/reader034/viewer/2022042714/54c79f1b4a7959f6318b45ac/html5/thumbnails/3.jpg)
CSS - The bad parts
![Page 4: Save time by using SASS/SCSS](https://reader034.vdocuments.site/reader034/viewer/2022042714/54c79f1b4a7959f6318b45ac/html5/thumbnails/4.jpg)
Mixed up formatting
![Page 5: Save time by using SASS/SCSS](https://reader034.vdocuments.site/reader034/viewer/2022042714/54c79f1b4a7959f6318b45ac/html5/thumbnails/5.jpg)
Duplication
![Page 6: Save time by using SASS/SCSS](https://reader034.vdocuments.site/reader034/viewer/2022042714/54c79f1b4a7959f6318b45ac/html5/thumbnails/6.jpg)
Mixed up colors and dimensions
![Page 7: Save time by using SASS/SCSS](https://reader034.vdocuments.site/reader034/viewer/2022042714/54c79f1b4a7959f6318b45ac/html5/thumbnails/7.jpg)
Long selectors
![Page 8: Save time by using SASS/SCSS](https://reader034.vdocuments.site/reader034/viewer/2022042714/54c79f1b4a7959f6318b45ac/html5/thumbnails/8.jpg)
Imports are slow!
![Page 9: Save time by using SASS/SCSS](https://reader034.vdocuments.site/reader034/viewer/2022042714/54c79f1b4a7959f6318b45ac/html5/thumbnails/9.jpg)
SASSSCSS
![Page 10: Save time by using SASS/SCSS](https://reader034.vdocuments.site/reader034/viewer/2022042714/54c79f1b4a7959f6318b45ac/html5/thumbnails/10.jpg)
CSS
SCSS will be compiled to CSS
SCSS
SCSS
Compiler
![Page 11: Save time by using SASS/SCSS](https://reader034.vdocuments.site/reader034/viewer/2022042714/54c79f1b4a7959f6318b45ac/html5/thumbnails/11.jpg)
You can simply copy existing CSS
CSS SCSS
![Page 12: Save time by using SASS/SCSS](https://reader034.vdocuments.site/reader034/viewer/2022042714/54c79f1b4a7959f6318b45ac/html5/thumbnails/12.jpg)
CSS Enhancements
![Page 13: Save time by using SASS/SCSS](https://reader034.vdocuments.site/reader034/viewer/2022042714/54c79f1b4a7959f6318b45ac/html5/thumbnails/13.jpg)
CSS
#header { ...}#header ul.menu li a { ...}#header ul.menu li { ...}li a { ...}#header ul.menu { ...}
Nesting
SCSS
#header { ... ul.menu { ... li { ... a { ... }}li a { ...}
refactor
![Page 14: Save time by using SASS/SCSS](https://reader034.vdocuments.site/reader034/viewer/2022042714/54c79f1b4a7959f6318b45ac/html5/thumbnails/14.jpg)
CSS
#header ul.menu li a { color: #000;}#header ul.menu li a:hover { color: #ccc;}
Selector references
SCSS
#header { ul.menu { li { a { color: #000; &:hover { color: #ccc; } }}
refactor
![Page 15: Save time by using SASS/SCSS](https://reader034.vdocuments.site/reader034/viewer/2022042714/54c79f1b4a7959f6318b45ac/html5/thumbnails/15.jpg)
CSS
#menu { ... border-left: solid 1px #c7c7c7; border-top: solid 1px #c7c7c7; border-right: solid 1px #c7c7c7;}#rootline { ... background-color: #c7c7c7;}#content { ... border-left: solid 1px #c7c7c7; border-top: solid 1px #c7c7c7; border-right: solid 1px #c7c7c7;}
VariablesSCSS
$grey: #c7c7c7;$border-size: solid 1px;$border: $border-size $grey;#menu { ... border-left: $border; border-top: $border; border-right: $border;}#rootline { ... background-color: $grey;}#content { ... border-left: $border; border-top: $border; border-right: $border;}
refactor
![Page 16: Save time by using SASS/SCSS](https://reader034.vdocuments.site/reader034/viewer/2022042714/54c79f1b4a7959f6318b45ac/html5/thumbnails/16.jpg)
CSS
#content { width: 500px; padding: 40px;}#sidebar { width: 100px; margin-left: 20px;}
CalculationsSCSS
$total-width: 600px;$sidebar-width: 100px;$spacing: 20px;
#content { width: $total-width - $sidebar-width; padding: $spacing * 2;}#sidebar { width: $sidebar-width; margin-left: $spacing;}
refactor
![Page 17: Save time by using SASS/SCSS](https://reader034.vdocuments.site/reader034/viewer/2022042714/54c79f1b4a7959f6318b45ac/html5/thumbnails/17.jpg)
Functions (predefined)
SCSS
$color: #777777;
#content { background-color: darken($color, 20%);}h2 { color: lighten($color, 50%);}
#content { background-color: #444444; }
h2 { color: #f6f6f6; }
compile
![Page 18: Save time by using SASS/SCSS](https://reader034.vdocuments.site/reader034/viewer/2022042714/54c79f1b4a7959f6318b45ac/html5/thumbnails/18.jpg)
Functionshttp://sass-lang.com/docs/yardoc/Sass/Script/Functions.html
adjust_hue(color, degrees)complement(color)darken(color, amount)desaturate(color, amount)grayscale(color)lighten(color, amount)mix(color1, color2, weight)opacify(color, amount)saturate(color, amount)transparentize(color, amount)
hsl(hue, saturation, lightness)hsla(hue, saturation, lightness, alpha)rgb(red, green, blue)rgba(red, green, blue, alpha)rgba(color, alpha)
alpha(color)blue(color)green(color)hue(color)red(color)opacity(color)lightness(color)saturation(color)
abs(value)ceil(value)floor(value)round(value)
comparable(number1, number2)type_of(obj)
percentage(value)unit(number)unitless(number)
quote(str)unquote(str)
![Page 19: Save time by using SASS/SCSS](https://reader034.vdocuments.site/reader034/viewer/2022042714/54c79f1b4a7959f6318b45ac/html5/thumbnails/19.jpg)
MixinsSCSS
@mixin rounded-border { border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px;}.rounded-box {
@include rounded-border;width: 250px;
}#navigation {
ul {li {
@include rounded-border;}
}}
.rounded-box { border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; width: 250px; }#navigation ul li { border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; }
CSS
compile
![Page 20: Save time by using SASS/SCSS](https://reader034.vdocuments.site/reader034/viewer/2022042714/54c79f1b4a7959f6318b45ac/html5/thumbnails/20.jpg)
Mixins with argumentsSCSS
@mixin rounded-border($radius) { border-radius: $radius; -moz-border-radius: $radius; -webkit-border-radius: $radius;}.rounded-box {
@include rounded-border(4px);width: 250px;
}#navigation {
ul {li {
@include rounded-border(2px);}
}}
.rounded-box { border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; width: 250px; }#navigation ul li { border-radius: 2px; -moz-border-radius: 2px; -webkit-border-radius: 2px; }
CSS
compile
![Page 21: Save time by using SASS/SCSS](https://reader034.vdocuments.site/reader034/viewer/2022042714/54c79f1b4a7959f6318b45ac/html5/thumbnails/21.jpg)
Real Imports
SCSS
$color = #cc7700;
@import "a.scss";@import "b.scss";
#inhalt { background-color: #663c00; }
h2 { color: #cc7700; }
CSS
compile
a.scss
#inhalt { background-color: darken($color, 20%);}
b.scss
h2 { color: $color;}
![Page 22: Save time by using SASS/SCSS](https://reader034.vdocuments.site/reader034/viewer/2022042714/54c79f1b4a7959f6318b45ac/html5/thumbnails/22.jpg)
Control structures / if
SCSS
$type: business;p { @if $type == ocean { color: blue; } @else if $type == matador { color: red; } @else if $type == business { color: green; } @else { color: black; }}
p { color: green; }
CSS
compile
![Page 23: Save time by using SASS/SCSS](https://reader034.vdocuments.site/reader034/viewer/2022042714/54c79f1b4a7959f6318b45ac/html5/thumbnails/23.jpg)
Control structures / for
SCSS
@for $i from 1 through 3 { h#{$i} { font-size: 1em - (0.2 * $i); }}
h1 { font-size: 0.8em; }
h2 { font-size: 0.6em; }
h3 { font-size: 0.4em; }
CSS
compile
![Page 24: Save time by using SASS/SCSS](https://reader034.vdocuments.site/reader034/viewer/2022042714/54c79f1b4a7959f6318b45ac/html5/thumbnails/24.jpg)
Comments
SCSS
/* * Multiline CSS Comment */body { color: black; }
// One-line, internal commenta { color: green }
/* * Multiline CSS Comment */body { color: black; }
a { color: green; }
CSS
compile
![Page 25: Save time by using SASS/SCSS](https://reader034.vdocuments.site/reader034/viewer/2022042714/54c79f1b4a7959f6318b45ac/html5/thumbnails/25.jpg)
Installation & Usage
![Page 26: Save time by using SASS/SCSS](https://reader034.vdocuments.site/reader034/viewer/2022042714/54c79f1b4a7959f6318b45ac/html5/thumbnails/26.jpg)
Installation
■ RubyInstaller (http://www.ruby-lang.org/de/downloads/)
■ Install the SASS Gem:sudo gem install sass --pre
■ or the PHP version PHamlP(http://code.google.com/p/phamlp)
![Page 27: Save time by using SASS/SCSS](https://reader034.vdocuments.site/reader034/viewer/2022042714/54c79f1b4a7959f6318b45ac/html5/thumbnails/27.jpg)
Watch your changes
sass --watch imports.scss
![Page 28: Save time by using SASS/SCSS](https://reader034.vdocuments.site/reader034/viewer/2022042714/54c79f1b4a7959f6318b45ac/html5/thumbnails/28.jpg)
Debugging
![Page 29: Save time by using SASS/SCSS](https://reader034.vdocuments.site/reader034/viewer/2022042714/54c79f1b4a7959f6318b45ac/html5/thumbnails/29.jpg)
FireSassFirebug Extension
sass -g imports.scss > imports.css
![Page 31: Save time by using SASS/SCSS](https://reader034.vdocuments.site/reader034/viewer/2022042714/54c79f1b4a7959f6318b45ac/html5/thumbnails/31.jpg)
sassifyTYPO3 Extension based on PHamlP
http://typo3.org/documentation/document-library/extension-manuals/sassify/1.0.1/view
![Page 32: Save time by using SASS/SCSS](https://reader034.vdocuments.site/reader034/viewer/2022042714/54c79f1b4a7959f6318b45ac/html5/thumbnails/32.jpg)
Reality Check
![Page 33: Save time by using SASS/SCSS](https://reader034.vdocuments.site/reader034/viewer/2022042714/54c79f1b4a7959f6318b45ac/html5/thumbnails/33.jpg)
Thank You!
![Page 34: Save time by using SASS/SCSS](https://reader034.vdocuments.site/reader034/viewer/2022042714/54c79f1b4a7959f6318b45ac/html5/thumbnails/34.jpg)
Questions?