More Related Content
Similar to Sass and compass workshop (20)
Sass and compass workshop
- 1. SASS & COMPASS WORKSHOP
Feb. 21, 2014 | Ver. 8
Shaho Toofani
Sass and Compass Workshop - ©2014 Shaho Toofani
- 3. Why you should use Sass and Compass
— CSS is crafted to be simple, but scaling simplicity is difficult.
At Scale
Slight variations of colors, fonts, numbers& other properties arise
Stylesheet size may become unmanageable
— With power of Sass (Sass NOT SASS)
Keepyour stylesheet DRY
Revision are waaaay easier (no more find& replace all)
Fancy new CSS3 propertiesbecaome production-ready
Build reusable mixinsandfunctions
Create your own stylesheet framework
Sass and Compass Workshop - ©2014 Shaho Toofani
- 4. Why do we need CSS preprocessors?
CSSis a declarative, not a programminglanguage.
variables — placeholders for something reusable.
functions — manipulate valueswith operations (for example, make this color 20 percent lighter).
it’sfaster towrite — for example nesting
it’smore manageable — for example partials
Sass and Compass Workshop - ©2014 Shaho Toofani
- 5. The DRY principle
— Use variables (only define a value once)
CSS
a {
color: blue;
}
nav{
background-color: blue;
}
— DRY: don’t repeat yourself
SCSS
$brand-color: blue;
a {
color: $brand-color;
}
nav{
background-color: $brand-color;
}
Sass and Compass Workshop - ©2014 Shaho Toofani
- 6. Why you should use Sass and Compass
— Automatic RGBA color values and conversions
CSS
.color-traditional {
color: #11c909;
color: rgba(17, 201, 9, 0.9);
}
SCSS
.color-modern {
color: $green;
color: rgba($green, 0.9);
}
Sass and Compass Workshop - ©2014 Shaho Toofani
- 7. Why you should use Sass and Compass
— Forget about vendor prefixes
CSS
.rounded {
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px;
}
SCSS
.rounded {
@includeborder-radius(4px);
}
Sass and Compass Workshop - ©2014 Shaho Toofani
- 8. Why you should use Sass and Compass
— Nesting rules
CSS
nava {
color: #ff0b13;
}
nava:hover{
color: #11c909;
}
nava:visited {
color: #091fff;
}
SCSS
nav{
a {
color:$red;
&:hover{
color: $green;
}
&:visited {
color: $blue;
}
}
}
Sass and Compass Workshop - ©2014 Shaho Toofani
- 9. Why you should use Sass and Compass
— Media queries the simple way
CSS
@media onlyscreen and(min-width: 280px) and (max-width: 479px){
.h1 {
font-size: 1.1em;
}
}
@media onlyscreen and(min-width: 480px) and (max-width: 599px){
.h1 {
font-size: 0.9em;
}
}
SCSS
h1 {
@includeMQ(XS) {
font-size: 1.1em;
}
@includeMQ(S) {
font-size: 0.9em;
}
}
Sass and Compass Workshop - ©2014 Shaho Toofani
- 11. WHAT IS SASS?
— CSS with superpowers - (it looks like CSS!)
SCSS
$blue: #3bbfce;
$margin: 16px;
.content-navigation {
border-color:$blue;
color: darken($blue, 9%);
}
.border{
padding:$margin/ 2;
margin: $margin / 2;
border-color:$blue;
}
Sass and Compass Workshop - ©2014 Shaho Toofani
- 12. WHAT IS SASS?
— Sass is a CSS preprocessor
A layer between the stylesheets youauthor andthe .css filesyouserve to the browser.
Sassisshort for Syntactically Awesome Stylesheets.
Createdby , Primary developers are and .Hampton Catlin Nathan Weizenbaum Chris Eppstein
Sass and Compass Workshop - ©2014 Shaho Toofani
- 13. WHAT IS SASS?
— Official Website: http://sass-lang.com
— The project's GitHub development homepage: https://github.com/nex3/sass
Sass and Compass Workshop - ©2014 Shaho Toofani
- 15. Installing Ruby
Before we can install Sass and Compass, we need Ruby installed. If you are on OS X, you already have
it.
Sass and Compass Workshop - ©2014 Shaho Toofani
- 16. INSTALLING SASS
— Command prompt (line) install
Install Sass
ruby
geminstallsass
ruby
Fetching: sass-3.2.12.gem(100%)
Successfully installedsass-3.2.12
1 gem installed
Installingri documentation for sass-3.2.12...
InstallingRDocdocumentation for sass-3.2.12...
You’ve just installedSass. Double-check:
ruby
sass-v
Sass and Compass Workshop - ©2014 Shaho Toofani
- 17. Monitor & convert the Sass files to CSS
— To run Sass from the command line
ruby
sassinput.scssoutput.css
— Telling Sass which files to WATCH
ruby
sass--watch screen.scss:screen.css
— You can also tell Sass to watch an entire directory
ruby
sass--watch sass:css
Sass and Compass Workshop - ©2014 Shaho Toofani
- 18. USING APPS INSTEAD OF THE COMMAND LINE
— Graphical tools for working with Sass and Compass
Scout app - http://mhs.github.com/scout-app
Scout isa free Adobe Air-based application.
Sass and Compass Workshop - ©2014 Shaho Toofani
- 19. USING APPS INSTEAD OF THE COMMAND LINE
— Graphical tools for working with Sass and Compass
CodeKit - http://incident57.com/codekit
Sass and Compass Workshop - ©2014 Shaho Toofani
- 20. USING APPS INSTEAD OF THE COMMAND LINE
— Graphical tools for working with Sass and Compass
LiveReload - http://livereload.com
Sass and Compass Workshop - ©2014 Shaho Toofani
- 21. Useful Commands
— Check which versions of Sass are available
ruby
gemlist sass –a –r
— Installing the latest pre-release version
ruby
geminstallsass --pre
— Uninstall a specific version of Sass
versionnumber is the release youwant toremove (for example, 3.2.0.alpha.103).
ruby
gemuninstall sass--versionversionnumber
Sass and Compass Workshop - ©2014 Shaho Toofani
- 22. Choosing an output style
— Nested (the default)
CSS
ol {
margin: 10px0;
padding: 10px 0; }
ol li{
font-size: 2em;
line-height: 1.4; }
ol li p {
color: #333; }
Sass and Compass Workshop - ©2014 Shaho Toofani
- 23. CHOOSING AN OUTPUT STYLE
— Expanded
CSS
ol {
margin: 10px0;
padding: 10px 0;
}
ol li {
font-size: 2em;
line-height: 1.4;
}
ol li p {
color: #333;
}
— Add a flag to the Watch command
ruby
sass--watch --style expandedscreen.scss:screen.css
Sass and Compass Workshop - ©2014 Shaho Toofani
- 24. CHOOSING AN OUTPUT STYLE
— Compact
CSS
ol { margin: 10px 0; padding: 10px 0; }
ol li { font-size: 2em; line-height: 1.4; }
ol li p { color: #333; }
— Add a flag to the Watch command
ruby
sass--watch --style compactscreen.scss:screen.css
Sass and Compass Workshop - ©2014 Shaho Toofani
- 25. CHOOSING AN OUTPUT STYLE
— Compressed
CSS
ol{margin:10px0;padding:10px 0;}olli{font-size:2em;line-height:1.4;}ol lip{color:#
— Add a flag to the Watch command
ruby
sass--watch --style compressed screen.scss:screen.css
Sass and Compass Workshop - ©2014 Shaho Toofani
- 26. DON’T EDIT YOUR OUTPUT!
N O T E !
it’simportant to note that when you’re using Sass, you’ll nolonger be editingany .css files.
The .scss filesare where you’ll live and breathe.
The reason being, any changesyou make to the .cssfile will eventually get overridden as
soon asyouupdate the .scssandSass compilesthe output.
Sass and Compass Workshop - ©2014 Shaho Toofani
- 27. VARIABLES
allow you to use the same value in multiple places, aswell as perform basic mathsandfunctions.
Sass and Compass Workshop - ©2014 Shaho Toofani
- 28. Variables
— Using variables:
Colors - for example shades of aparticular color
Font Stacks
Margin & Padding - consistency in design
Border Widths
Border Radius
Sass and Compass Workshop - ©2014 Shaho Toofani
- 29. Variable Declaration
— Numbers - can be set with or without units:
SCSS
$rounded: 4px;
$line-height: 1.5;
$font-size: 3rem;
— Colors
SCSS
$base: purple;
$border: rgba(0, 255, 0, 0.5);
$shadow: #333;
— Booleans
SCSS
$rounded: false;
$shadow: true;
Sass and Compass Workshop - ©2014 Shaho Toofani
- 30. Variable Declaration
— Strings - can be set with or without quotes:
SCSS
$header: 'Helvetica Neue';
$callout: Arial;
$message: "Loading...";
— Lists
SCSS
$colors: red, green, blue, yellow;
$margin: 40px 0 20px 100px;
— Null
SCSS
$shadow: null;
Sass and Compass Workshop - ©2014 Shaho Toofani
- 31. Declaring and Referencing variables
— Declaring a Sass variable:
SCSS
$highlight-color: #abcdef;
$highlight-border: 1px$highlight-colorsolid;
— Referencing:
SCSS
.selected {
border: $highlight-border;
}
CSS
.selected {
border: 1px #abcdefsolid;
}
Sass and Compass Workshop - ©2014 Shaho Toofani
- 32. Variable names: dashes or underscores?
N O T E !
Different people prefer different styles; some use dashestoseparate wordswithin variables ($highlight-
color), andsome use underscores ($highlight_color).
SCSS
$link-color: blue;
a {
color: $link_color;
}
In thisexample, $link-color and $link_color both refer to the same variable.
In fact, dashesand underscores are interchangeable most places in Sass, includingmixinsandSass
functions.
N O T E !
They aren’t interchangeable in the plain-CSS partsof Sass like class, ID, or property names, though.
Sass and Compass Workshop - ©2014 Shaho Toofani
- 33. Variables
— The Default Value
SCSS
$title: 'MyBlog';
$title: 'AboutMe';
h2:before {
content:$title;
}
CSS
h2:before {
content: 'About Me';
}
Sass and Compass Workshop - ©2014 Shaho Toofani
- 34. Variables, The Default Flag
— Variable definitions can optionally take the !default flag:
SCSS
$title: 'MyBlog';
$title: 'AboutMe'!default;
h2:before {
content:$title;
}
CSS
h2:before {
content: 'MyBlog';
}
Sass and Compass Workshop - ©2014 Shaho Toofani
- 35. Variables Scope
Variables set inside adeclaration (within { }) aren't usable outside that block
SCSS
p {
$border: #ccc;
border-top: 1px solid $border;
}
h1 {
border-top: 1px solid $border;
}
ruby
Syntax error: Undefined variable: "$border"
Sass and Compass Workshop - ©2014 Shaho Toofani
- 36. Variables Scope
Setting new valuestovariables set outside a declaration changesfuture instances
SCSS
$color-base: #777;
.sidebar {
$color-base: #222;
background: $color-base;
}
p {
color: $color-base;
}
CSS
.sidebar {
background: #222222;
}
p {
color: #222222;
}
Sass and Compass Workshop - ©2014 Shaho Toofani
- 37. Variables in real world
SCSS
$page_width: 960px;
$nav_tabs: 6;
$tab_width:round($page_width- $nav_tabs) - 1;
SCSS
$page_width: 960px;
$nav_tabs: 7;
$tab_width:round($page_width- $nav_tabs) - 1;
Sass and Compass Workshop - ©2014 Shaho Toofani
- 38. What about CSS variables?
N O T E !
Currently aW3C working draft, “CSS Variables Module Level 1,” isbeingdeveloped:
http://www.w3.org/TR/css-variables
— Define a CSS variable:
CSS
:root {
var-color-main: #333;
}
— Use the variable within a declaration:
CSS
#main p {
color: var(color-main);
}
The proposal uses a var prefix to define the variable but a var(variable-name) syntax for values.
Sass and Compass Workshop - ©2014 Shaho Toofani
- 40. Operations
SCSS
$column: 10%;
$margin: 16px;
.island {
width: $column*4;
margin:$margin*2 $margin/2 $margin+20 $margin;
padding:$margin*0.25;
}
CSS
.island {
width: 40%;
margin: 32px8px36px 16px;
padding: 4px;
}
Sass and Compass Workshop - ©2014 Shaho Toofani
- 41. Variables & Operations
— Interpolation (escaping)
CSS
p {
font: 1em/1.5em "Open Sans", Arial, Sans-Serif;
}
— Wrap with #{ }
Interpolation brackets #{} : That’sa special way to alert Sass to compile something within aselector or
property name; useful for paths & long strings.
SCSS
$basetypesize: 1em;
p {
font: #{$basetypesize}/#{$basetypesize*1.5} $mainfont;
}
Sass and Compass Workshop - ©2014 Shaho Toofani
- 42. Variables & Operations
— Negatives
SCSS
$margin: 10px;
.moveup{
margin:-$margin*4 -$margin*2 0 $margin;
}
CSS
.moveup {
margin: -60px 0 10px;
}
Sass and Compass Workshop - ©2014 Shaho Toofani
- 43. Variables & Operations
— Negatives
Wrapin brackets: (-$variable*value)
SCSS
$margin: 10px;
.moveup{
margin:(-$margin*4)(-$margin*2) 0 $margin;
}
CSS
.moveup {
margin: -40px-20px0 10px;
}
Sass and Compass Workshop - ©2014 Shaho Toofani
- 44. NESTING
Sass avoids repetition by nesting selectors within one another. The same thingworkswith properties.
Sass and Compass Workshop - ©2014 Shaho Toofani
- 45. NESTING RULES
— Nest & indent
Nest CSS rulesinside each other insteadof repeatingselectors in separate declarations
CSS
header[role="banner"] {
margin: 20px0 30px0;
border-bottom: 4px solid #333;
}
header[role="banner"] #logo {
float: left;
margin: 0 20px 0 0;
}
header[role="banner"] #logo img {
display: block;
opacity: .95;
}
SCSS
header[role="banner"] {
margin: 20px0 30px0;
border-bottom: 4px solid #333;
#logo {
float:left;
margin: 0 20px0 0;
img{
display:block;
opacity:.95;
}
}
}
Sass and Compass Workshop - ©2014 Shaho Toofani
- 46. NESTING RULES
— Nesting namespaces
CSS
h4 {
font-family: Georgia, Serif;
font-style: normal;
font-weight: bold;
font-variant: small-caps;
}
SCSS
h4 {
font: {
family: Georgia,Serif;
style:normal;
weight: bold;
variant: small-caps;
}
}
Sass and Compass Workshop - ©2014 Shaho Toofani
- 47. NESTING RULES
— Nest child and sibling combinators
SCSS
article{
> h2 {border-top: 1px dashed #eee } // childcombinator
~ section {padding-top:1.5em } // general siblingcombinator
+ footer {margin-top: 0 } // adjacentsiblingcombinator
* {color: #000 }
}
CSS
article> h2 { border-top:1pxdashed #eee }
article~ section { padding-top: 1.5em }
article+ footer { margin-top: 0 }
article* { color: #000 }
Sass and Compass Workshop - ©2014 Shaho Toofani
- 48. REFERENCING PARENT SELECTORS WITH &
— Pulls the parent selector into the &
CSS
a {
font-weight: bold;
text-decoration: none;
color: red;
border-bottom: 2px solid red;
}
a:hover{
color: blue;
border-color: blue;
}
SCSS
a {
font-weight:bold;
text-decoration:none;
color: red;
border-bottom: 2px solid red;
&:hover {
color:blue;
border-color: blue;
}
}
Sass and Compass Workshop - ©2014 Shaho Toofani
- 49. REFERENCING PARENT SELECTORS WITH &
— While nesting, the & symbol references the parent selector
SCSS
.content {
border: 1px solid #ccc;
padding: 20px;
.info {
border-color: red;
}
&.info {
border-color: green;
}
}
CSS
.content {
border: 1px solid #ccc;
padding: 20px;
}
.content .info {
border-color: red;
}
.content.info {
border-color: green;
}
Sass and Compass Workshop - ©2014 Shaho Toofani
- 50. REFERENCING PARENT SELECTORS WITH &
— Ampersand & prepends before parent selector
CSS
section.main p {
margin: 0 0 20px0;
font-size: 18px;
line-height: 1.5;
}
body.storesection.main p {
font-size: 16px;
line-height: 1.4;
}
SCSS
section.main p {
margin: 0 0 20px0;
font-size: 18px;
line-height: 1.5;
body.store &{
font-size: 16px;
line-height: 1.4;
}
}
Sass and Compass Workshop - ©2014 Shaho Toofani
- 51. REFERENCING PARENT SELECTORS WITH &
— & loves working with Modernizr
SCSS
button {
background: linear-gradient(#444,#222);
.no-cssgradients & {
background: #333
}
}
CSS
button {
background: linear-gradient(#444,#222);
}
.no-cssgradients button {
background: #333
}
Sass and Compass Workshop - ©2014 Shaho Toofani
- 52. Wrap up! - Variables, Nesting
SCSS
$size :16px;
h1 {
font: {
family: Arial, sans-serif;
size:$size;
}
.introduction &{
font:{
family: "monaco", Arial, sans-serif;
size: $size*1.5;
}
}
}
CSS
h1 {
font-family: Arial,sans-serif;
font-size: 16px;
}
.introduction h1 {
font-family: "monaco",Arial,sans-serif;
font-size: 24px;
}
Sass and Compass Workshop - ©2014 Shaho Toofani
- 53. Nesting Pitfalls
N O T E !
Nestingiseasy, but dangerous!
Do not nest unnecessarily; Try limitingyour nesting to 3 or 4 levels and consider refactoring anything
deeper.
SCSS
.content {
background: #ccc;
.cell {
h2 {
a {
&:hover {
color: red;
}
}
}
}
}
CSS
.content {
background: #ccc;
}
.content .cell h2 a:hover{
color: red;
}
Sass and Compass Workshop - ©2014 Shaho Toofani
- 54. COMMENTING IN SASS
— Multi-line comments
SCSS
/* Thisisa multi-line comment thatwill
appear in the final .css file. */
— Multi-line (Loud) comments
SCSS
/*!This isa multi-line commentthat will
appear in the final .css file. Evenin compressed style. */
— Single-line (Silent) comments
Single-line comments use the // prefix at the beginning of each line andaren’t included in the final
output
SCSS
// Thisisa single-line comment.
// Single-linecomments are removedfromthe .css file.
Sass and Compass Workshop - ©2014 Shaho Toofani
- 55. MIXINS
mixins allow youtore-use whole chunks of CSS, propertiesor selectors. Youcan even give them
arguments.
Sass and Compass Workshop - ©2014 Shaho Toofani
- 56. MIXINS
— Mixins allow you to easily share styles among different parts of the
stylesheet.
CSS
ul.plain {
color: #444;
list-style: none;
}
ul.plain li {
list-style-image: none;
list-style-type: none;
margin-left: 0;
}
SCSS
@mixin no-bullets {
list-style: none;
li {
list-style-image:none;
list-style-type: none;
margin-left: 0;
}
}
Sass and Compass Workshop - ©2014 Shaho Toofani
- 57. MIXINS
— Mixins allow you to define and reuse blocks of styles
SCSS
@mixin round-corner ($radius:4px) {
-webkit-border-radius: $radius;
-moz-border-radius:$radius;
border-radius: $radius;
}
begin with @mixin
give it a name
addyour $variable(s)
give (an) optional default value(s)
and...
Sass and Compass Workshop - ©2014 Shaho Toofani
- 58. MIXINS
— Call it with @include
SCSS
.message {
width: 100px;
@includeround-corner(10);
}
CSS
.message {
width: 100px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
Sass and Compass Workshop - ©2014 Shaho Toofani
- 59. MIXINS
— Mixin with Multiple Arguments
arguments are comma-seperatedand passedin order
SCSS
@mixin button($radius,$color) {
border-radius: $radius;
color: $color;
}
.btn-a {
@includebutton(4px,#000);
}
CSS
.btn-a {
border-radius: 4px;
color: #000;
}
Sass and Compass Workshop - ©2014 Shaho Toofani
- 60. MIXINS
— Mixin with Multiple Arguments
toofew arguments
SCSS
@mixin button($radius,$color) {
border-radius: $radius;
color: $color;
}
.btn-a {
@includebutton(4px);
}
ruby
Syntax error: Mixin button is
missingargument $color.
Sass and Compass Workshop - ©2014 Shaho Toofani
- 61. MIXINS
— Mixin with Multiple Arguments
Optional arguments
SCSS
@mixin button($radius,$color: #000){
border-radius: $radius;
color: $color;
}
.btn-a {
@includebutton(4px);
}
CSS
.btn-a {
border-radius: 4px;
color: #000;
}
Sass and Compass Workshop - ©2014 Shaho Toofani
- 62. MIXINS
— Mixin with Multiple Arguments
Optionals come last!
SCSS
@mixin button($color:#000, $radius){
border-radius: $radius;
color: $color;
}
.btn-a {
@includebutton(4px);
}
ruby
Syntax error: Required argument
$color mustcome before any
optional arguments.
Sass and Compass Workshop - ©2014 Shaho Toofani
- 63. MIXINS
— Mixin with Multiple Arguments
Keywordarguments allow passing in any order
SCSS
@mixin button($radius,$color: #000){
border-radius: $radius;
color: $color;
}
@include button($color: #777,
$radius: 5px);
}
CSS
.btn-a {
border-radius: 5px;
color: #777777;
}
Sass and Compass Workshop - ©2014 Shaho Toofani
- 64. CSS3 LOVES MIXINS
— box-shadow
SCSS
@mixin shadow($x, $y,$blur,$color){
-webkit-box-shadow:$x $y $blur $color;
-moz-box-shadow:$x $y $blur $color;
box-shadow:$x $y $blur $color;
}
SCSS
#sidebar {
@includeshadow(0, 1px, 2px, rgba(0,0,0,.5));
}
CSS
#sidebar {
-webkit-box-shadow: 0, 1px,2px, rgba(0,0,0,.5);
-moz-box-shadow: 0, 1px,2px, rgba(0,0,0,.5);
box-shadow: 0, 1px,2px,rgba(0,0,0,.5);
}
Sass and Compass Workshop - ©2014 Shaho Toofani
- 65. Mixins - Variable Arguments
CSS
.btn-a {
-webkit-transition: color 0.3sease-in, background 0.5sease-out;
-moz-transition: color 0.3sease-in, background 0.5sease-out;
transition: color 0.3s ease-in, background 0.5s ease-out;
}
— Passing valid, comma-separated CSS as a single value
SCSS
@mixin transition($val) {
-webkit-transition:$val;
-moz-transition:$val;
transition: $val;
}
.btn-a {
@include transition(color0.3s ease-in, background0.5s ease-out);
}
— will throw an ERROR ...
ruby
Mixin transition takes1 argument but 2 were passed.
Sass and Compass Workshop - ©2014 Shaho Toofani
- 66. Mixins - Variable Arguments
— Variable Arguments
Adding ... to an argument creates avariable argument (vararg)
SCSS
@mixin transition($val...) {
-webkit-transition:$val;
-moz-transition:$val;
transition: $val;
}
.btn-a {
@includetransition(color 0.3s
ease-in, background 0.5s ease-out);
}
CSS
.btn-a {
-webkit-transition: color 0.3s
ease-in, background 0.5s ease-out;
-moz-transition: color 0.3s
ease-in, background 0.5s ease-out;
transition: color 0.3s ease-in,
background0.5sease-out;
}
Sass and Compass Workshop - ©2014 Shaho Toofani
- 67. Mixins - Variable Arguments
— Variable arguments in reverse
Previous example: passinga list which is split into arguments by the mixin
SCSS
@mixin button($radius,$color) {
border-radius: $radius;
color: $color;
}
$properties: 4px, #000;
.btn-a {
@includebutton($properties...);
}
CSS
.btn-a {
border-radius: 4px;
color: #000;
}
Sass and Compass Workshop - ©2014 Shaho Toofani
- 68. CSS3 LOVES MIXINS
— gradient
SCSS
@mixin linear-gradient($from,$to) {
background-color: $to;
background-image: -webkit-linear-gradient(top, $from, $to);
background-image: -moz-linear-gradient(top, $from, $to);
background-image: -ms-linear-gradient(top, $from, $to);
background-image: -o-linear-gradient(top,$from,$to);
background-image: linear-gradient(to bottom,$from,$to);
filter:
progid:DXImageTransform.Microsoft.gradient(startColorstr='$from', endColorstr='$t
-ms-filter:
quote(progid:DXImageTransform.Microsoft.gradient(startColorstr='$from',endColors
}
SCSS
.demo {
width:300px;
height:300px;
@includelinear-gradient(#444, #0000ff);
}
Sass and Compass Workshop - ©2014 Shaho Toofani
- 69. INTERPOLATION
— Use interpolation inside Mixins - gradient revisited
SCSS
@mixin linear-gradient($from,$to) {
background-color: $to;
background-image: -webkit-linear-gradient(top, $from, $to);
background-image: -moz-linear-gradient(top, $from, $to);
background-image: -ms-linear-gradient(top, $from, $to);
background-image: -o-linear-gradient(top,$from,$to);
background-image: linear-gradient(to bottom,$from,$to);
filter:
progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$from}',endColorstr=
-ms-filter:
quote(progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$from}',endCol
}
SCSS
.demo {
width:300px;
height:300px;
@includelinear-gradient(#444, #0000ff);
}
Sass and Compass Workshop - ©2014 Shaho Toofani
- 70. @EXTEND
The @extend directive (tells) Sassthat one selector shouldinherit the styles of another selector.
Sass and Compass Workshop - ©2014 Shaho Toofani
- 71. @extend directive
— The @extend directive is used to extend another style.
Nest @extend .classname
Goes inside another class
Don’t have to use multiple classes
Association isin CSS not HTML
CSS
.button {
background: blue; color: white;
padding:0.2em 0.8em;
border-radius:0.4em;
}
SCSS
.button-delete{
@extend .button;
background: red;
}
Sass and Compass Workshop - ©2014 Shaho Toofani
- 72. @extend directive
— Selector inheritance
SCSS
.box{
padding: 2em;
color: black;
background-color: white;
}
.warning-box {
@extend .box;
border: 2px dotted red;
}
.success-box {
@extend .box;
border: 2px dotted chartreuse;
}
.info-box {
@extend .box;
border: 2px dotted blue;
}
CSS
.box, .warning-box,
.success-box, .info-box {
padding: 2em;
color: black;
background-color: white;
}
.warning-box {
border: 2px dotted red;
}
.success-box {
border: 2px dotted chartreuse;
}
.info-box {
border: 2px dotted blue;
}
Sass and Compass Workshop - ©2014 Shaho Toofani
- 73. Multiple @extends
Youcan also @extend multiple classes within adeclaration, which chainstogether all the stylesfrom
each class:
SCSS
$color-accent: #ea4c89;
.alert {
padding: 15px;
font-size: 1.2em;
text-align: center;
background: $color-accent;
}
.important{
font-size: 4em;
}
SCSS
.alert-positive {
@extend .alert;
@extend .important;
background: #9c3;
}
Sass and Compass Workshop - ©2014 Shaho Toofani
- 74. Multiple @extends
Which will compile to:
CSS
.alert, alert-positive {
padding: 15px;
font-size: 1.2em;
text-align: center;
background: #ea4c89;
}
.important, .alert-positive {
font-size: 4em;
}
.alert-positive {
background: #9c3;
}
Sass and Compass Workshop - ©2014 Shaho Toofani
- 76. Using placeholder selectors with
@extend
Placeholder selectorsallow you to define classes that won’t appear in the outputted CSS on their own.
Youcan reference placeholders using @extend.
SCSS
%button{
padding: 10px;
font-weight:bold;
border-radius: 6px;
}
SCSS
.submit{
@extend %button;
background: green;
}
CSS
.submit {
padding: 10px;
font-weight: bold;
border-radius: 6px;
background: green;
}Sass and Compass Workshop - ©2014 Shaho Toofani
- 77. Using placeholder selectors with
@extend
— Use placeholder selectors to extend styles only when needed
SCSS
%box{
padding: 2em;
color: black;
background-color: white;
}
.warning-box {
@extend %box;
border: 2px dotted red;
}
.success-box {
@extend %box;
border: 2px dotted chartreuse;
}
.info-box {
@extend %box;
border: 2px dotted blue;
}
CSS
.warning-box,
.success-box,
.info-box {
padding: 2em;
color: black;
background-color: white;
}
.warning-box {
border: 2px dotted red;
}
.success-box {
border: 2px dotted chartreuse;
}
.info-box {
border: 2px dotted blue;
}
Sass and Compass Workshop - ©2014 Shaho Toofani
- 78. Using placeholder selectors with
@extend
— Define clearfix as placeholder
Output will be:SCSS
%clearfix {
&:after {
content: "";
display: block;
clear:both;
}
}
SCSS
#container{
position:relative;
min-width: 42.5em;
@extend %clearfix;
}
CSS
#container:after {
content: " ";
display: block;
clear: both;
}
#container{
position: relative;
min-width: 42.5em;
}
Sass and Compass Workshop - ©2014 Shaho Toofani
- 80. .scss vs .sass
— Indented syntax (.sass) relies on whitespace to simplify
SCSS
.content {
border: 1px solid #ccc;
padding: 20px;
h2 {
font-size: 3em;
margin: 20px 0;
}
}
SASS
.content
border: 1px solid #ccc
padding: 20px
h2
font-size: 3em
margin: 20px 0
Sass and Compass Workshop - ©2014 Shaho Toofani
- 81. .scss vs .sass
— Mixin declaration
SCSS
@mixin box-sizing($x){
-webkit-box-sizing:$x;
-moz-box-sizing: $x;
box-sizing:$x;
}
.content {
@includebox-sizing(border-box);
}
SASS
=box-sizing($x)
-webkit-box-sizing: $x
-moz-box-sizing: $x
box-sizing: $x
.content
+box-sizing(border-box)
Readmore: Sassvs. SCSS: which syntax is better?
Sass and Compass Workshop - ©2014 Shaho Toofani
- 83. Writing functions in Sass
A function is aself contained tool to generate a value that can be usedelsewhere.
The result of afunction can be usedin a mixin or directly intothe style sheet.
SCSS
@function fluid-it() {
@return 35%; //alwaysreturn35%
}
.sidebar {
width: fluid-it();
}
The @return directive tells Sasstoreturn something:
CSS
.sidebar {
width: 35%;
}
Sass and Compass Workshop - ©2014 Shaho Toofani
- 84. Writing functions in Sass
— Function with arguments
SCSS
@function square($value) {
@return ($value*$value);
}
p {
margin-left:square(2px);
}
Will return:
CSS
p {
margin-left: 4px;
}
Sass and Compass Workshop - ©2014 Shaho Toofani
- 85. Writing functions in Sass
— Use functions
target / context
For example, If the target size of our sidebar is 400px and the context of itsparent is 1000px:
SCSS
@function fluid-it($target, $context) {
@return ($target/ $context) * 100%;
}
.sidebar {
width:fluid-it(400, 1000);
}
CSS
.sidebar {
width: 40%;
}
Create a CSS grid using calc()
Sass and Compass Workshop - ©2014 Shaho Toofani
- 87. Colors
— Built-in color functions
SCSS
$linkcolor: #ce4dd6;
a {
color: $linkcolor;
&:hover {
color:lighten($linkcolor, 30%);
}
&:active{
color:darken($linkcolor, 30%);
}
}
CSS
a {
color: #ce4dd6;
}
a:hover{
color: #f0c9f3;
}
a:active {
color: #6b1a70;
}
Sass and Compass Workshop - ©2014 Shaho Toofani
- 88. Colors
— RGB Functions
SCSS
rgb($red, $green, $blue)
Createsa Colorfrom red, green, and blue values.
Createsa Colorfrom red, green, blue, and alpha values.
SCSS
rgba($red,$green,$blue,$alpha)
Getsthe red componentof a color.
SCSS
red($color)
Mixes two colors together.
SCSS
mix($color-1, $color-2)
SassRGB Functions(List)
Sass and Compass Workshop - ©2014 Shaho Toofani
- 89. Colors
— The RGBA function
SCSS
a {color:rgba(blue, 0.75) }
p {background:rgba(#ffa, 0.25)}
CSS
a { color: rgba(255, 255, 170, 0.25) }
p { background: rgba(255, 255, 170, 0.25) }
— Inspecting Colors
SCSS
$color:red; // #ff0000
hue($color); // 0 deg
saturation($color); // 100%
lightness($color); // 50%
red($color); // 100
green($color); // 0
blue($color); // 0
alpha($color); // 100
Sass and Compass Workshop - ©2014 Shaho Toofani
- 91. Colors
N O T E !
HSLA Colors
Hue
Hue is a degree onthe colorwheel; 0 (or
360) is red, 120 is green, 240 is blue.
Numbers inbetweenreflect differentshades.
Saturation
is apercentage value; 100% is the full color.
0% is completely denatured (grayscale).
Lightness
is alsoa percentage; 0% is dark (black),
100% is light (white),and 50% is the
average.
Alpha
Opacity/Transparency value. 0 is fully
transparent. 1 is fully opaque. 0.5 is 50%
transparent.
Yay for HSLa
Sass and Compass Workshop - ©2014 Shaho Toofani
- 93. Colors
— change-color: Set any property of a color
SCSS
change-color($color, [$red],[$green], [$blue],[$hue], [$saturation], [$lightness],
SCSS
change-color(#ba5637,$hue:60);
SCSS
change-color(#8e9cb3,$saturation:100);
SCSS
change-color(#6cf620,$green: 60, $blue: 100);
Sass and Compass Workshop - ©2014 Shaho Toofani
- 94. Colors
— adjust-color: Incrementally manipulate any property of a color
SCSS
adjust-color($color, [$red],[$green], [$blue],[$hue], [$saturation], [$lightness],
SCSS
adjust-color(#d3fa7b,$hue:60, $lightness: -20%);
N O T E !
Lastexampleproduce:rgba(95, 255,227,0.75);
SCSS
adjust-color(#5f8fe3,$green:100, $alpha: -0.25);
Sass and Compass Workshop - ©2014 Shaho Toofani
- 95. Color online examples
SassMe - Visualize SASS color functionsin real-time without compiling
How color worksin Sass
Flatt sassy butons
SassButton Generator
Sassmixin for inner shadow
Sasscolor function comparisons
Sassand color manipulation on Codepen.io
Readmore:
Mixins for semi-transparent colors
Controllingcolor with Sass color functions
How to programmatically go from one color to another in Sass
Sass and Compass Workshop - ©2014 Shaho Toofani
- 97. Math
— Basic Arithmetic
+ addition
- subtraction
* multiplication
/ division
% modulo = remainder from a division operation. 12 % 3 results in 0, while 12 % 5 returns2.
Math operators( +, -, *, /, % ) work with numbers
SCSS
1em+ 1em; // 2em
1em- 1em; // 0em
1in+ 72pt; // 2in
6px* 4; // 24px
18 %5; // 3
Sass and Compass Workshop - ©2014 Shaho Toofani
- 98. Math
— Division a special case
The trickiest of the number operations, due tofont:
SCSS
font : 18px/ 1.45em; // 18px/1.45em
font : (20px / 5); // 4px
font : 20px/ 5 + 1; // 5px
font : $base /5; // 4px
$size : 20px / 5; // 4px
width: 20px* 5 / 2; // 50px
Sassdefaults to returning (up to) five digitsafter adecimal point.
Sass and Compass Workshop - ©2014 Shaho Toofani
- 99. Math
— String Addition
Addition on strings concatenates them:
SCSS
$family: "Helvetica " + "Neue"; // "Helvetica Neue"
Initial left-side string determinespost-concatenation quotes:
SCSS
$family: 'sans-' +serif //'sans-serif'
$family: sans-+ 'serif' //sans-serif
Sass and Compass Workshop - ©2014 Shaho Toofani
- 100. Math
— Pre-Defined Math Utilities
round($number) - roundtoclosest whole number
ceil($number) - roundup
floor($number) - rounddown
abs($number) - absolute value
min($list)- minimum list value
max($list)- maximum list value
percentage($number) - convert topercentage
Number Functions
SCSS
percentage(13/25) //52%
round(2.4) //2
ceil(2.2) //3
floor(2.6) //2
abs(-24) //24
Sass and Compass Workshop - ©2014 Shaho Toofani
- 102. Logic Operators
— Comparison (Equality) operators
The equality operatorscan be used on everything (stringsof text and numbers).
== means equal to
!= not equal to
— Relational operators
Sassallowsthe use of relational operatorson numbers:
> greater than
>= greater than or equal to
< less than
<= lessthan or equal to
Sass and Compass Workshop - ©2014 Shaho Toofani
- 103. Logic Operators
Relational operators ( <, >, <=, >= ) evaluate numbers
SCSS
1 <20 // true
10 <= 20 // true
4 >1 // true
4 >= 1 // true
Comparison operators ( ==, != ) evaluate all data types
SCSS
1 +1 == 2 // true
small !=big // true
#000==black // true
white != #fff // false
Sass and Compass Workshop - ©2014 Shaho Toofani
- 104. Control DIRECTIVE
— @if statement
Using @if, we can conditionally output code
SCSS
$theme:dark;
header {
@if $theme == dark {
background: #000;
}
}
CSS
header {
background: #000;
}
Sass and Compass Workshop - ©2014 Shaho Toofani
- 105. Control DIRECTIVE
— The @if and @else if control directives
@else providesa fallback if everythingevaluates false or null
SCSS
$theme:light;
header {
@if $theme == dark {
background: #000;
} @else{
background: #fff;
}
}
CSS
header {
background: #fff;
}
Sass and Compass Workshop - ©2014 Shaho Toofani
- 106. Control DIRECTIVE
— The @if and @else if control directives
@else if allowsfor multiple comparisons:
SCSS
$theme:pink;
header {
@if $theme == dark {
background: #000;
}@else {
background: #fff;
}@else if $theme ==pink {
background:pink;
}
}
CSS
header {
background: pink;
}
Sass and Compass Workshop - ©2014 Shaho Toofani
- 107. Control DIRECTIVE
— The Single-line if function
if( condition, "true value", "false value" )
SCSS
$theme:light;
header {
@if $theme == dark {
color: #000;
}@else {
color: #fff;
}
}
SCSS
$theme:light;
header {
color:if($theme == dark, #000, #fff)
}
Sass and Compass Workshop - ©2014 Shaho Toofani
- 108. Control DIRECTIVE
— The @for loop
The @for directive repeatedly outputs aset of styles.
A counter variable isjust aplaceholder for the current state of the loop; it increments with each
iteration of the loop.
SCSS
@for$ifrom 1to 6 {
span-#{$i} {
width: 20px+ ($i* 20px);
}
}
CSS
span-1 { width: 40px; }
span-2 { width: 60px; }
span-3 { width: 80px; }
span-4 { width: 100px; }
span-5 { width: 120px; }
So, where is the span-6?!
Sass and Compass Workshop - ©2014 Shaho Toofani
- 109. Control DIRECTIVE
— The @for loop
SCSS
@for$ifrom 1through 6 {
span-#{$i} {
width: 20px+ ($i* 20px);
}
}
CSS
span-1 { width: 40px; }
span-2 { width: 60px; }
span-3 { width: 80px; }
span-4 { width: 100px; }
span-5 { width: 120px; }
span-6 { width: 140px; }
Sass and Compass Workshop - ©2014 Shaho Toofani
- 110. Lists
— Lists: A comma- or space-separated group of values
Lists are just a series of other values, separatedby either spaces or commas.
SCSS
$colors: red, green, blue, yellow;
$margin: 40px 0 20px 100px;
$items: "item-1" "item-2" "item-3";
$items-comma: "item-1", "item-2", "item-3";
$my-font-face:Helvetica,Arial,sans-serif;
Readmore: Understanding Sasslists
Sass and Compass Workshop - ©2014 Shaho Toofani
- 111. Lists
— Sass list functions
length - number of items in alist:
SCSS
$colors: red greenblue yellow;
$size: length($colors); //4
append - adds avalue to the endof a list:
SCSS
$colors: red greenblue yellow;
$all: append($colors,black); //redgreen blueyellowblack
join - combinestwo liststogether:
SCSS
$colos1: red green;
$colors2: blueyellow;
$all: join($colors1, $colors2) // red greenblue yellow
Sass and Compass Workshop - ©2014 Shaho Toofani
- 112. Lists
— Sass list functions (continued)
index - returnsa value'slist position or false:
SCSS
$colors: red greenblue yellow;
$i:index($colors,red); //1 (starts at 1not 0)
$i:index($colors,black); //false
nth - return the item at list position n:
SCSS
$colors: red greenblue yellow;
$i:nth($colors, 3); //blue
Sass and Compass Workshop - ©2014 Shaho Toofani
- 113. Lists
— Sass list functions (continued)
zip- combineslists in comma-separatedpairs:
SCSS
$colors: red blue;
$sense:warm cold;
$all: zip($colors,$sense);
red warm
blue cold
Sass and Compass Workshop - ©2014 Shaho Toofani
- 114. Control DIRECTIVE
— The @each loops
The @each directive isuseful toloop through alist of items.
SCSS
$logos:puma nike adidas;
@each $logoin$logos{
.#{$logo}{
background:url(#{$logo}.jpg);
}
}
CSS
.puma {
background: url(puma.jpg);
}
.nike {
background: url(nike.jpg);
}
.adidas {
background: url(adidas.jpg);
}
Sass and Compass Workshop - ©2014 Shaho Toofani
- 115. Control DIRECTIVE
— The @while loop
@while requiresmanually updating the index.
SCSS
$level: 0;
@while $level < 5 {
.tag-#{$level+ 1} {
font-size:.7em +($level* .5em);
}
$level: $level +1;
}
CSS
.tag-1 { font-size: 0.7em; }
.tag-2 { font-size: 1.2em; }
.tag-3 { font-size: 1.7em; }
.tag-4 { font-size: 2.2em; }
.tag-5 { font-size: 2.7em; }
Sass and Compass Workshop - ©2014 Shaho Toofani
- 116. Control DIRECTIVE
— The @while loop
SCSS
$i: 2;
.grid {
position:relative;
display:block;
@while $i<= 6 {
&.span-#{$i} {
width: $i* 30px;
float: left;
}
$i:$i+ 2;
}
}
CSS
.grid {
position: relative;
display: block;
}
.grid.span-2 {
width: 60px;
float: left;
}
.grid.span-4 {
width: 120px;
float: left;
}
.grid.span-6 {
width: 180px;
float: left;
}
Sass and Compass Workshop - ©2014 Shaho Toofani
- 118. @import, The Legacy way
master.csscontaines:
CSS
@import'reset.css';
@import'base.css';
@import'layout.css';
@import'typography.css';
.
.
Sass and Compass Workshop - ©2014 Shaho Toofani
- 119. Partials, Importing the right way
Enter the @import rule, which Sass extends to allow the importingof multiple SCSS files, merging
them into asingle CSS file when compiled.
A single CSS meansfewer HTTP connections. Performance!
Variables can be defined in their own file, then importedwhenever needed.
Imported SCSS files can contain project-agnostic mixins that can be shared and reused.
Filename startswith an underscore, for example _mixins.scss
Sass and Compass Workshop - ©2014 Shaho Toofani
- 120. Partials
— Use @import to merge chunks of your SCSS into one file.
OR
SCSS
@import"colors.scss";
@import"mixins.scss";
@import"grid.scss";
SCSS
@import"colors";
@import"mixins";
@import"grid";
Sass and Compass Workshop - ©2014 Shaho Toofani
- 121. Partials
— Separate partials for:
and
grids, typography, colors, forms,
tables
mixins & variables
different post types for blogs
media queries
site sub-sections
reset normalize
On compile, Sass will import the partials
andoutput the relevant CSS where they
are placed.
Sass and Compass Workshop - ©2014 Shaho Toofani
- 122. Media Query
@media directives in Sassbehave just like they doin plain CSS, with one extracapabilities.
Sass and Compass Workshop - ©2014 Shaho Toofani
- 123. Media Query
— CSS Media Query
One of the foundationsof building responsive websites isthe CSS mediaquery. The ability to “listen” to
the browser’s viewport for varying dimensions and then apply certain stylesbased on those dimensions
is the cornerstone of creating flexible layoutsthat adapt to different devices.
CSS
.sidebar {
float: right;
width: 300px;
}
@media screen and (max-width: 480px){
.sidebar {
float: none;
width: 100%;
}
}
Sass and Compass Workshop - ©2014 Shaho Toofani
- 124. Media Query
— Responsive Web Design in Sass — @media Directive
CSS
.sidebar {
float: right;
width: 300px;
}
@media screen and (max-width: 480px){
.sidebar {
float: none;
width: 100%;
}
}
SCSS
.sidebar {
float: right;
width: 300px;
@media screenand (max-width:480px){
float:none;
width: 100%;
}
}
begin with @media
write mediaqueries asnormal
if it appears within arule, it will ‘bubble up’ and put the selectors within the rule.
media queries can be nested
combined with the andrule
Sass and Compass Workshop - ©2014 Shaho Toofani
- 125. Media Query
— Nested Media Queries
In Sass, you can nest media queriesinside the original declaration, andthey will “bubble up” into their
own separate declarationswhen the stylesheet is compiled.
SCSS
section.main {
float: left;
width: 65%;
font-size: 16px;
line-height: 1.4;
@media screenand (max-width: 800px) {
float:none;
width:auto;
}
@media screenand (max-width: 500px) {
font-size: 12px;
line-height: 1.4;
}
}
Sass and Compass Workshop - ©2014 Shaho Toofani
- 126. Media Query
Nestingmedia queriesavoidsrewriting the selector (section.main in this example) each time you’d like
to make adjustments for various breakpoints.
CSS
section.main {
float: left;
width: 65%;
font-size: 16px;
line-height: 1.4;
}
@media screen and (max-width: 800px){
section.main {
float: none;
width: auto;
}
}
@media screen and (max-width: 500px){
section.main {
font-size: 12px;
line-height: 1.4;
}
}
Sass and Compass Workshop - ©2014 Shaho Toofani
- 127. Media Query
— Using variables to define breakpoints
SCSS
$width-small: 500px;
$width-medium: 800px;
$width-large: 1200px;
section.main {
font-size: 16px;
line-height: 1.4;
@media screenand (max-width: $width-large) {
float:left;
width: 65%;
}
@media screenand (max-width: $width-medium){
float:none;
width:auto;
}
@media screenand (max-width: $width-small) {
font-size: 12px;
line-height: 1.4;
}
}Sass and Compass Workshop - ©2014 Shaho Toofani
- 128. Media Query
Output:
CSS
section.main {
font-size: 16px;
line-height: 1.4;
}
@media screen and (max-width: 1200px) {
section.main {
float: left;
width: 65%;
}
}
@media screen and (max-width: 800px){
section.main {
float: none;
width: auto;
}
}
@media screen and (max-width: 500px){
section.main {
font-size: 12px;
line-height: 1.4;
}
}
Sass and Compass Workshop - ©2014 Shaho Toofani
- 129. Media Query
Going astep further, youcan also define an entire mediaquery as avariable:
SCSS
$mobile-first: "screenand (min-width: 300px)";
@media #{$mobile-first} {
.content {
font-size: 14px;
line-height: 1.5;
}
}
CSS
@media screen and (min-width: 300px){
.content {
font-size: 14px;
line-height: 1.5;
}
}
Sass and Compass Workshop - ©2014 Shaho Toofani
- 130. Media Query
— Combining @content blocks and mixins
By using Sass’s @content directive, youcan pass entire blocks of stylestoa mixin, and Sasswill place
those blocks back intothe declaration that calls the mixin.
SCSS
$width-small: 400px;
$width-medium: 760px;
$width-large: 1200px;
@mixin responsive($width){
@if $width == wide-screens{
@mediaonly screenand (max-width: $width-large) {@content;}
}
@else if$width == medium-screens {
@mediaonly screenand (max-width: $width-medium){ @content; }
}
@else if$width == small-screens {
@mediaonly screenand (max-width: $width-small) {@content;}
}
}
Sass and Compass Workshop - ©2014 Shaho Toofani
- 131. Media Query
@content - passa block of properties toa mixin
SCSS
.leftside {
float: left;
width: 70%;
@includeresponsive(wide-screens){
width: 80%;
}
@includeresponsive(medium-screens) {
width: 50%;
font-size: 14px;
}
@includeresponsive(small-screens){
float:none;
width: 100%;
font-size: 12px;
}
}
Sass and Compass Workshop - ©2014 Shaho Toofani
- 132. Media Query
Will output:
CSS
.leftside {
float: left;
width: 70%;
}
@media onlyscreenand(max-width: 1200px) {
.leftside {
width: 80%;
}
}
@media onlyscreenand(max-width: 760px) {
.leftside {
width: 50%;
font-size: 14px;
}
}
@media onlyscreenand(max-width: 400px) {
.leftside {
float: none;
width: 100%;
font-size: 12px;
}
}
Sass and Compass Workshop - ©2014 Shaho Toofani
- 133. Media Query
and...
SCSS
h1 {
font-size: 40px;
@includeresponsive(wide-screens){ font-size: 48px;}
@includeresponsive(medium-screens) { font-size: 32px; }
@includeresponsive(small-screens){ font-size: 20px;}
}
CSS
h1 { font-size: 40px; }
@media onlyscreenand(max-width: 1200px) {
h1 { font-size: 48px; }
}
@media onlyscreenand(max-width: 760px) {
h1 { font-size: 32px; }
}
@media onlyscreenand(max-width: 400px) {
h1 { font-size: 20px; }
}
Sass and Compass Workshop - ©2014 Shaho Toofani
- 134. Media Query
— Media Query Retrofitting
SCSS
.sidebar {
border: 1px solid #ccc;
@media (min-width: 700px) {
float:right;
width: 30%;
}
}
CSS
.sidebar {
border: 1px solid #ccc;
}
@media (min-width: 700px){
.sidebar {
float: right;
width: 30%;
}
}
Sass and Compass Workshop - ©2014 Shaho Toofani
- 135. Media Query
— Media Query Retrofitting
SCSS
@mixin respond-to {
@media (min-width: 700px) {
@content
}
}
.sidebar {
border: 1px solid #ccc;
@includerespond-to{
float:right;
width: 30%;
}
}
CSS
.sidebar {
border: 1px solid #ccc;
}
@media (min-width: 700px){
.sidebar {
float: right;
width: 30%;
}
}
Sass and Compass Workshop - ©2014 Shaho Toofani
- 136. Media Query
— Media Query Retrofitting
SCSS
@mixin respond-to ($media) {
@if $media ==tablet{
@media(min-width: 700px){
@content
}
}
}
.sidebar {
border: 1px solid #ccc;
@includerespond-to(tablet){
float: right;
width: 30%;
}
}
CSS
.sidebar {
border: 1px solid #ccc;
}
@media (min-width: 700px){
.sidebar {
float: right;
width: 30%;
}
}
Sass and Compass Workshop - ©2014 Shaho Toofani
- 137. Media Query
— Media Query Retrofitting
SCSS
@mixin respond-to($query){
@media (min-width: $query){
@content
}
}
.sidebar {
border: 1px solid #ccc;
@includerespond-to(900px){
float:right;
width: 30%;
}
}
CSS
.sidebar {
border: 1px solid #ccc;
}
@media (min-width: 900px){
.sidebar {
float: right;
width: 30%;
}
}
Sass and Compass Workshop - ©2014 Shaho Toofani
- 138. Media Query
— General Respond-To Mixin
SCSS
@mixin respond-to($value,$query) {
@media ($value: $query){
@content
}
}
.sidebar {
border: 1px solid #ccc;
@includerespond-to(max-width,
600px) {
float:right;
width: 30%;
}
}
CSS
.sidebar {
border: 1px solid #ccc;
}
@media (min-width: 600px){
.sidebar {
float: right;
width: 30%;
}
}
Sass and Compass Workshop - ©2014 Shaho Toofani
- 139. COMPASS
Compass is an open-source CSS Authoring Framework.
Sass and Compass Workshop - ©2014 Shaho Toofani
- 140. WHAT IS Compass?
— Compass is an open-source CSS Authoring Framework.
Looks like an extension to Sass
Compasswasthe first Sass-basedframework
We get access to lotsandlots of reusable patterns and tools for easily creating CSS
Compasslets you write CSS3 goodieslike box-shadow, gradients and ... with a single syntax
It magically creates cross-browser compatible CSS of everything
It provides Mixins, helpers, New Functions, reset andmore
Sass and Compass Workshop - ©2014 Shaho Toofani
- 141. WHAT IS Compass?
— Official Website: http://compass-style.org
— GitHub development homepage: https://github.com/chriseppstein/compass
Sass and Compass Workshop - ©2014 Shaho Toofani
- 142. INSTALLING COMPASS
— Command prompt(line) install
ruby
geminstallcompass
You’ve just installedCompass. Double-check:
ruby
Fetching: compass-0.12.2.gem(100%)
Successfully installedcompass-0.12.2
1 gem installed
Installingri documentation for compass-0.12.2...
InstallingRDocdocumentation for compass-0.12.2...
ruby
compass-v
It should return:
ruby
Compass 0.12.2(Alnilam)
Sass and Compass Workshop - ©2014 Shaho Toofani
- 143. Useful Commands
— Check which versions of Compass are available
ruby
gemlist compass –a –r
— Installing the latest pre-release version
ruby
geminstallcompass --pre
— Uninstall a specific version of Compass
versionnumber is the release youwant toremove (for example, 0.12.2).
ruby
gemuninstall compass--version versionnumber
Sass and Compass Workshop - ©2014 Shaho Toofani
- 144. Create a Sass and Compass project
— Compass's built-in create command to make a project in the folder specified
ruby
compasscreatenew-project
— Or just run following inside a folder
ruby
compasscreate
— Set up an existing project with compass - ( )more
ruby
compassinstallcompass
— Automatic compile to CSS from the Command Line
ruby
compasswatch
Sass and Compass Workshop - ©2014 Shaho Toofani
- 145. Default Workflow in Compass
— What are the generated files in a Compass project for?
.sass-cache: This folder will contain the cache filesthat Sass usestobuild your CSS files faster. Youdon't
needtodoanything with it.
sass: Thisfolder will store the Sass filesthat will be written or amended. This folder can be called
anything, but 'sass' is the default name.
stylesheets: This folder will contain the compiledCSS filesthat Sass will generate. It can be called
anything, but stylesheetsisthe default folder name in Compass projects.
config.rb: Thisfile containsthe configuration defaults for a project, what the various foldersare called,
andwhere they are located. It alsocontrols the compression style of the generated CSS.
Sass and Compass Workshop - ©2014 Shaho Toofani
- 146. Customizing Compass project
— Create a customized Compass project
ruby
compasscreate--sass-dir "sass"--css-dir "css" --javascripts-dir "js"--images-dir
— Creating a bare Compass project
ruby
compasscreate--bare--sass-dir "sass"--css-dir "css"
--javascripts-dir "js"--images-dir"img"
Sass and Compass Workshop - ©2014 Shaho Toofani
- 147. Understanding the config.rb file
The config.rb file isthe brain of aCompass project. It definesthe relationship between files and their
assets, how andwhere the CSS shouldbe generated, andany dependenciesfor a project.
ruby
http_path = "/"
css_dir= "stylesheets"
sass_dir ="sass"
images_dir= "images"
javascripts_dir= "javascripts"
output_style = :compressed
fonts_dir = "fonts"
N O T E !
Clean .sass-cache folder viaCompass:
ruby
compassclean
Sass and Compass Workshop - ©2014 Shaho Toofani
- 148. Importing Compass
Compasscomprises five main modules:
utilities
typography
css3
layout
reset
— Importing
Once installed, use @import to make Compassavailable:
SCSS
@import"compass"; //utilities,typography, css3
@import"compass/layout";
Sass and Compass Workshop - ©2014 Shaho Toofani
- 149. Importing Reset
Addsa set of rules basedon after compiling:Eric Meyer's reset
SCSS
@import"compass/reset";
Avoid if you plan on using Normalize.css
Sass and Compass Workshop - ©2014 Shaho Toofani
- 150. Compass Mixins
— Example with CSS3 Mixins
SCSS
@import"compass";
.message {
@includebackground(linear-gradient(#9b9592,#3c3733));
@includeborder-radius(5px);
}
CSS
.message {
background: -webkit-linear-gradient(#9b9592,#3c3733);
background: -moz-linear-gradient(#9b9592,#3c3733);
background: -ms-linear-gradient(#9b9592, #3c3733);
background: linear-gradient(#9b9592, #3c3733);
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-ms-border-radius: 5px;
border-radius: 5px;
}
Sass and Compass Workshop - ©2014 Shaho Toofani
- 151. Compass Mixins
— Radial Gradient Mixin
SCSS
@import"compass";
.message {
@includebackground(radial-gradient(center, #9b9592,#3c3733));
}
CSS
.message {
background: -webkit-gradient(radial, 50%,0, 50%, 100, color-stop(0%,#9b9592),
color-stop(100%, #3c3733));
background: -webkit-radial-gradient(center, #9b9592,#3c3733);
background: -moz-radial-gradient(center, #9b9592, #3c3733);
background: -o-radial-gradient(center,#9b9592, #3c3733);
background: radial-gradient(center, #9b9592,#3c3733);
}
Sass and Compass Workshop - ©2014 Shaho Toofani
- 152. Compass Mixins
More robust color stops are alsosupported:
SCSS
@import"compass";
.message {
@includebackground(linear-gradient(top, #9b9592, #e79e23 75%,#3c3733));
}
CSS
.message {
background: -webkit-gradient(linear, 50% 0%,50% 100%, color-stop(0%,#9b9592),
color-stop(75%, #e79e23), color-stop(100%, #3c3733));
background: -webkit-linear-gradient(top, #9b9592, #e79e23 75%,#3c3733);
background: -moz-linear-gradient(top,#9b9592, #e79e23 75%,#3c3733);
background: -o-linear-gradient(top, #9b9592,#e79e23 75%, #3c3733);
background: linear-gradient(top, #9b9592,#e79e23 75%, #3c3733);
}
Sass and Compass Workshop - ©2014 Shaho Toofani
- 153. Compass Mixins
— Text shadow with default values
SCSS
@import"compass";
$default-text-shadow-color: #ccc;
$default-text-shadow-blur: 0;
$default-text-shadow-h-offset: 3px;
$default-text-shadow-v-offset: 4px;
SCSS
.headline {
@includetext-shadow;
}
CSS
.headline {
text-shadow: 3px4px 0 #cccccc;
}
More...
Sass and Compass Workshop - ©2014 Shaho Toofani
- 154. Compass Mixins
— Multiple columns
SCSS
@import"compass";
p.three-cols {
@includecolumn-count(4);
@includecolumn-gap(100px);
@includecolumn-rule(1px, dotted, lighten(blue, 14%));
}
CSS
p.three-cols {
-moz-column-count: 4;
-webkit-column-count: 4;
column-count: 4;
-moz-column-gap: 100px;
-webkit-column-gap: 100px;
column-gap: 100px;
-moz-column-rule: 1px dotted #4747ff;
-webkit-column-rule: 1px dotted #4747ff;
column-rule: 1pxdotted#4747ff;
}
Sass and Compass Workshop - ©2014 Shaho Toofani
- 155. Compass mixins
— Clearfix, different approaches
SCSS
@import"compass";
.box{
@includeclearfix;
}
CSS
.box {
overflow: hidden;
*zoom: 1;
}
SCSS
@import"compass";
.other-box{
@includepie-clearfix;
}
CSS
.other-box{
*zoom: 1;
}
.other-box:after {
content: "";
display: table;
clear: both;
}
Micro clearfix hack
Sass and Compass Workshop - ©2014 Shaho Toofani
- 156. Compass's text replacement mixins
— The hide-text mixin
SCSS
@import"compass";
.hideme{
@includehide-text;
}
CSS
.hideme {
text-indent: -119988px;
overflow: hidden;
text-align: left;
}
Sass and Compass Workshop - ©2014 Shaho Toofani
- 157. Compass's text replacement mixins
— The squish-text mixin
squish-text isto squish text inline if youwant it tobe visually hidden but still accessible toscreen
readers.
SCSS
@import"compass";
.ir{
@includesquish-text;
}
CSS
.ir{
font: 0/0 serif;
text-shadow: none;
color: transparent;
}
Sass and Compass Workshop - ©2014 Shaho Toofani
- 158. Compass mixins
— General utilities
Browser Hacks
Clearfxes
Resets
— Element styles
Links
Lists
Float
Tables
Text
— CSS3
gradients
background-size
border-radius
box-shadow
box-sizing
CSS3 PIE
font-face
opacity
transform
transition
more...
Sass and Compass Workshop - ©2014 Shaho Toofani
- 159. Enable relative assets
ruby
# Toenablerelative paths toassetsviacompass helper functions. Uncomment:
relative_assets= true
Thissetting (not enabledby default sojust uncomment it) allowsCompass helpers to know that if an
image is specified (for example), it knows where to find it relative tothe CSS
— For example
CSS
background-image: url('../img/image.jpg');
— Do:
SCSS
background-image: image-url('image.jpg');
Sass and Compass Workshop - ©2014 Shaho Toofani
- 160. Compass Helper functions
— Example with helper functions
SCSS
@import"compass";
header {
background: image-url('header-bg.png');
h1 {
width:image-width('logo.png');
height:image-height('logo.png');
background:inline-image('logo.png')
}
}
CSS
header {
background: url('/images/header-bg.png?1351…');
}
header h1 {
width: 220px;
height: 100px;
background: url('data:image/png;base64...');
}
Sass and Compass Workshop - ©2014 Shaho Toofani
- 161. The Compass cache buster
N O T E !
The Compass cache buster; it prevents browserscachingassetswhen they have changed (the value
changeseach time the image'smodification time changes).
CSS
background-image: url('../img/logo-small.png?1357598801');
To disable it on acase-by-case basis you can do this:
SCSS
background-image: image-url("logo-small.png", false);
To disable it globally, readmore ...
Sass and Compass Workshop - ©2014 Shaho Toofani
- 162. Compass Helper functions
— Opposite Position
Returnsthe opposite side (or pair):
SCSS
@import"compass";
$opposite:opposite-position(top); //bottom
$opposite:opposite-position(left); //right
$opposite:opposite-position(right bottom); //left top
Sass and Compass Workshop - ©2014 Shaho Toofani
- 163. Compass Helper functions
— Using opposite-position - CSS shapes:
CSS
.arrow {
border: 50pxsolid transparent;
border-bottom: 50pxsolid #ff4136;
border-top: 0;
height: 0;
width: 0;
}
CSS Triangle
SCSS
@import"compass";
@mixin arrow($point) {
$opposite:opposite-position($point);
border: 50px solid transparent;
border-#{$opposite}: 50px solid
#ff4136;
border-#{point}: 0;
height: 0;
width: 0;
}
.arrow {
@includearrow(top);
}
Sass and Compass Workshop - ©2014 Shaho Toofani
- 165. Compass image sprites
— Spriting with Compass
Generates the sprite map & the CSS
Easy to configure classes, spacing, etc
Adda new image? updates automatically
SCSS
@import"compass";
@import"my-icons/*.png";
@include all-my-icons-sprites;
CSS
.my-icons-sprite,
.my-icons-delete,
.my-icons-edit,
.my-icons-new,
.my-icons-save { background: url('/images/my-icons-s34fe0604ab.png') no-repeat; }
.my-icons-delete { background-position: 0 0; }
.my-icons-edit { background-position: 0 -32px; }
.my-icons-new { background-position: 0 -64px; }
.my-icons-save { background-position: 0 -96px; }
Sass and Compass Workshop - ©2014 Shaho Toofani
- 166. Additional sprite configuration options
— Add the height and width to each generated HTML selector
SCSS
$my-icons-sprite-dimensions:true;
CSS
.my-icons-save {
background-position: 0 -96px;
height: 32px;
width: 32px;
}
— Extra padding around the images
SCSS
$my-icons-spacing: 10px;
Spriting with Compass, Read more ...
Sass and Compass Workshop - ©2014 Shaho Toofani
- 167. Creating data URIs from images
— The inline-image syntax
SCSS
@import"compass";
.logo {
background-image: inline-image("svg/logo.svg");
}
— CSS generated by that rule (truncated for brevity)
CSS
.logo {
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmN...
— Easy fallbacks for non-SVG capable devices
SCSS
.logo {
background-image: inline-image("svg/logo.svg");
.no-svg &{
background-image:image-url("png/logo.png");
}
}
Sass and Compass Workshop - ©2014 Shaho Toofani
- 168. Susy grid system
The homepage for Susy is http://susy.oddbird.net/
— Installing the Susy Compass plugin
ruby
geminstallsusy
ruby
Fetching: susy-1.0.9.gem (100%)
Successfully installedsusy-1.0.9
1 gem installed
— Including Susy in a project
Open the config.rb file and enter the followingline at the top:
ruby
require "susy"
Sass and Compass Workshop - ©2014 Shaho Toofani
- 170. Resources
Manning: Sass and Compassin Action
thesassway.com
Sassfor Web Designers
SassStyle Guide
Create a CSS grid using calc()
Advanced SASS Mixins & Color Functions
The ExtendConcept
Sass& CompassColor Functions
Sass: Mixin or Placeholder?
Understanding Sasslists
Handy AdvancedSass
Having fun with Sass lists and strings
IE-friendly mobile-first CSS with Sass 3.2
Sasstag on hongkiat.com
Sass and Compass Workshop - ©2014 Shaho Toofani
- 171. That's it
By |Shaho Toofani @shaho
By becomingweb
developers, youagreedon
stayingupto date with all
the new cool stuff. Someone
said!
Sass and Compass Workshop - ©2014 Shaho Toofani