Assembling Sass Slides

8/20/2019 Assembling Sass Slides

1/162


2/162

___ FOUNDATIO


3/162

1.1Sass,NotSASS

1.2SCSS:SassyCSS

1.3Commenting

1.4Importing

1.5NestingSelectors

1.6TheParentSelector

1.7NestingPitfalls


4/162

1.1Sass,NotSASS

CSS is crafted to be simple,

but scaling simplicity is di ! cult .


5/1621.1Sass,NotSASS

At Scale! Slight variations of colors, fonts, numbers,

& other properties arise

! E! ective curbing of repetition can decline

! Stylesheet size may become unmanageable


6/1621.1Sass,NotSASS

Enter Sass! Syntactically Awesome Stylesheets

! Looks like CSS, but adds features to

combat shortcomings

! Preprocessor, like Co! eeScript & Haml:


7/162

! Created by Hampton Catlin

! Primary developers:

Nathan Weizenbaum & Chris Eppstein

! Baked into Rails

1.1Sass,NotSASS


8/162

Assembly Tip

SASS Sass


9/162

1.1Sass,NotSASS

1.2SCSS:SassyCSS

1.3Commenting

1.4Importing

1.5NestingSelectors


1.7NestingPitfalls


10/162

! Sassy CSS (.scss) is the default "le extension

! CSS is valid SCSS

! A second syntax (.sass) exists, but we'll focus on SCSS

for the course

1.2SCSS:SassyCSS


11/162

$main: #444;

.btn {

color: $main;

display: block;}

.btn-a {

color: lighten($main, 30%);

&:hover {

color: lighten($main, 40%);

}

}

.btn {

color: #444444;

display: block;

}

.btn-a { color: #919191;

}

.btn-a:hover {

color: #aaaaaa;

}

application.scss application.css

1.2SCSS:SassyCSS


12/162

Assembly Tip

Since CSS doubles as valid

SCSS, try writing stylesnormally & slowly incorporate

new techniques.


13/162

! Sass adds // for single line comments - not

output after compile

1.3Commenting

li i li i


14/162

// These comments will

// not be output to the

// compiled CSS file

/* This comment will */

/* This comment will */


1.3Commenting

li ti


15/162

/*

* Imports styles found in 'buttons.css'

* when the browser requests application.css

*/

@import "buttons.css";

application.css

1.4Importing


16/162

! The CSS @import rule has been avoided:

prevents parallel downloading

! @import with .scss or .sass happens

during compile rather than client-side

! File extension is optional

1.4 Importing

application scss


17/162

// Imports styles found in 'buttons.scss'

// when the compiler processes application.scss

@import "buttons";

application.scss

?

1.4 Importing


18/162

Partials

Adding an underscore creates a partial. Partials can be

imported, but will not compile to .css

1.4 Importing application scss


19/162

// Will import _buttons.sass, buttons.sass,

// _buttons.scss, or buttons.scss

@import "buttons";

application.scss

1.4 Importing


20/162

1.1Sass,NotSASS

1.2SCSS:SassyCSS

1.3Commenting

1.4Importing

1.5NestingSelectors


1.7NestingPitfalls

application.css


21/162

.content {

border: 1px solid #ccc;

padding: 20px;

}

.content h2 { font-size: 3em;

margin: 20px 0;

}

.content p {

font-size: 1.5em;

margin: 15px 0;

}

application.css

1.5 Nesting Selectors application.cssapplication.scss


22/162

application.css

.content {


padding: 20px;

}


margin: 20px 0;

}

.content p {

font-size: 1.5em;

margin: 15px 0;

}

.content {


padding: 20px;

}


margin: 20px 0;

}

.content p {

font-size: 1.5em;

margin: 15px 0;

}

application.scss

1.5 Nesting Selectors

}

.content

.content

application.cssapplication.scss


23/162

pp

.content {


padding: 20px;

}


margin: 20px 0;

}

.content p {

font-size: 1.5em;

margin: 15px 0;

}

.content {


padding: 20px;

pp

1.5 Nesting Selectors

}

.content.content

h2 {

font-size: 3em; margin: 20px 0;

}

p {

font-size: 1.5em;

margin: 15px 0;

}

i i


24/162

.btn {

text: {

decoration: underline;

transform: lowercase;

}

}

.btn {

text-decoration: underline;

text-transform: lowercase;

}


Nesting Properties

Certain properties with matching namespaces are nestable:

1.5 Nesting Selectors While nesting the & s mbol references the parent selector:


25/162

1.6 The Parent Selector

While nesting, the & symbol references the parent selector:

.content {

border: 1px solid #ccc; padding: 20px;

}

.content {

border: 1px solid #ccc; padding: 20px;

}


.callout {

border-color: red;

}

&.callout {

border-color: green;

}

.content .callout {

border-color: red;

}

.content.callout {

border-color: green;

}



26/162

a {

color: #999;

&:hover {

color: #777;

} &:active {

color: #888;

}

}

a {

color: #999;

}

a:hover {

color: #777;}

a:active {

color: #888;

}


P t S l t N ti


27/162

Parent Selector Nesting

Selectors can also be added before the & reference:

.sidebar {

float: right;

width: 300px;

}

.users .sidebar {

width: 400px;

}

application.css




28/162

.sidebar {

float: right;

width: 300px;

{

width: 400px; }

}

.sidebar {

float: right;

width: 300px;

}

.users .sidebar { width: 400px;

}


.users &



29/162

.sidebar {

float: right;

width: 300px;

h2 {

color: #777;

.users & {

color: #444;

}

}

}

.sidebar {

float: right;

width: 300px;

}

.sidebar h2 {

color: #777;

}

.users .sidebar h2 {

color: #444;

}

1 6 The Parent Selector

! Nesting is easy but dangerous


30/162

! Nesting is easy, but dangerous

! Do not nest unnecessarily

1 7NestingPitfalls



31/162

.content {

background: #ccc;

.cell {

h2 {

a {

&:hover {

color: red;

}

}

}

}

}

.content {

background: #ccc;

}

.content .cell h2 a:hover {

color: red;

}

1.7NestingPitfalls

Assembly Tip


32/162

Assembly Tip

Try limiting your nesting to 3

or 4 levels and considerrefactoring anything deeper.


33/162

___ VARIABLE

2 1 Variable Declaration + Use


34/162

2.1VariableDeclaration+Use

2.2Types

2.3Scope

2.4Interpolation

! Native CSS variable support is still in its infancy,


35/162

Native CSS variable support is still in its infancy,

but Sass a! ords us a way to set reusable values

! Variable names begin with $, like $base



36/162

The Default Flag


37/162

$title: 'My Blog';

$title: 'About Me'

h2:before {

content: $title;

}

h2:before {

content: 'About Me';

}


The Default Flag

Variable de"nitions can optionally take the !default #ag:


;



38/162

h2:before {

content: 'My Blog';

}


$title: 'My Blog';

$title: 'About Me'

h2:before {

content: $title;

}

!default;

application.scss _buttons.scss


39/162

$rounded: 5px;

@import "buttons";


$rounded: 3px !default;

.btn-a {

border-radius: $rounded;

color: #777;

}

.btn-b {

border-radius: $rounded;

color: #222;

}



40/162

$rounded: 5px;

@import "buttons";


.btn-a {

border-radius: 5px;

color: #777;

}

.btn-b {

border-radius: 5px;

color: #222;

}

Booleans


41/162

$rounded: false;

$shadow: true;

2.2Types

$rounded: 4px;

$line-height: 1.5;

$font-size: 3rem;

Numbers - can be set with or without units:

Colors


42/162

$base: purple;

$border: rgba(0, 255, 0, 0.5);

$shadow: #333;

2.2Types

$header: 'Helvetica Neue';

$callout: Arial;

$message: "Loading...";

Strings - can be set with or without quotes:

Lists


43/162

$authors: nick, dan, aimee, drew;

$margin: 40px 0 20px 100px;

2.2Types

$shadow: null;

Null



44/162

2.2Types

2.3Scope2.4Interpolation



45/162

p {

$border: #ccc;

border-top: 1px solid $border;

}

h1 {

border-top: 1px solid $border;}

Syntax error: Undefined

variable: "$border"

2.3Scope

Reassignment in a Declaration


46/162

2.3Scope

g! Variables set inside a declaration (within { }) aren't

usable outside that block

!

Setting new values to variables set outside adeclaration changes future instances



47/162

$color-base: #777777;

.sidebar {


background: $color-base;

}

.sidebar {

background: #222222;

}

2.3Scope

p {

color: #222222;

}p {

color: $color-base;

}

Use the Ruby-esque #{$variable} to shim variables

l d


48/162

$side: top;

sup {

position: relative;

#{$side}: -0.5em;

}

sup { position: relative;

top: -0.5em;

}


2.4Interpolation

into selectors, property names, and strings:

.callout-#{$side} {

background: #777;

}

.callout-top {

background: #777;

}

Assembly Tip


49/162

y p

Be considerate of variable

naming. $color-base gets a lot more mileage

than $color-blue.


50/162

___ MIXIN

3.1MixinSetup+Use


51/162

3.2AddingArguments

3.3MultipleArguments

3.4VariableArguments

3.5Interpolation+Mixins

application.css


52/162

.btn-a {

background: #777;


font-size: 1em;

text-transform: uppercase;

}.btn-b {

background: #ff0;


font-size: 1em;


}

3.1MixinSetup+Use

]

]

Mixins


53/162

@mixin button {

}

_buttons.scss

Blocks of reusable code that take optional arguments:

3.1MixinSetup+Use


font-size: 1em;


_buttons.scss

b {

application.css

@ i i b tt {


54/162

.btn-a {


font-size: 1em;


background: #777;

}

3.1MixinSetup+Use

@mixin button {

}


font-size: 1em;


.btn-a { @include button;

background: #777;

}

.btn-b {

@include button;

background: #ff0;

}

.btn-b {


font-size: 1em;


background: #ff0;

}

Assembly Tip


55/162

Make sure the @mixin block

comes before the @include,especially when importing

"les containing mixins.

Assembly Tip


56/162

@include = use a mixin

@import = import a "le

@mixin button {

_buttons.scss

btn a {

application.css


57/162

@mixin button {


font-size: 1em;


}

.btn-a { @include button;

background: #777;

}

.btn-b {

@include button;

background: #ff0;

}

.btn-a {


font-size: 1em;


background: #777;

}.btn-b {


font-size: 1em;


background: #ff0;

}

3.1MixinSetup+Use

We're Just Repeating Properties


58/162

.btn-a,

.btn-b {

background: #777;


font-size: 1em;


}

.btn-b { background: #ff0;

}

application.css

It's more e$cient to use CSS here (for now):

3.1MixinSetup+Use

If that's the case, what are


59/162

mixins good for then?

3.1MixinSetup+Use

.content {

application.css


60/162

.content {

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

box-sizing: border-box;


padding: 20px;}

3.2AddingArguments

.content {

application.css

@mixin box-sizing {

application.scss


61/162

.content {

-webkit-box-sizing:

-moz-box-sizing: bor

box-sizing: border-b

border: 1px solid #c

padding: 20px;}

@mixin box sizing {

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

box-sizing: border-box;

}

3.2AddingArguments

.content { @include box-sizing;


padding: 20px;

}


62/162

application.scss

.content {

application.css

@mixin box-sizing {($x)


63/162

.co te t {

-webkit-box-sizing:




padding: 20px;}

3.2AddingArguments

.content { @include box-sizing(border-box);


padding: 20px;

}

@ g {

-webkit-box-sizing:

-moz-box-sizing:

box-sizing:

}

($ )

$x;

$x;

$x;

.callout {

@include box-sizing(content-box);

}

.callout {

-webkit-box-sizing: -moz-box-sizing: con

box-sizing: content-

}

Default Values

O i ll h ill d f l if i l d d


64/162

@mixin box-sizing($x ) {

-webkit-box-sizing: $x;

-moz-box-sizing: $x;

box-sizing: $x;

}

application.scss

Optionally, what arguments will default to if not included:

3.2AddingArguments

: border-box

application.scss

.content {

application.css

@mixin box-sizing($x ) {: border-box


65/162

{

-webkit-box-sizing:




padding: 20px;}

3.2AddingArguments

.content { @include box-sizing;


padding: 20px;

}

.callout {

@include box-sizing(content-box);

}

g( )

-webkit-box-sizing: $x;

-moz-box-sizing: $x;

box-sizing: $x;

}

.callout {

-webkit-box-sizing: -moz-box-sizing: con

box-sizing: content-

}

3.1MixinSetup+Use


66/162

3.2AddingArguments




@mixin button(

_buttons.scss

.btn-a {

application.css

$radius, $color) {


67/162

border-radius: $radius;

color: $color;

}

.btn-a {

@include button(

border-radius: 4px

color: #000;

}


4px, #000);}

_buttons.scss

Syntax error: Mixin

application.css

@mixin button($radius, $color) {


68/162

missing argument $co



color: $color;

}

.btn-a {

@include button(4px);}

@mixin button(

_buttons.scss

.btn-a {

application.css

$radius, $color ) {: #000


69/162


color: $color;

}

.btn-a {

@include button(

border-radius: 4px

color: #000;

}


4px);}

_buttons.scss

Syntax error: Requir

application.css

@mixin button(

i $ i

$color: #000, $radius) {


70/162

$color must come bef

optional arguments.



color: $color;

}

.btn-a {

@include button(4px);}

_buttons.scss

.btn-a {

b d di

application.css

@mixin button(

b d di $ di

$radius, $color: #000) {


71/162

border-radius: 5px

color: #777777;

}



color: $color;

}

.btn-a {

@include button( $color: #777777,$radius: 5px);

}

.btn-a {

bkit t iti l 0 3 i b k d 0 5

application.css


72/162

-webkit-transition: color 0.3s ease-in, background 0.5s ease-

-moz-transition: color 0.3s ease-in, background 0.5s ease-out

transition: color 0.3s ease-in, background 0.5s ease-out;

}


buttons.scss application.css

Passing valid, comma-separated CSS as a single value:


73/162

@mixin transition(

-webkit-transition: $val;

-moz-transition: $val; transition: $val;

}

Mixin transition takes

argument but 2 were pa

_buttons.scss application.css


) {$val

.btn-a {

@include transition(color 0.3s

ease-in, background 0.5s ease-out);

}


74/162

buttons.scss application.css

Variable arguments in reverse:


75/162

@mixin button($radius, $color) {


color: $color;}

.btn-a {

border-radius: 4px;

color: #000;}

_ pp


$properties: 4px, #000;

.btn-a {

@include button($properties...);

}

@mixin

_buttons.scss

.btn-a {

border right color

application.css

highlight-t($color) {

border-top-color: $color;


76/162

} border-right-color

}


@mixin highlight-r($color) {

border-right-color: $color;

}

@mixin highlight-b($color) {

border-bottom-color: $color;

}

@mixin highlight-l($color) {

border-left-color: $color;

}

.btn-a {

@include highlight-r(#ff0);

}

border-top-color: $color;

_buttons.scss

.btn-a {

border right color

application.css

@mixin highlight($color, $side) {

border-#{$side}-color: $color;


77/162

border-right-color

}


}

.btn-a {

@include highlight(#ff0, right);

}

border #{$side} color: $color;


78/162

___ EXTEND

4.1ExtendSetup+Use

4 2 Nesting + Extend


79/162

4.2Nesting+Extend

4.3ExtendPitfalls

4.4PlaceholderSelectors

.btn-a {

background: #777;

application.css

.btn-a,

.btn-b {

application.css


80/162

g ;


font-size: 1em;


}.btn-b {

background: #ff0;


font-size: 1em;


}

4.1ExtendSetup+Use

.bt b {

background: #777;


font-size: 1em;

text-transform: uppercase;}

.btn-b {

background: #ff0;

}

ExtendSass will track and automatically combine selectors for us:


81/162

application.css

.btn-a { background: #777;


font-size: 1em;


}

_buttons.scss

y

4.1ExtendSetup+Use

.btn-a,

.btn-b {

background: #777;


font-size: 1em;

text-transform: uppercase;}

.btn-b { background: #ff0;

}

.btn-b {

@extend .btn-a; background: #ff0;

}


82/162

4.1ExtendSetup+Use

.btn-a,

.btn-b {

}.btn-b {

}

...

....btn-b {

@extend .btn-a; background: #ff0;

}

.content {


application.scss

.content,

.callout {

application.css


83/162

padding: 20px;

h2 {

font-size: 3em;

margin: 20px 0; }

}

4.2Nesting+Extend

.callout {

@extend .content;

background: #ddd;

}


padding: 20px;

}

.content h2,.callout h2 {

font-size: 3em;

margin: 20px 0;

}

.callout {background: #ddd;

}

.content,

callout {


84/162

.callout {

@extend .content; background: #ddd;

}

4.2Nesting+Extend

.callout { ...

}

.content h2,

.callout h2 { ...

}

.callout {

...

}

4.1ExtendSetup+Use

4.2 Nesting + Extend


85/162

4.2Nesting+Extend

4.3ExtendPitfalls


.btn-a {

background: #777;

_buttons.scss

.btn-a,

.btn-b {

application.css


86/162


font-size: 1em;


}

.btn-b {

@extend .btn-a;

background: #ff0;

}

background: #777;


font-size: 1em;


}

.btn-b {

background: #ff0;

}

.sidebar .btn-a,

.sidebar .btn-b {


}

4.3ExtendPitfalls

.sidebar .btn-a {


}


87/162

Assembly Tip

Always always check the CSS


88/162

Always, always check the CSS

output of your Sass before

using it on a live site.

! Placeholder selectors are denoted with a %

! Can be extended, but never become a selector of

their own


89/162

their own


background: #777;


_buttons.scss

.btn-a,

.btn-b {

background: #777;

application.css

.btn-a {


90/162

font-size: 1em;


}


font-size: 1em;


}.btn-b {

background: #ff0;

}

.sidebar .btn-a,

.sidebar .btn-b {


}


.sidebar .btn-a {


}

.btn-b {

background: #ff0;

}

@extend .btn-a;

_buttons.scss

.btn-a,

.btn-b {

background: #777;

application.css

background: #777;


%btn {


91/162


font-size: 1em;


}.btn-b {

background: #ff0;

}


font-size: 1em;


}

.sidebar .btn-a {


}

.btn-a { @extend %btn;

}

.sidebar .btn-a {


}

.btn-b {

background: #ff0;

}

@extend %btn;


Extend common blocks to avoid extra HTML classes:


92/162

%ir {

border: 0;

font: 0/0 a;

text-shadow: none; color: transparent;

background-color: transparent;

}

.logo,

.social {

border: 0;

font: 0/0 a; text-shadow: none;

color: transparent;

background-color: trans

}


.logo {

@extend %ir;

}

.social {

@extend %ir;

}


93/162

DIRECTIVE


94/162

___ DIRECTIVE


95/162

Responsive Refresher! Straight from Journey Into Mobile:


96/162

5.1Functions

! If the target size of our sidebar is 350px and the

context of its parent is 1000px:

350px / 1000px = 0.35

0.35 * 100 = 35%

target / context

@function fluidize(

}

application.scss

.sidebar {

width: 35%;

}

application.css

) {

@return 35%;


97/162

} }

5.1Functions

.sidebar {

width: fluidize(

}

);

application.scss

.sidebar {

width: 35%;

}

application.css

@function fluidize(

}

) {

@return ($target / $context) * 100%;

$target, $context


98/162

}

5.1Functions

}

.sidebar {

width: fluidize(

}

);350px, 1000px

! More on responsive design + Sass later, including abuilt-in fluidize replacement

! Function arguments = same rules as mixin arguments


99/162

5.1Functions

g g

$theme: dark; header {


Using @if, we can conditionally output code:


100/162

$theme: dark;

header {

header {

background: #000;

}

5.2If

@if $theme == dark { background: #000;

}

}

Comparisons! == equal to

! t l t


101/162

! != not equal to

! > greater than *

! >= greater than or equal to *

! < less than *

!


102/162

$theme: light;

header {

5.2If


}

}

application.scss

header {

application.css

@else provides a fallback if everything evaluates false or n

$theme: light;


103/162

eade {

background: #fff;

}

5.2If

$t e e: g t;

header {


}

}

} @else {

background: #fff;

application.scss

header {

application.css

@else if allows for multiple comparisons:

$theme: pink;


104/162

{

background: pink;

}

5.2If

$ p ;

header {


}

}

} @else {

background: #fff;

} @else if $theme == pink {

background: pink;

5.1Functions

5.2If


105/162

5.3Each

5.4For+While

5.5Mixin'In

Interating Over a List! The @each directive allows us to loop through each

list item:


106/162

5.3Each

$authors: nick aimee dan drew;

$authors: nick aimee dan drew;

@each $author in $authors {

application.scss

.author-nick {

background: url(author-ni

}

th i {

application.css

author #{$author} {


107/162

}

.author-aimee {

background: url(author-ai

}

.author-dan { background: url(author-da

}

.author-drew {

background: url(author-dr

}

5.3Each

1: nick

2: aimee

3: dan4: drew

$author

background: url(author-

#{$author}.jpg);

.author-#{$author} {

}

.item {

position: absolute;

right: 0;

@for $i from 1 through 3 {

application.scss

.item {

position: absolute;

right: 0;

}

application.css


108/162

@for $i from 1 through 3 {

}

}

}

.item.item-1 {

top: 30px;

}.item.item-2 {

top: 60px;

}

.item.item-3 {

top: 90px;

}

5.4For+While

1: 1

2: 23: 3$i

top: $i * 30px;

&.item-#{$i} {

}

!

@for and @while = @each with more control! @while requires manually updating the index


109/162

5.4For+While

$i: 1;

application.scss

.item {

position: absolute;

right: 0;

}

application.css

.item {

position: absolute;


110/162

}

.item.item-1 {

top: 30px;

}.item.item-2 {

top: 60px;

}

.item.item-3 {

top: 90px;

}

5.4For+While

1: 1

2: 2

3: 3

4: 4

$i

position: absolute;

right: 0;

}

@while $i < 4 {

}

&.item-#{$i} { top: $i * 30px;

}

$i: $i + 1;

application.scss

.item {

position: absolute;

right: 0;

}

application.css

$i: 2;

.item {

position: absolute;


111/162

}

.item.item-2 {

top: 60px;

}.item.item-4 {

top: 120px;

}

.item.item-6 {

top: 180px;

}

5.4For+While

position: absolute;

right: 0;

}

@while $i


112/162

Mixins Extend Functio

! Similar sets of

properties used

! Sets of properties

that match exactly

! Comm

operat


113/162

properties used

multiple times with

small variations

that match exactly operat

determ

5.5Mixin'In

@mixin button($color, $rounded:

color: $color;

_buttons.scss

.btn-a {

color: black;

}

application.css

) {true

@if $rounded

{== true

border-radius: 4px; .btn-b {


114/162

}

5.5Mixin'In

.btn-a { @include button(#000, false);

}

.btn-b {

@include button(#333);

}

}

p ; {

color: #333333;

border-radius: 4

}

_buttons.scss

.btn-a {

color: black;

}

application.css

@mixin button($color, $rounded:

color: $color;

) {false

@if $rounded

{

border-radius: $rounded; .btn-b {


115/162

5.5Mixin'In

}

.btn-a { @include button(#000);

}

.btn-b {

@include button(#333, 4px);

}

}

; {

color: #333333;

border-radius: 4

}

MATH + COL


116/162

___ MATH + COL

6.1BasicArithmetic

6.2DifferingUnits


117/162

6.3MathFunctions

6.4Math+Color

6.5ColorShortcuts

6.6ColorFunctions

Number Operations! + addition

! - subtraction


118/162

! * multiplication

! / division

! % modulo

6.1BasicArithmetic

Modulo = remainder from a division operation. 12 % 3

results in 0, while 12 % 5 returns 2.

Assembly Tip

Sass defaults to returning

( ) " di i f


119/162

(up to) "ve digits after a

decimal point.


120/162

Triggering Division! Variable involved - $size / 10

! Parenthesis - (100px / 20)


121/162

Parenthesis (100px / 20)

!

Another arithmetic operation - 20px * 5 / 2

6.1BasicArithmetic

$family: "Helvetica " + "Neue"; // "Helvetica Neue"

String AdditionAddition on strings concatenates them:


122/162

$family: Helvetica Neue ; // Helvetica Neue

6.1BasicArithmetic

$family: 'sans-' + serif // 'sans-serif'

$family: sans- + 'serif' // sans-serif

Initial left-side string determines post-concatenation quotes

h2 {

font-size: 10px + 4pt;

h2 {

font-size: 15.33333px;

application.scss application.cssIf the units di

! er, Sass attempts combination:


123/162

} }

6.2DifferingUnits


124/162

Pre-De!ned Math Utilities! round($number) - round to closest whole number

! ceil($number) - round up


125/162

! floor($number) - round down

! abs($number) - absolute value

! min($list) - minimum list value

! max($list) - maximum list value

!

percentage($number) - convert to percentage

6.3MathFunctions

h2 {

line-height: ceil(1.2);

h2 {

line-height: 2;


Called the same way as custom functions:


126/162

} }

6.3MathFunctions

.sidebar {

width: percentage(350px/1000px);

.sidebar {

width: 35%;


percentage() replaces our custom fluidize():


127/162

} }

6.3MathFunctions

$context: 1000px;

id b {

.sidebar {

width: 45%;


percentage() replaces our custom fluidize():


128/162

.sidebar {

width: percentage(450px/$context);

}

}

6.3MathFunctions

6.1BasicArithmetic

6.2DifferingUnits

6 3 Math Functions


129/162

6.3MathFunctions

6.4Math+Color

6.5ColorShortcuts

6.6ColorFunctions

Color Juggling! Easier recall through variables

! Simpli"ed alteration via color utility functions


130/162

! Faster representation using shorthand

6.4Math+Color


.addition {

background: $color-base + #112233;

}

application.scss

.addition {

background: #445566

}

application.css

.subtraction {

background: #221100


131/162

}

6.4Math+Color

.subtraction {

background: $color-base - #112233;}

.multiplication {

background: $color-base * 2;

}

.division {

background: $color-base / 2;

}

g #

}

.multiplication { background: #666666

}

.division {

background: #191919

}

Assembly TipWhere possible, use color

utility functions instead of


132/162

utility functions instead of

color arithmetic: easier to

predict and maintain.

$color: #333333;

.alpha {

background: rgba(51,51,51,0.8);

}

application.scss

.alpha {

background: rgba(51,51

}

application.css


133/162

6.5ColorShortcuts


134/162

6.1BasicArithmetic6.2DifferingUnits

6.3MathFunctions


135/162

6.4Math+Color

6.5ColorShortcuts

6.6ColorFunctions

Color utility functions:work " ow-altering convenience


136/162

6.6ColorFunctions

$color: #333;

.lighten {

color: lighten($color, 20%);

}

application.scss

.lighten {

background: #666666

}

application.css

.darken {

background: black;


137/162

6.6ColorFunctions

.darken {

color: darken($color, 20%);}

}

$color: #87bf64;

.saturate {

color: saturate($color, 20%);

}

application.scss

.saturate {

background: #82d54e

}

application.css

d {

.desaturate {

background: #323130


138/162

6.6ColorFunctions

.desaturate {

color: desaturate($color, 20%);

}

}

.mix-a {

color: mix(#ffff00, #107fc9);

}

application.scss

.mix-a {

background: #87bf64

}

application.css

.mix-b {

color: mix(#ffff00, #107fc9, 30%);

}

.mix-b {

background: #57a58c

}


139/162

6.6ColorFunctions

} }

$color: #87bf64;

.grayscale {

color: grayscale($color);

}

application.scss

.grayscale {

color: #929292;

}

application.css

i t {

.invert {

color: #78409b;

}


140/162

6.6ColorFunctions

.invert {

color: invert($color);

}

.complement {

color: complement($color);

}

}

.complement {

color: #9c64bf;

}

Assembly TipBut wait, there's more!http://sass-lang.com/docs/yardoc/Sass/Script/Functions.htm

http://sass-lang.com/docs/yardoc/Sass/Script/Functions.htmlhttp://sass-lang.com/docs/yardoc/Sass/Script/Functions.html


141/162

___ RESPONSIV


142/162

___


143/162

Responsive design rapidlyprogressed beyond good idea

and into common practice


144/162

7.1TheMovement

and into common practice

Media Queries! Easier #uid calculation and media query handling

! Journey Into Mobile


145/162

7.1TheMovement

application.css

Media QueriesBasic construction:


146/162

.sidebar {

border: 1px solid #ccc;}

@media (min-width: 700px) {

.sidebar {

float: right;

width: 30%;

}

}

7.1TheMovement

.sidebar {


}


.sidebar {

float: right;

application.css


147/162

float: right;

width: 30%;

}

}

7.2NestedMediaQueries

.sidebar {


}


.sidebar {

float: right;

application.css

.sidebar {


application.scss


float: right;

width: 30%;

}


148/162

g ;

width: 30%;

}

}

}


}

7.1TheMovement


7.3Respond-To


149/162

7.4ResponsivePitfalls

!

@content - pass a block ofproperties to a mixin


150/162

7.3Respond-To

.sidebar {


application.scss

.sidebar {

border: 1px solid #ccc

}

@media (min-width: 700px

.sidebar {

float: right;

application.css

}

float: right;

width: 30%;



151/162

width: 30%;

}

}

7.3Respond-To

}

@mixin respond-to

application.scss

.sidebar {


}


.sidebar {

float: right;

application.css

.sidebar {

{


@content

}}


152/162

width: 30%;

}

}

7.3Respond-To


}

}

float: right;

width: 30%;

@include respond-to {

@mixin respond-to

application.scss

.sidebar {


}


.sidebar {

float: right;

application.css

.sidebar {

{


@content

}}


153/162

width: 30%;

}}

7.3Respond-To


}

}

float: right;

width: 30%;

@include respond-to {


154/162

application.scss

.sidebar {


}


.sidebar {

float: right;

application.css

@mixin respond-to

.sidebar {

i #

{

@media (min-width: $query) {

@content

}}

($query)


155/162

width: 30%;

}}

7.3Respond-To


}

}

float: right;

width: 30%;

@include respond-to {(900px)

application.scss

.sidebar {


}

@media (max-width: 600px

.sidebar {

float: right;

id h 30

application.css

@mixin respond-to

.sidebar {

b d 1 lid #

{

@media ($val: $query) {

@content

}}

($val, $query)


156/162

width: 30%;

}}

7.3Respond-To

float: right;

width: 30%;


}

}

@include respond-to{

(max-width,600px)

7.1TheMovement


7.3Respond-To


157/162



158/162


.content {


}

.aside {

@extend .content;

width: 35%;

application.scss


.content,

.aside {


}

.aside {

width: 35%;

application.css


159/162

width: 35%;

}}

width: 35%;

}}


.sidebar {


width: 50%;

}


.sidebar {

width: 50%;

}


Matching media queries are not combined:


160/162

}

.callout {


width: 35%;

}

}

}


.callout {

width: 35%;

}

}


Sometimes, manual combination is best:


.sidebar {

width: 50%;

}

application.css


161/162


.callout {

width: 35%;

}

}


162/162

Assembling Sass Slides

Documents

Transcript of Assembling Sass Slides