Slide 1
Slide 1 text
MagentoWA meetup - 26 August
Erfan Imani - @erfanimani
Modern tools for
Magento development
Part 2
Slide 2
Slide 2 text
Sass
● CSS pre-processor
● Compiles to CSS
“Sass is an extension of CSS3 which adds nested
rules, variables, mixins, selector inheritance, and
more. Sass generates well formatted CSS and
makes your stylesheets easier to organize and
maintain.” - compass-style.org
Slide 3
Slide 3 text
Two syntaxes
● Sass (.sass)
● Sassy Css (.scss)
Slide 4
Slide 4 text
VS
http://thesassway.com/editorial/sass-vs-scss-which-
syntax-is-better
.wrapper {
margin-left: auto;
margin-right: auto;
max-width: $site-width;
}
.wrapper
margin-left: auto
margin-right: auto
max-width: $site-width
Slide 5
Slide 5 text
Usage
sass styles.scss > styles.css
Slide 6
Slide 6 text
Usage
sass styles.scss > styles.css --watch
Slide 7
Slide 7 text
Compass
● Framework for Sass
● Allows you to manage settings for a
project (config.rb)
● Library of handy mixins
Slide 8
Slide 8 text
Config.rb
● Cache busting
● Control CSS output style
● Paths and URL’s
● Include functionality from Ruby Gems
Slide 9
Slide 9 text
Usage
compass compile project/
Slide 10
Slide 10 text
Usage
compass watch project/
Slide 11
Slide 11 text
Bundler
● Dependency manager for Ruby Gems
Slide 12
Slide 12 text
Bundler
● Dependency manager for Ruby Gems
○ Gemfile
○ Gemfile.lock
○ .bundle/config
Slide 13
Slide 13 text
Bundler
● Dependency manager for Ruby Gems
○ Gemfile
○ Gemfile.lock
○ .bundle/config
■ bundle install --path vendor
Slide 14
Slide 14 text
Integration with Magento
● config.rb goes somewhere in theme’s
skin folder
○ skin/frontend/rwd/default/. . .
● You tell config.rb where to put
generated CSS
Slide 15
Slide 15 text
Folder structure
- skin/frontend/{package}/default/
- img/
- js/
- scss/
- _catalog.scss
- _grid.scss
- styles.scss
- css/
- styles.css
- config.rb
Slide 16
Slide 16 text
What if you need “homepage.css” ?
- skin/frontend/{package}/default/
- scss/
- _catalog.scss
- _grid.scss
- homepage.scss
- styles.scss
- css/
- homepage.css
- styles.css
- config.rb
Slide 17
Slide 17 text
We can do better
● Why?
○ Importing partials - which produce output -
might cause certain CSS rules to be included
twice on the page
○ This can become difficult to scale for large
projects
■ The more pages, the longer compilation
time
■ Difficult to manage partials
Slide 18
Slide 18 text
Multiple themes
● Overwrite templates
● Overwrite any asset in skin folder
Slide 19
Slide 19 text
Multiple themes
● Overwrite templates
● Overwrite any asset in skin folder
Using themes keeps the default theme
relevant and clean in terms of CSS/JS
and template files
Slide 20
Slide 20 text
Compass and multiple themes
● We want to have access to our main
theme’s Sass so we can use its
variables and mixins
Slide 21
Slide 21 text
Compass and multiple themes
● We want to have access to our main
theme’s Sass so we can use its
variables and mixins
● add_import_path
○ add_import_path "../default/scss"
Slide 22
Slide 22 text
No content
Slide 23
Slide 23 text
- default/
- img/
- scss/
- components/
- styles.scss
- landingpage/
- scss/
- _landingpage.scss
- styles.scss
Slide 24
Slide 24 text
- default/
- img/
- scss/
- components/
- styles.scss
- landingpage/
- scss/
- _landingpage.scss
- styles.scss
@include “styles”;
@include “landingpage”;
Slide 25
Slide 25 text
- default/
- img/
- scss/
- components/
- styles.scss
- landingpage/
- scss/
- _landingpage.scss
- styles.scss
@include “styles”;
@include “landingpage”;
@import loop!
Slide 26
Slide 26 text
- default/
- img/
- scss/
- components/
- _styles.default.scss
- styles.scss - @include “styles.default”;
- landingpage/
- scss/
- _landingpage.scss
- styles.scss
@include “styles.default”;
@include “landingpage”;
Slide 27
Slide 27 text
Thanks!