Save time by using SASS/SCSS
Upcoming SlideShare
Loading in...5
×
 

Save time by using SASS/SCSS

on

  • 3,530 views

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.

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.

Statistics

Views

Total Views
3,530
Views on SlideShare
3,140
Embed Views
390

Actions

Likes
5
Downloads
42
Comments
0

5 Embeds 390

http://www.networkteam.com 332
http://lanyrd.com 39
http://relaunch.networkteam.com 15
http://a0.twimg.com 3
http://translate.googleusercontent.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Save time by using SASS/SCSS Save time by using SASS/SCSS Presentation Transcript

    • Save time by using SASS Structured CSS with SASS and sassify
    • Berit Jensen■ Frontend Developer, Certified TYPO3 Integrator at networkteam GmbH■ TYPO3Phoenix Core Team Member■ TYPO3Marketing Team Member
    • CSS - The bad parts
    • Mixed up formatting
    • Duplication
    • Mixed up colors and dimensions
    • Long selectors
    • Imports are slow!
    • SASS SCSS
    • CompilerSCSS SCSS CSSSCSS will be compiled to CSS
    • CSS SCSSYou can simply copy existing CSS
    • CSS Enhancements
    • #header { #header { ... ...} ul.menu {#header ul.menu li a { ... ... li {} ...#header ul.menu li { a{ ... refactor ...} }li a { } ... li a {} ...#header ul.menu { } ...} CSS SCSS Nesting
    • #header ul.menu li a { #header { color: #000; ul.menu {} li {#header ul.menu li a:hover { a{ color: #ccc; color: #000;} &:hover { color: #ccc; refactor } } } CSS SCSS Selector references
    • $grey: #c7c7c7; $border-size: solid 1px; $border: $border-size $grey;#menu { #menu { ... ... border-left: solid 1px #c7c7c7; border-left: $border; border-top: solid 1px #c7c7c7; border-top: $border; border-right: solid 1px #c7c7c7; border-right: $border;} refactor }#rootline { #rootline { ... ... background-color: #c7c7c7; background-color: $grey;} }#content { #content { ... ... border-left: solid 1px #c7c7c7; border-left: $border; border-top: solid 1px #c7c7c7; border-top: $border; border-right: solid 1px #c7c7c7; border-right: $border;} CSS } SCSS Variables
    • $total-width: 600px; $sidebar-width: 100px; $spacing: 20px;#content { #content { width: 500px; width: $total-width - $sidebar-width; padding: 40px; padding: $spacing * 2;} }#sidebar { refactor #sidebar { width: 100px; width: $sidebar-width; margin-left: 20px; margin-left: $spacing;} } CSS SCSS Calculations
    • $color: #777777; #content { compile background-color: #444444; }#content { background-color: darken($color, 20%); h2 {} color: #f6f6f6; }h2 { color: lighten($color, 50%);} SCSS Functions (predefined)
    • Functions http://sass-lang.com/docs/yardoc/Sass/Script/Functions.htmladjust_hue(color, degrees) alpha(color) percentage(value)complement(color) blue(color) unit(number)darken(color, amount) green(color) unitless(number)desaturate(color, amount) hue(color)grayscale(color) red(color) quote(str)lighten(color, amount) opacity(color) unquote(str)mix(color1, color2, weight) lightness(color)opacify(color, amount) saturation(color)saturate(color, amount)transparentize(color, amount) abs(value) ceil(value)hsl(hue, saturation, lightness) floor(value)hsla(hue, saturation, lightness, round(value)alpha)rgb(red, green, blue) comparable(number1, number2)rgba(red, green, blue, alpha) type_of(obj)rgba(color, alpha)
    • @mixin rounded-border { .rounded-box { border-radius: 4px; border-radius: 4px; -moz-border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; -webkit-border-radius: 4px;} width: 250px; }.rounded-box { #navigation ul li { @include rounded-border; border-radius: 4px; width: 250px; -moz-border-radius: 4px; compile} -webkit-border-radius: 4px; }#navigation { ul { li { @include rounded-border; } }} SCSS CSS Mixins
    • @mixin rounded-border($radius) { .rounded-box { border-radius: $radius; border-radius: 4px; -moz-border-radius: $radius; -moz-border-radius: 4px; -webkit-border-radius: $radius; -webkit-border-radius: 4px;} width: 250px; }.rounded-box { #navigation ul li { @include rounded-border(4px); border-radius: 2px; width: 250px; -moz-border-radius: 2px; compile} -webkit-border-radius: 2px; }#navigation { ul { li { @include rounded-border(2px); } }} SCSS CSS Mixins with arguments
    • $color = #cc7700; #inhalt { compile background-color: #663c00; }@import "a.scss";@import "b.scss"; h2 { SCSS color: #cc7700; } #inhalt { background-color: darken($color, 20%); } a.scss h2 { color: $color; } b.scss CSS Real Imports
    • $type: business; p{p{ compile color: green; } @if $type == ocean { color: blue; } @else if $type == matador { color: red; } @else if $type == business { color: green; } @else { color: black; }} SCSS CSS Control structures / if
    • @for $i from 1 through 3 { h1 { h#{$i} { compile font-size: 0.8em; } font-size: 1em - (0.2 * $i); } h2 {} font-size: 0.6em; } h3 { font-size: 0.4em; } SCSS CSS Control structures / for
    • /* /* * Multiline CSS Comment compile * Multiline CSS Comment */ */body { color: black; } body { color: black; }// One-line, internal commenta { color: green } a{ color: green; } SCSS CSS Comments
    • Installation & Usage
    • 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)
    • sass --watch imports.scssWatch your changes
    • Debugging
    • sass -g imports.scss > imports.css FireSass Firebug Extension
    • SASS Frameworkhttp://compass-style.org
    • sassify TYPO3 Extension based on PHamlPhttp://typo3.org/documentation/document-library/extension-manuals/sassify/1.0.1/view
    • Reality Check
    • Thank You!
    • Questions?