SlideShare a Scribd company logo
Finding a Better Way to CSS
Navigating Sass with Compass
I’m...
Claudina Sarahe
@itsmisscs
itsmisscs.com
Goals
So besides trying to learn a cool…not sure what to
actually call Compass or Sass…technology? You
have to dive into using the command line...actually
USING these things is great. Getting there sucks.

The install process is a bitch...I know that this
sounds discouraging, but I am here to tell you that
ALL that crap…is worth it. Just be prepared for
some serious learning and a lot of searching.

http://jc-designs.net/blog/2010/10/a-review-of-compass-for-sass/
Sass: Syntactically
Awesome Style Sheets
CSS Extensions or CSS Preprocessors

Adds Dynamic Behavior:
  $Variables
  @Mixins (Arguments)
  Operations
Sass and SCSS
Sass is indent based
 #header
  background: red

SCSS follows CSS structure
 #header {
   background: red;
 }
FRAMEWORK:
An essential supporting structure
A basic structure underlying a system, concept, or text
Up and Running

Compass is ruby gem.

Installs Sass

Use with ANY Drupal theme

There is a Drupal module...
sudo gem update --system
sudo gem install compass
compass version
compass create path/to/project
cd path/to/project
compass watch
File Structure &
config.rb
_partials.scss
Always prefixed with underscore

Not compiled into CSS

Great way to break out files

  _vars.scss

  _mixins.scss

  _drupal.scss

Put in own folder (best/common practice)
@import “_partials”;

                          SCREEN.SCSS


Load partials into files that get compiled to CSS

  Any file that doesn’t start with underscore gets
  compiled

Cascade order preserved
Core Imports
 @import “compass/typography/text/replacement”;

 @import “compass/css”;

 @import “compass/typography/links/link-colors”;

 @import “compass/typography/lists”;

 @import “compass/utilities/sprites”;
Image Logo

                                Social Media Links
Link states
               Button (submit inputs)

Sites colors: Red, Orange, Brown, White
Set up $variables in
_vars.scss
$main: rgb(90,72,42); // main type brown
$white: rgb(255,255,255);
$red: rgb(177, 32, 36); // Header
$dbrown: rgb(62,45,12); // Darker Brown
$green: rgb(113,124,51); // green
$orange: rgb(239,151,33); // orange
$hover: rgb(249,170,26); // Menu state
#header {
   background: $red url('../i/bg-header.png') no-repeat right top;
   height: 129px;
   @include border($white;)
}
#navigation {
   $height: 30px;

    background: $dbrown;
    margin-bottom: 22px;
    height: $height;         SASS SUPPORTS NESTING BLOCKS
    color: $white;
                               REDUCES CODE CLUTTER
    .block {
      @include fl;
    }
}
Mixins => Recipes

Provide chunks of reusable code

Extended with arguments

Compass provides collections of mixins

  @import “compass”;
@INCLUDE BORDER($WHITE);
 @mixin border($color, $all: false, $side: bottom, $width: 1px, $style: solid){
 @if $all {
     border-width: $width;
     border-style: $style;
                                                             ARGUMENTS
     border-color: $color;
  } @else {
     border-#{$side}: $width $style $color;
 }



                             INTERPOLATION SYNTAX
<h1 class="site-name">
  <a href="/" class="active">Social Justice Leadership</a>
</h1>
@import “compass/
Core Imports:

typography/text/
  http://compass-style.org/reference/compass/
  typography/text/replacement/

  Replace text with Images

  Mixin for hiding text (with accessbility)
.site-name {
	 margin: 10px 10px 0 10px;
	 a{
	 	 @include replace-text-with-dimensions("../i/sjl-logo.png");
	 	 display: block;
                            /* line 63, ../sass/screen.scss */
	 }                         .site-name a {
}                             text-indent: -119988px;
                              overflow: hidden;
                              text-align: left;
                              background-image: url('../i/../i/sjl-logo.png?
                             1310669861');
                              background-repeat: no-repeat;
                              background-position: 50% 50%;
                              width: 319px;
                              height: 108px;
                              display: block;


                             .site-name {
                               margin: 10px 10px 0 10px;
                             }
<div id="navigation"><div class="limiter clearfix">
   <div class="region region-nav">
   <div class="block block-system block-menu clearfix" id="block-system-main-menu"
    <div class="block-content clearfix">
       <ul class="menu">
           <li class="first leaf"><a class=”active” href="/jobs-in-social-justice-organizing"
           title="Programs">Programs</a></li>
           <li class="leaf"><a href="/upcoming-events" title="Current, Upcoming and Past Events">Calendar</a></li>
           <li class="leaf"><a href="/resources" title="Resources">Resources</a></li>
           <li class="last leaf"><a href="/media-clips" title="Media">Gallery</a></li>
       </ul>
   </div>
   </div>
@include horizontal-list-item;
 http://compass-style.org/reference/compass/
 typography/lists/horizontal_list/


  @import “compass/typography/
links/link-colors”;
 http://compass-style.org/reference/compass/
 typography/links/link_colors/

 Set the color for link: Normal, Hover, Active Visited,
 Focus
#navigation .menu {
                                                  .menu {
  margin: 0;                                         @include horizontal-list(false);
  padding: 0;                                        a{
  border: 0;
  overflow: hidden;
                                                          @include link-colors($white, $hover);
  *zoom: 1;                                               @include border($white, right);
}                                                         font-weight: bold;
#navigation .menu li {
                                                          text-transform: uppercase;
  list-style-image: none;                                 display: block;
  list-style-type: none;                                  padding: 5px 10px;
  margin-left: 0px;                                       &.active {
  white-space: nowrap;
  display: inline;                                            background: $hover;
  float: left;                                             }
}                                                    }
#navigation .menu a {
  color: white;                /* line 24, ../../../../../../../../../../../../Library/Ruby/Gems/1.8/gems/
  border: 1px solid white;     compass-0.11.3/frameworks/compass/stylesheets/compass/typography/
  font-weight: bold;           links/_link-colors.scss */
  text-transform: uppercase;   #navigation .menu a:hover {
  display: block;                color: #f9aa1a;
  padding: 5px 10px;           }
}
                               #navigation .menu a.active {
                                 background: #f9aa1a;
                               }
Core Imports
@import “compass/css3”;

 http://compass-style.org/reference/compass/css3/

 Cross browser mixins for CSS properties

 Configure which browsers you support

   http://compass-style.org/reference/compass/
   support/
@mixin button($bg, $color: $white, $f-w: normal, $t-trans: uppercase,
$pad: 2px 3px) {
   @include border-radius;
   background: $bg;
   color: $color;                           input[type="submit"] {
   font-weight: $f-w;                         -moz-border-radius: 5px;
   text-transform: $t-trans;                  -webkit-border-radius: 5px;
   padding: $pad;                             -o-border-radius: 5px;
   border: none;                              -ms-border-radius: 5px;
   cursor: pointer;                           -khtml-border-radius: 5px;
}                                             border-radius: 5px;
                                                background: #717c33;
                                                color: white;
                                                font-weight: normal;
  input[type="submit"] {                        text-transform: uppercase;
  	 @include button($green);                    padding: 2px 3px;
  }                                             border: none;
                                                cursor: pointer;
                                            }
.block-search {                    Operations
	   	 @include fl(right);
	   	 @include border($white, left);
	   	 height: $height;                 Equality operations (==, =!)
	   	 input[type="text"] {             Arithmetic on numbers (+, -, *, /, %)
	   	 	 width: 127px;                  Relational operators (<, >, <=, >=)
	   	 	 height: $height - 4px;
	   	 	 margin: 1px;
	   	 }
	   }
<div class="block block-boxes block-boxes-simple clearfix" id="block-boxes-social-media">
 <h2 class="block-title clearfix">Follow</h2>
 <div class="block-content clearfix">
  <div id="boxes-box-social_media" class="boxes-box">
    <div class="boxes-box-content">
     <ul>
       <li class="icon-fb"><a href="" title="SJL on Facebook">Facebook</a></li>
       <li class="icon-twitter"><a href="" title="Follow SJL">Twitter</a></li>
       <li class="icon-rss"><a href="rss.xml" title="Keep up with SJL feed">RSS</a></li>
     </ul>
    </div>
  </div>
 </div>
</div>
@import “compass/
Core Imports:

utilities/sprites”;
  http://compass-style.org/reference/compass/helpers/
  sprites/
/* SPRITES ------------------------------------------------------------*/
@IMPORT "ICON/*.PNG";
@INCLUDE ALL-ICON-SPRITES;
.icon-sprite, .icon-fb, .icon-rss, .icon-twitter {
  background: url('../i/icon-s430e9af5f6.png')
no-repeat;
}
.icon-fb {
  background-position: 0 0;
}
.icon-rss {
  background-position: 0 -19px;
}
.icon-twitter {
  background-position: 0 -38px;
}
http://compass-style.org

http://adamstacoviak.com/posts/referencing-parent-selectors/

https://addons.mozilla.org/en-US/firefox/addon/firesass-for-firebug/

http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html

http://palantetech.com

http://hazanco.com




 Resources & Credits
 Thanks!

More Related Content

What's hot

CSS Quick Reference / Cheat Sheet - Scott DeLoach, ClickStart
CSS Quick Reference / Cheat Sheet - Scott DeLoach, ClickStartCSS Quick Reference / Cheat Sheet - Scott DeLoach, ClickStart
CSS Quick Reference / Cheat Sheet - Scott DeLoach, ClickStart
Scott DeLoach
 
FCIP SASS Talk
FCIP SASS TalkFCIP SASS Talk
FCIP SASS Talk
Chris Schneider
 
Front-End Dev Tools
Front-End Dev ToolsFront-End Dev Tools
Front-End Dev Tools
Netguru
 
Convidar para page !!
Convidar para page !!Convidar para page !!
Convidar para page !!
Jhonny Batista
 
Sending E-mail that reaches the destination using PHP
Sending E-mail that reaches the destination using PHPSending E-mail that reaches the destination using PHP
Sending E-mail that reaches the destination using PHP
Manuel Lemos
 
CSSプリプロセッサの取扱説明書
CSSプリプロセッサの取扱説明書CSSプリプロセッサの取扱説明書
CSSプリプロセッサの取扱説明書
拓樹 谷
 
Theme04
Theme04Theme04
Sass
SassSass
Lca05
Lca05Lca05
Theming Ext JS 4
Theming Ext JS 4Theming Ext JS 4
Theming Ext JS 4
Sencha
 
Ch1(introduction to php)
Ch1(introduction to php)Ch1(introduction to php)
Ch1(introduction to php)
Chhom Karath
 
Links/Деловой и денежный мир
Links/Деловой и денежный мирLinks/Деловой и денежный мир
Links/Деловой и денежный мир
Cavatex
 
Yeni metin belgesi (2)
Yeni metin belgesi (2)Yeni metin belgesi (2)
Yeni metin belgesi (2)
makarnalar
 
前端开发理论热点面对面:从怎么看,到怎么做?
前端开发理论热点面对面:从怎么看,到怎么做?前端开发理论热点面对面:从怎么看,到怎么做?
前端开发理论热点面对面:从怎么看,到怎么做?
Kejun Zhang
 
Doctype html publi
Doctype html publiDoctype html publi
Doctype html publi
Eddy_TKJ
 
Evrone.ru / BEM for RoR
Evrone.ru / BEM for RoREvrone.ru / BEM for RoR
Evrone.ru / BEM for RoR
Dmitry KODer
 
Sassive Aggressive: Using Sass to Make Your Life Easier (Refresh Boston Version)
Sassive Aggressive: Using Sass to Make Your Life Easier (Refresh Boston Version)Sassive Aggressive: Using Sass to Make Your Life Easier (Refresh Boston Version)
Sassive Aggressive: Using Sass to Make Your Life Easier (Refresh Boston Version)
Adam Darowski
 
Theme futura suicida não use como base e nem copie
Theme futura suicida não use como base e nem copieTheme futura suicida não use como base e nem copie
Theme futura suicida não use como base e nem copie
Rafaela Souza
 

What's hot (18)

CSS Quick Reference / Cheat Sheet - Scott DeLoach, ClickStart
CSS Quick Reference / Cheat Sheet - Scott DeLoach, ClickStartCSS Quick Reference / Cheat Sheet - Scott DeLoach, ClickStart
CSS Quick Reference / Cheat Sheet - Scott DeLoach, ClickStart
 
FCIP SASS Talk
FCIP SASS TalkFCIP SASS Talk
FCIP SASS Talk
 
Front-End Dev Tools
Front-End Dev ToolsFront-End Dev Tools
Front-End Dev Tools
 
Convidar para page !!
Convidar para page !!Convidar para page !!
Convidar para page !!
 
Sending E-mail that reaches the destination using PHP
Sending E-mail that reaches the destination using PHPSending E-mail that reaches the destination using PHP
Sending E-mail that reaches the destination using PHP
 
CSSプリプロセッサの取扱説明書
CSSプリプロセッサの取扱説明書CSSプリプロセッサの取扱説明書
CSSプリプロセッサの取扱説明書
 
Theme04
Theme04Theme04
Theme04
 
Sass
SassSass
Sass
 
Lca05
Lca05Lca05
Lca05
 
Theming Ext JS 4
Theming Ext JS 4Theming Ext JS 4
Theming Ext JS 4
 
Ch1(introduction to php)
Ch1(introduction to php)Ch1(introduction to php)
Ch1(introduction to php)
 
Links/Деловой и денежный мир
Links/Деловой и денежный мирLinks/Деловой и денежный мир
Links/Деловой и денежный мир
 
Yeni metin belgesi (2)
Yeni metin belgesi (2)Yeni metin belgesi (2)
Yeni metin belgesi (2)
 
前端开发理论热点面对面:从怎么看,到怎么做?
前端开发理论热点面对面:从怎么看,到怎么做?前端开发理论热点面对面:从怎么看,到怎么做?
前端开发理论热点面对面:从怎么看,到怎么做?
 
Doctype html publi
Doctype html publiDoctype html publi
Doctype html publi
 
Evrone.ru / BEM for RoR
Evrone.ru / BEM for RoREvrone.ru / BEM for RoR
Evrone.ru / BEM for RoR
 
Sassive Aggressive: Using Sass to Make Your Life Easier (Refresh Boston Version)
Sassive Aggressive: Using Sass to Make Your Life Easier (Refresh Boston Version)Sassive Aggressive: Using Sass to Make Your Life Easier (Refresh Boston Version)
Sassive Aggressive: Using Sass to Make Your Life Easier (Refresh Boston Version)
 
Theme futura suicida não use como base e nem copie
Theme futura suicida não use como base e nem copieTheme futura suicida não use como base e nem copie
Theme futura suicida não use como base e nem copie
 

Similar to Finding a Better Way to CSS: Navigating Sass with Compass

Work and play with SASS & Compass
Work and play with SASS & CompassWork and play with SASS & Compass
Work and play with SASS & Compass
Andreas Dantz
 
css-note.pptx
css-note.pptxcss-note.pptx
css-note.pptx
Samay16
 
Preprocessor presentation
Preprocessor presentationPreprocessor presentation
Preprocessor presentation
Mario Noble
 
Sass & Compass (Barcamp Stuttgart 2012)
Sass & Compass (Barcamp Stuttgart 2012)Sass & Compass (Barcamp Stuttgart 2012)
Sass & Compass (Barcamp Stuttgart 2012)
emrox
 
Sass - Making CSS fun again.
Sass - Making CSS fun again.Sass - Making CSS fun again.
Sass - Making CSS fun again.
Gabriel Neutzling
 
Sass Essentials
Sass EssentialsSass Essentials
Sass Essentials
romiguelangel
 
Wrangling the CSS Beast with Sass
Wrangling the CSS Beast  with SassWrangling the CSS Beast  with Sass
Wrangling the CSS Beast with Sass
Rob Friesel
 
Mobile-first OOCSS, Sass & Compass at BBC Responsive News
Mobile-first OOCSS, Sass & Compass at BBC Responsive NewsMobile-first OOCSS, Sass & Compass at BBC Responsive News
Mobile-first OOCSS, Sass & Compass at BBC Responsive News
Kaelig Deloumeau-Prigent
 
CSS Extenders
CSS ExtendersCSS Extenders
CSS Extenders
Idan Gazit
 
Html standards presentation
Html standards presentationHtml standards presentation
Html standards presentation
Tiago Cardoso
 
Doing more with LESS
Doing more with LESSDoing more with LESS
Doing more with LESS
jsmith92
 
LESS is More
LESS is MoreLESS is More
LESS is More
jsmith92
 
Webtech File.docx
Webtech File.docxWebtech File.docx
Webtech File.docx
gambleryeager
 
Finding your way with Sass+Compass
Finding your way with Sass+CompassFinding your way with Sass+Compass
Finding your way with Sass+Compass
drywallbmb
 
LessCSS Presentation @ April 2015 GTALUG Meeting
LessCSS Presentation @ April 2015 GTALUG MeetingLessCSS Presentation @ April 2015 GTALUG Meeting
LessCSS Presentation @ April 2015 GTALUG Meeting
Myles Braithwaite
 
Rapid Prototyping
Rapid PrototypingRapid Prototyping
Rapid Prototyping
Even Wu
 
Software programming tools for creating/managing CSS files
Software programming tools for creating/managing CSS filesSoftware programming tools for creating/managing CSS files
Software programming tools for creating/managing CSS files
Dinu Suman
 
Css(handbook)
Css(handbook)Css(handbook)
Css(handbook)
MD. Anamul Haque
 
Simple Blue Blog Template XML 的副本
Simple Blue Blog Template XML 的副本Simple Blue Blog Template XML 的副本
Simple Blue Blog Template XML 的副本
a5494535
 
A better CSS: Sass and Less - CC FE & UX
A better CSS: Sass and Less - CC FE & UXA better CSS: Sass and Less - CC FE & UX
A better CSS: Sass and Less - CC FE & UX
JWORKS powered by Ordina
 

Similar to Finding a Better Way to CSS: Navigating Sass with Compass (20)

Work and play with SASS & Compass
Work and play with SASS & CompassWork and play with SASS & Compass
Work and play with SASS & Compass
 
css-note.pptx
css-note.pptxcss-note.pptx
css-note.pptx
 
Preprocessor presentation
Preprocessor presentationPreprocessor presentation
Preprocessor presentation
 
Sass & Compass (Barcamp Stuttgart 2012)
Sass & Compass (Barcamp Stuttgart 2012)Sass & Compass (Barcamp Stuttgart 2012)
Sass & Compass (Barcamp Stuttgart 2012)
 
Sass - Making CSS fun again.
Sass - Making CSS fun again.Sass - Making CSS fun again.
Sass - Making CSS fun again.
 
Sass Essentials
Sass EssentialsSass Essentials
Sass Essentials
 
Wrangling the CSS Beast with Sass
Wrangling the CSS Beast  with SassWrangling the CSS Beast  with Sass
Wrangling the CSS Beast with Sass
 
Mobile-first OOCSS, Sass & Compass at BBC Responsive News
Mobile-first OOCSS, Sass & Compass at BBC Responsive NewsMobile-first OOCSS, Sass & Compass at BBC Responsive News
Mobile-first OOCSS, Sass & Compass at BBC Responsive News
 
CSS Extenders
CSS ExtendersCSS Extenders
CSS Extenders
 
Html standards presentation
Html standards presentationHtml standards presentation
Html standards presentation
 
Doing more with LESS
Doing more with LESSDoing more with LESS
Doing more with LESS
 
LESS is More
LESS is MoreLESS is More
LESS is More
 
Webtech File.docx
Webtech File.docxWebtech File.docx
Webtech File.docx
 
Finding your way with Sass+Compass
Finding your way with Sass+CompassFinding your way with Sass+Compass
Finding your way with Sass+Compass
 
LessCSS Presentation @ April 2015 GTALUG Meeting
LessCSS Presentation @ April 2015 GTALUG MeetingLessCSS Presentation @ April 2015 GTALUG Meeting
LessCSS Presentation @ April 2015 GTALUG Meeting
 
Rapid Prototyping
Rapid PrototypingRapid Prototyping
Rapid Prototyping
 
Software programming tools for creating/managing CSS files
Software programming tools for creating/managing CSS filesSoftware programming tools for creating/managing CSS files
Software programming tools for creating/managing CSS files
 
Css(handbook)
Css(handbook)Css(handbook)
Css(handbook)
 
Simple Blue Blog Template XML 的副本
Simple Blue Blog Template XML 的副本Simple Blue Blog Template XML 的副本
Simple Blue Blog Template XML 的副本
 
A better CSS: Sass and Less - CC FE & UX
A better CSS: Sass and Less - CC FE & UXA better CSS: Sass and Less - CC FE & UX
A better CSS: Sass and Less - CC FE & UX
 

Recently uploaded

"NATO Hackathon Winner: AI-Powered Drug Search", Taras Kloba
"NATO Hackathon Winner: AI-Powered Drug Search",  Taras Kloba"NATO Hackathon Winner: AI-Powered Drug Search",  Taras Kloba
"NATO Hackathon Winner: AI-Powered Drug Search", Taras Kloba
Fwdays
 
Biomedical Knowledge Graphs for Data Scientists and Bioinformaticians
Biomedical Knowledge Graphs for Data Scientists and BioinformaticiansBiomedical Knowledge Graphs for Data Scientists and Bioinformaticians
Biomedical Knowledge Graphs for Data Scientists and Bioinformaticians
Neo4j
 
"Scaling RAG Applications to serve millions of users", Kevin Goedecke
"Scaling RAG Applications to serve millions of users",  Kevin Goedecke"Scaling RAG Applications to serve millions of users",  Kevin Goedecke
"Scaling RAG Applications to serve millions of users", Kevin Goedecke
Fwdays
 
Northern Engraving | Nameplate Manufacturing Process - 2024
Northern Engraving | Nameplate Manufacturing Process - 2024Northern Engraving | Nameplate Manufacturing Process - 2024
Northern Engraving | Nameplate Manufacturing Process - 2024
Northern Engraving
 
Y-Combinator seed pitch deck template PP
Y-Combinator seed pitch deck template PPY-Combinator seed pitch deck template PP
Y-Combinator seed pitch deck template PP
c5vrf27qcz
 
GraphRAG for LifeSciences Hands-On with the Clinical Knowledge Graph
GraphRAG for LifeSciences Hands-On with the Clinical Knowledge GraphGraphRAG for LifeSciences Hands-On with the Clinical Knowledge Graph
GraphRAG for LifeSciences Hands-On with the Clinical Knowledge Graph
Neo4j
 
"$10 thousand per minute of downtime: architecture, queues, streaming and fin...
"$10 thousand per minute of downtime: architecture, queues, streaming and fin..."$10 thousand per minute of downtime: architecture, queues, streaming and fin...
"$10 thousand per minute of downtime: architecture, queues, streaming and fin...
Fwdays
 
"What does it really mean for your system to be available, or how to define w...
"What does it really mean for your system to be available, or how to define w..."What does it really mean for your system to be available, or how to define w...
"What does it really mean for your system to be available, or how to define w...
Fwdays
 
[OReilly Superstream] Occupy the Space: A grassroots guide to engineering (an...
[OReilly Superstream] Occupy the Space: A grassroots guide to engineering (an...[OReilly Superstream] Occupy the Space: A grassroots guide to engineering (an...
[OReilly Superstream] Occupy the Space: A grassroots guide to engineering (an...
Jason Yip
 
Essentials of Automations: Exploring Attributes & Automation Parameters
Essentials of Automations: Exploring Attributes & Automation ParametersEssentials of Automations: Exploring Attributes & Automation Parameters
Essentials of Automations: Exploring Attributes & Automation Parameters
Safe Software
 
What is an RPA CoE? Session 1 – CoE Vision
What is an RPA CoE?  Session 1 – CoE VisionWhat is an RPA CoE?  Session 1 – CoE Vision
What is an RPA CoE? Session 1 – CoE Vision
DianaGray10
 
A Deep Dive into ScyllaDB's Architecture
A Deep Dive into ScyllaDB's ArchitectureA Deep Dive into ScyllaDB's Architecture
A Deep Dive into ScyllaDB's Architecture
ScyllaDB
 
Mutation Testing for Task-Oriented Chatbots
Mutation Testing for Task-Oriented ChatbotsMutation Testing for Task-Oriented Chatbots
Mutation Testing for Task-Oriented Chatbots
Pablo Gómez Abajo
 
Northern Engraving | Modern Metal Trim, Nameplates and Appliance Panels
Northern Engraving | Modern Metal Trim, Nameplates and Appliance PanelsNorthern Engraving | Modern Metal Trim, Nameplates and Appliance Panels
Northern Engraving | Modern Metal Trim, Nameplates and Appliance Panels
Northern Engraving
 
Principle of conventional tomography-Bibash Shahi ppt..pptx
Principle of conventional tomography-Bibash Shahi ppt..pptxPrinciple of conventional tomography-Bibash Shahi ppt..pptx
Principle of conventional tomography-Bibash Shahi ppt..pptx
BibashShahi
 
Dandelion Hashtable: beyond billion requests per second on a commodity server
Dandelion Hashtable: beyond billion requests per second on a commodity serverDandelion Hashtable: beyond billion requests per second on a commodity server
Dandelion Hashtable: beyond billion requests per second on a commodity server
Antonios Katsarakis
 
"Frontline Battles with DDoS: Best practices and Lessons Learned", Igor Ivaniuk
"Frontline Battles with DDoS: Best practices and Lessons Learned",  Igor Ivaniuk"Frontline Battles with DDoS: Best practices and Lessons Learned",  Igor Ivaniuk
"Frontline Battles with DDoS: Best practices and Lessons Learned", Igor Ivaniuk
Fwdays
 
GNSS spoofing via SDR (Criptored Talks 2024)
GNSS spoofing via SDR (Criptored Talks 2024)GNSS spoofing via SDR (Criptored Talks 2024)
GNSS spoofing via SDR (Criptored Talks 2024)
Javier Junquera
 
The Microsoft 365 Migration Tutorial For Beginner.pptx
The Microsoft 365 Migration Tutorial For Beginner.pptxThe Microsoft 365 Migration Tutorial For Beginner.pptx
The Microsoft 365 Migration Tutorial For Beginner.pptx
operationspcvita
 
Leveraging the Graph for Clinical Trials and Standards
Leveraging the Graph for Clinical Trials and StandardsLeveraging the Graph for Clinical Trials and Standards
Leveraging the Graph for Clinical Trials and Standards
Neo4j
 

Recently uploaded (20)

"NATO Hackathon Winner: AI-Powered Drug Search", Taras Kloba
"NATO Hackathon Winner: AI-Powered Drug Search",  Taras Kloba"NATO Hackathon Winner: AI-Powered Drug Search",  Taras Kloba
"NATO Hackathon Winner: AI-Powered Drug Search", Taras Kloba
 
Biomedical Knowledge Graphs for Data Scientists and Bioinformaticians
Biomedical Knowledge Graphs for Data Scientists and BioinformaticiansBiomedical Knowledge Graphs for Data Scientists and Bioinformaticians
Biomedical Knowledge Graphs for Data Scientists and Bioinformaticians
 
"Scaling RAG Applications to serve millions of users", Kevin Goedecke
"Scaling RAG Applications to serve millions of users",  Kevin Goedecke"Scaling RAG Applications to serve millions of users",  Kevin Goedecke
"Scaling RAG Applications to serve millions of users", Kevin Goedecke
 
Northern Engraving | Nameplate Manufacturing Process - 2024
Northern Engraving | Nameplate Manufacturing Process - 2024Northern Engraving | Nameplate Manufacturing Process - 2024
Northern Engraving | Nameplate Manufacturing Process - 2024
 
Y-Combinator seed pitch deck template PP
Y-Combinator seed pitch deck template PPY-Combinator seed pitch deck template PP
Y-Combinator seed pitch deck template PP
 
GraphRAG for LifeSciences Hands-On with the Clinical Knowledge Graph
GraphRAG for LifeSciences Hands-On with the Clinical Knowledge GraphGraphRAG for LifeSciences Hands-On with the Clinical Knowledge Graph
GraphRAG for LifeSciences Hands-On with the Clinical Knowledge Graph
 
"$10 thousand per minute of downtime: architecture, queues, streaming and fin...
"$10 thousand per minute of downtime: architecture, queues, streaming and fin..."$10 thousand per minute of downtime: architecture, queues, streaming and fin...
"$10 thousand per minute of downtime: architecture, queues, streaming and fin...
 
"What does it really mean for your system to be available, or how to define w...
"What does it really mean for your system to be available, or how to define w..."What does it really mean for your system to be available, or how to define w...
"What does it really mean for your system to be available, or how to define w...
 
[OReilly Superstream] Occupy the Space: A grassroots guide to engineering (an...
[OReilly Superstream] Occupy the Space: A grassroots guide to engineering (an...[OReilly Superstream] Occupy the Space: A grassroots guide to engineering (an...
[OReilly Superstream] Occupy the Space: A grassroots guide to engineering (an...
 
Essentials of Automations: Exploring Attributes & Automation Parameters
Essentials of Automations: Exploring Attributes & Automation ParametersEssentials of Automations: Exploring Attributes & Automation Parameters
Essentials of Automations: Exploring Attributes & Automation Parameters
 
What is an RPA CoE? Session 1 – CoE Vision
What is an RPA CoE?  Session 1 – CoE VisionWhat is an RPA CoE?  Session 1 – CoE Vision
What is an RPA CoE? Session 1 – CoE Vision
 
A Deep Dive into ScyllaDB's Architecture
A Deep Dive into ScyllaDB's ArchitectureA Deep Dive into ScyllaDB's Architecture
A Deep Dive into ScyllaDB's Architecture
 
Mutation Testing for Task-Oriented Chatbots
Mutation Testing for Task-Oriented ChatbotsMutation Testing for Task-Oriented Chatbots
Mutation Testing for Task-Oriented Chatbots
 
Northern Engraving | Modern Metal Trim, Nameplates and Appliance Panels
Northern Engraving | Modern Metal Trim, Nameplates and Appliance PanelsNorthern Engraving | Modern Metal Trim, Nameplates and Appliance Panels
Northern Engraving | Modern Metal Trim, Nameplates and Appliance Panels
 
Principle of conventional tomography-Bibash Shahi ppt..pptx
Principle of conventional tomography-Bibash Shahi ppt..pptxPrinciple of conventional tomography-Bibash Shahi ppt..pptx
Principle of conventional tomography-Bibash Shahi ppt..pptx
 
Dandelion Hashtable: beyond billion requests per second on a commodity server
Dandelion Hashtable: beyond billion requests per second on a commodity serverDandelion Hashtable: beyond billion requests per second on a commodity server
Dandelion Hashtable: beyond billion requests per second on a commodity server
 
"Frontline Battles with DDoS: Best practices and Lessons Learned", Igor Ivaniuk
"Frontline Battles with DDoS: Best practices and Lessons Learned",  Igor Ivaniuk"Frontline Battles with DDoS: Best practices and Lessons Learned",  Igor Ivaniuk
"Frontline Battles with DDoS: Best practices and Lessons Learned", Igor Ivaniuk
 
GNSS spoofing via SDR (Criptored Talks 2024)
GNSS spoofing via SDR (Criptored Talks 2024)GNSS spoofing via SDR (Criptored Talks 2024)
GNSS spoofing via SDR (Criptored Talks 2024)
 
The Microsoft 365 Migration Tutorial For Beginner.pptx
The Microsoft 365 Migration Tutorial For Beginner.pptxThe Microsoft 365 Migration Tutorial For Beginner.pptx
The Microsoft 365 Migration Tutorial For Beginner.pptx
 
Leveraging the Graph for Clinical Trials and Standards
Leveraging the Graph for Clinical Trials and StandardsLeveraging the Graph for Clinical Trials and Standards
Leveraging the Graph for Clinical Trials and Standards
 

Finding a Better Way to CSS: Navigating Sass with Compass

  • 1. Finding a Better Way to CSS Navigating Sass with Compass
  • 4. So besides trying to learn a cool…not sure what to actually call Compass or Sass…technology? You have to dive into using the command line...actually USING these things is great. Getting there sucks. The install process is a bitch...I know that this sounds discouraging, but I am here to tell you that ALL that crap…is worth it. Just be prepared for some serious learning and a lot of searching. http://jc-designs.net/blog/2010/10/a-review-of-compass-for-sass/
  • 5. Sass: Syntactically Awesome Style Sheets CSS Extensions or CSS Preprocessors Adds Dynamic Behavior: $Variables @Mixins (Arguments) Operations
  • 6. Sass and SCSS Sass is indent based #header background: red SCSS follows CSS structure #header { background: red; }
  • 7. FRAMEWORK: An essential supporting structure A basic structure underlying a system, concept, or text
  • 8. Up and Running Compass is ruby gem. Installs Sass Use with ANY Drupal theme There is a Drupal module...
  • 9. sudo gem update --system sudo gem install compass compass version compass create path/to/project cd path/to/project compass watch
  • 11. _partials.scss Always prefixed with underscore Not compiled into CSS Great way to break out files _vars.scss _mixins.scss _drupal.scss Put in own folder (best/common practice)
  • 12. @import “_partials”; SCREEN.SCSS Load partials into files that get compiled to CSS Any file that doesn’t start with underscore gets compiled Cascade order preserved
  • 13. Core Imports @import “compass/typography/text/replacement”; @import “compass/css”; @import “compass/typography/links/link-colors”; @import “compass/typography/lists”; @import “compass/utilities/sprites”;
  • 14. Image Logo Social Media Links Link states Button (submit inputs) Sites colors: Red, Orange, Brown, White
  • 15. Set up $variables in _vars.scss $main: rgb(90,72,42); // main type brown $white: rgb(255,255,255); $red: rgb(177, 32, 36); // Header $dbrown: rgb(62,45,12); // Darker Brown $green: rgb(113,124,51); // green $orange: rgb(239,151,33); // orange $hover: rgb(249,170,26); // Menu state
  • 16. #header { background: $red url('../i/bg-header.png') no-repeat right top; height: 129px; @include border($white;) } #navigation { $height: 30px; background: $dbrown; margin-bottom: 22px; height: $height; SASS SUPPORTS NESTING BLOCKS color: $white; REDUCES CODE CLUTTER .block { @include fl; } }
  • 17. Mixins => Recipes Provide chunks of reusable code Extended with arguments Compass provides collections of mixins @import “compass”;
  • 18. @INCLUDE BORDER($WHITE); @mixin border($color, $all: false, $side: bottom, $width: 1px, $style: solid){ @if $all { border-width: $width; border-style: $style; ARGUMENTS border-color: $color; } @else { border-#{$side}: $width $style $color; } INTERPOLATION SYNTAX
  • 19. <h1 class="site-name"> <a href="/" class="active">Social Justice Leadership</a> </h1>
  • 20. @import “compass/ Core Imports: typography/text/ http://compass-style.org/reference/compass/ typography/text/replacement/ Replace text with Images Mixin for hiding text (with accessbility)
  • 21. .site-name { margin: 10px 10px 0 10px; a{ @include replace-text-with-dimensions("../i/sjl-logo.png"); display: block; /* line 63, ../sass/screen.scss */ } .site-name a { } text-indent: -119988px; overflow: hidden; text-align: left; background-image: url('../i/../i/sjl-logo.png? 1310669861'); background-repeat: no-repeat; background-position: 50% 50%; width: 319px; height: 108px; display: block; .site-name { margin: 10px 10px 0 10px; }
  • 22. <div id="navigation"><div class="limiter clearfix"> <div class="region region-nav"> <div class="block block-system block-menu clearfix" id="block-system-main-menu" <div class="block-content clearfix"> <ul class="menu"> <li class="first leaf"><a class=”active” href="/jobs-in-social-justice-organizing" title="Programs">Programs</a></li> <li class="leaf"><a href="/upcoming-events" title="Current, Upcoming and Past Events">Calendar</a></li> <li class="leaf"><a href="/resources" title="Resources">Resources</a></li> <li class="last leaf"><a href="/media-clips" title="Media">Gallery</a></li> </ul> </div> </div>
  • 23. @include horizontal-list-item; http://compass-style.org/reference/compass/ typography/lists/horizontal_list/ @import “compass/typography/ links/link-colors”; http://compass-style.org/reference/compass/ typography/links/link_colors/ Set the color for link: Normal, Hover, Active Visited, Focus
  • 24. #navigation .menu { .menu { margin: 0; @include horizontal-list(false); padding: 0; a{ border: 0; overflow: hidden; @include link-colors($white, $hover); *zoom: 1; @include border($white, right); } font-weight: bold; #navigation .menu li { text-transform: uppercase; list-style-image: none; display: block; list-style-type: none; padding: 5px 10px; margin-left: 0px; &.active { white-space: nowrap; display: inline; background: $hover; float: left; } } } #navigation .menu a { color: white; /* line 24, ../../../../../../../../../../../../Library/Ruby/Gems/1.8/gems/ border: 1px solid white; compass-0.11.3/frameworks/compass/stylesheets/compass/typography/ font-weight: bold; links/_link-colors.scss */ text-transform: uppercase; #navigation .menu a:hover { display: block; color: #f9aa1a; padding: 5px 10px; } } #navigation .menu a.active { background: #f9aa1a; }
  • 25.
  • 26. Core Imports @import “compass/css3”; http://compass-style.org/reference/compass/css3/ Cross browser mixins for CSS properties Configure which browsers you support http://compass-style.org/reference/compass/ support/
  • 27. @mixin button($bg, $color: $white, $f-w: normal, $t-trans: uppercase, $pad: 2px 3px) { @include border-radius; background: $bg; color: $color; input[type="submit"] { font-weight: $f-w; -moz-border-radius: 5px; text-transform: $t-trans; -webkit-border-radius: 5px; padding: $pad; -o-border-radius: 5px; border: none; -ms-border-radius: 5px; cursor: pointer; -khtml-border-radius: 5px; } border-radius: 5px; background: #717c33; color: white; font-weight: normal; input[type="submit"] { text-transform: uppercase; @include button($green); padding: 2px 3px; } border: none; cursor: pointer; }
  • 28. .block-search { Operations @include fl(right); @include border($white, left); height: $height; Equality operations (==, =!) input[type="text"] { Arithmetic on numbers (+, -, *, /, %) width: 127px; Relational operators (<, >, <=, >=) height: $height - 4px; margin: 1px; } }
  • 29. <div class="block block-boxes block-boxes-simple clearfix" id="block-boxes-social-media"> <h2 class="block-title clearfix">Follow</h2> <div class="block-content clearfix"> <div id="boxes-box-social_media" class="boxes-box"> <div class="boxes-box-content"> <ul> <li class="icon-fb"><a href="" title="SJL on Facebook">Facebook</a></li> <li class="icon-twitter"><a href="" title="Follow SJL">Twitter</a></li> <li class="icon-rss"><a href="rss.xml" title="Keep up with SJL feed">RSS</a></li> </ul> </div> </div> </div> </div>
  • 30. @import “compass/ Core Imports: utilities/sprites”; http://compass-style.org/reference/compass/helpers/ sprites/
  • 31. /* SPRITES ------------------------------------------------------------*/ @IMPORT "ICON/*.PNG"; @INCLUDE ALL-ICON-SPRITES; .icon-sprite, .icon-fb, .icon-rss, .icon-twitter { background: url('../i/icon-s430e9af5f6.png') no-repeat; } .icon-fb { background-position: 0 0; } .icon-rss { background-position: 0 -19px; } .icon-twitter { background-position: 0 -38px; }

Editor's Notes

  1. Welcome to Finding a Better Way to CSS with Sass and Compass. My name is Claudina Sarahe\n
  2. Last month I gave a talk at D4D about Less (another CSS preprocessor language), Sass and Compass. It was focused on talking about LESS and CSS but at introductory level, code samples were basic\n
  3. My Goal for this session is to dig in a bit more. \n\nThe point where you&amp;#x2019;ve already made the decision, but now you are at crossroads\n\nI&amp;#x2019;ll be covering the topics through examples in the wild. \nCover common mixins or bases. because despite the good documentation \n
  4. Yup and that/this is what this session is here to hopefully help you with. \n\nI came across this quote and found it very fitting for the session. While I don&amp;#x2019;t necessarily think the getting there sucks, I do recognize that there isn&amp;#x2019;t as many best resources or practices as there are for CSS and it can be confusing. \n\nI know this because I&amp;#x2019;ve worked on two SASS projects where it was more combersome than helpful. It clued me into the fact that people say they know, but they don&amp;#x2019;t. I&amp;#x2019;m not claiming to be an expert. I have a big for DRY (Don&amp;#x2019;t Repeat Yourself). \n
  5. Very quickly, Sass and its other common counter part Less are. \n\nAt their core, they extend CSS by adding dynamic behavior. CSS is pretty bloated, flat language. But it is is the language of beauty on the web. \n\nCss extensions make writing CSS fun again. Additionally, it is a very important time for optimized, snappy, effective front-ends, led by the boom in other devices for accessing information (plug the responsive session). With CSS3 and HTML5 gaining rapid rapid adoption, b/c browsers, even our beloved IE, are finally getting w/rapid adoption. there&amp;#x2019;s a lot of really great fun. things that were diffcult, annoying or just impossible are provided natively in CSS3\n
  6. Two syntax&apos;s\n\nSass is the original indent based and SCSS, or just Sassy CSS, is the newer language. It came about primarily because of LESS. \n\nMakes no difference which one you use. In fact it is really easy to convert from one to another et\n\nI&amp;#x2019;ve been writing SCSS and the examples in this slide are from SCSS @TODO regenerate file in SASS (if time). \nRationale: \nI like that it is easy to write standard CSS within the file, especially great if working with teams. \n\nBut i&amp;#x2019;m finding myself leaving off colons and brackets, so I will more than likely be switching to Sass.\n\nMake your decision based on your circumstances - team vs solo \n
  7. I really like the description from Compass&amp;#x2019;s site\n\nCompass is built on Sass and it is the reason I use Sass over Less. \n\nI really like the description from the compass site. in particular #2, #3, #4, #5.\n\nIn short, it satisfys core goal-reusability, community/sharing, structure-much like drupal\n
  8. Yes there is a module but\n
  9. but seriously...I tried the module, I tried the install directions and I was pulling out my hair. And then I remembered that Jacine set it up and I googled Jacine compass and came across the most helpful tweet\n\n\n\n\n
  10. A colleague of mine attended my first session and suggested that the SASS files live outside the Drupal root. I really liked this idea and as best as possible I do try to do this. Commonly, the file lives in your theme. But you can move it anywhere, just have to change the defaults\n\nI like it outside the document root b/c the SASS files are the canonical files; CSS is what the browser sees. I do commit the files.\n\nYou will want to enable relative paths to assets\n
  11. \nPartials are prefixed with underscore\nInvisible files, they are not compiled into final CSS. \n\n\n
  12. @ show example from compass site\n\nthis is how compass works. with compass you pull in imports. you can pull in all the compass utilities but that would make your project very bloated. so the general way to do it only import what you need\n\n\n
  13. These are the imports I find myself commonly using across all projects. I&amp;#x2019;ll talk briefly about them so we can move to the example where applied they start to make more sense. \n\nFirst things first, add these to your screen.scss/sass file\n\nthe second one I am importing just a specific subset of the compass typography helpers. Link colors allows me to set all the colors for a link with one mixin call\n\nNow, i&amp;#x2019;ve got all of these defined at the top of my screen.scss file. Let&amp;#x2019;s dive into an example to see how these get used.\n
  14. This is example of header area. It is from a site that&amp;#x2019;s in progress at Palante Technolgy designed by Hazan and company. Thank them for letting me use it as an example. \n\nCaution: this is removed from the whole. better to look at whole design and then the pieces. ideally, as well, there is a style guide = very helpful!\n
  15. Variables always start with dollar sign\n\nThey are one of the most sought after features missing from CSS. \n\nVariables are available to any document as long as their definition comes first. You can also alter the definition of the variable later. \n\nSass supports hidden comments\n
  16. disclaimer: nothing responsive about these examples :)\n
  17. create your own recipes. you know, always want to have something around just in case\n\nBrings in all of the compass mixins. but! this is not going to be necessary for most projects and compass gives you the ability to chose otherwise\n
  18. Defining a mixin!\n\nmixins are defined with @mixin and then the name of the mixin. when you use a mixin you start with @inlude followed by the name. \n\nmixins can take arguments and the follow in parentheses. arguments are powerful and allow you to pass configuration to the mixin. \n\nyou&amp;#x2019;ll notice that some arguments have default values and some don&amp;#x2019;t. the order is important. you must put all non-value mixins first, that is why color is first because i have specified a default. the rest of the order is up to you\n\nso in my mixin i&amp;#x2019;m also doing simple if else: i noticed that for the most part i just need one property. but sometimes i need more, so i&amp;#x2019;ll use the more verbose notation. \n\nit reads: is all is set to true the use this block of code (everything within the curly), if it is false, then use this code. my default is false. \n\nnow the next thing: $side var. interpolation syntax behaves like a variable but it is used for to add vars to property names\n\nas you know the shorthand CSS notation can exist for top, right, bottom, left. I want this mixin to be reusable and borders may change. notice i set my default to Bottom but in my mixing in the menu I am setting it to right. \n\nargument order matters! the fist var is the one that doesn&amp;#x2019;t have any defined defaults. \n
  19. okay. good basic start. we have header and nav. Let&amp;#x2019;s theme the site name. We remember from our design that we need to swap in a logo.\n\nIn CSS this is done by... \n
  20. Text replace import comes with three mixins: pull up the site: http://compass-style.org/reference/compass/typography/text/replacement/\n\nwe can replace text\nreplace with dimenstions\nor hide\n\n\n
  21. look at that! that&amp;#x2019;s it. That one simple line replaces text with our image. Look at the equivalent CSS\n\nVery helpful to keep debugging lines in CSS. This is set in the config.rb\n\nAlso good to look at generated css. helps teach you want is actually going \nmake fles more manageable. \n\n
  22. okay. looking better. let&amp;#x2019;s move to the menus. to note: i went ahead and added the code for the block in the header because it doesn&amp;#x2019;t involve any fancy Sss\n\n1. Horizontal List of Links\n2. Link States\n
  23. moving to the next two core imports: link colors and lists\n\nlists helpers provides lots of mixins for dealing with lists. We are going to focus on the horizontal list. more complex arguments\n\n\n\n
  24. back to our code. let&amp;#x2019;s see what that looks like in CSS. \n\nmy menu is nested in #navigation\n\nnotice that compass tells us that the code comes from compass mixin and not our file!\n\nthe ampersand is part of Sass and it is a very elegant way to reference the parent selector nested context\n
  25. \n
  26. Another one of my compass favorites is the CSS3 modules. \n\nIf you are writing CSS3 you know it is a big big pain because each browser has its own rendering engine and its own browser support module. \n\nWith Compass you don&amp;#x2019;t have to worry about writing all of those out. In fact, you can configure which browsers to support\n\n
  27. this is what border-radius outputs\n
  28. getting back to the search block. so this time i need a border to the left, as per designs. \n\nAlso, the height is smaller than the containing value. instead of recalculating the height, i can simple just use math operators\nequality operators work on all types, while arithmetic and relational operators are only for numbers\n
  29. Last we get to the share links. \n
  30. CSS Sprites Generated. Another fantastic feature of Compass. No longer having to generate your own sprites. \n\nThere are a lot of defaults and ways to customize sprites. It can seem very overwhelming but on the simple end, enough for most needs on your site. \n
  31. At their most basic: all that is all required to generate sprites automatically from images. \nThere are many defaults to set and you can even override the names manually. But! if you want to keep it simple just note: \n1. Note that the mixin&apos;s name is dependent on the name of the folder in which you&apos;ve placed your icons.\n\n\nEarlier I introduced replace image with dimensions. With sprites, our images are generated and match the class immediately. \n
  32. \n