* 2; padding: 0 $page-padding; margin-top: 37px; } NUMBERS • Use name to provide more context • Always equation if a number is calculated • If not a variable, numbers should be considered arbitrary values SCSS 7 Thursday, March 15, 12
L Regular", Times, "Times New Roman", serif; $serif-alt: Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif", "Bitstream Vera Serif", "Liberation Serif", Georgia, serif; $sans-serif-default: Frutiger, "Frutiger Linotype", Univers, Calibri, "Gill Sans", "Gill Sans MT", "Myriad Pro", Myriad, "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif; FONTS • Build a library of common font stacks • Just a list of strings (separated by space or comma) http://www.sitepoint.com/eight-definitive-font-stacks/ SCSS 9 Thursday, March 15, 12
} h2 { @extend h1; font-size: 1.5em; } } .home-page { @extend .my-layout; } .about-page { @extend .my-layout; } .login-page { @extend .my-layout; } .register-page { @extend .my-layout; } SCSS Note: a fix was pushed shortly after this presentation to reduce the number of selectors created by @extend: https://github.com/nex3/sass/commit/8f4869e608e70d7f468bb463ebfe7a939d834e27 25 Thursday, March 15, 12
{ @extend .ccc; } .aaa .bbb .ccc, .aaa .bbb .xxx .yyy .zzz, .xxx .yyy .aaa .bbb .zzz { margin: 1px; } DANGERS • Pay attention to CSS output; because, • Selector length can grow wildly out of control • This is less of an issue than it was SCSS CSS Note: a fix was pushed shortly after this presentation to reduce the number of selectors created by @extend: https://github.com/nex3/sass/commit/8f4869e608e70d7f468bb463ebfe7a939d834e27 26 Thursday, March 15, 12
// Layout Styles .wrapper /* styles here */ .sidebar /* styles here */ // Page-Specific Styles .home-page h1 color: red .about-page h1 color: white .contact-page h1 color: blue screen.sass Sass // Global Styles h1 /* styles here */ p /* styles here */ _global.sass 34 Thursday, March 15, 12
.mixin (@a) when (iscolor(@a)) { /* some stuff */ } .mixin (@a) when (isurl(@a)) { /* some stuff */ } .mixin (@a) when (ispercentage(@a)) { /* some stuff */ } TYPE CHECKING • unit types • px, %, em • entitity types • color, #, str, etc… LESS 45 Thursday, March 15, 12
nav { background: url(/images/nav_bg.png); } .logo { background: url( data:image/png;base64,iVBORw0KGgo...); } nav { background: url( http://cdn.example.com/images/nav_bg.png); } .logo { background: url( data:image/png;base64,iVBORw0KGgo...); } URL HELPERS • Relative paths for assets in development, absolute for production CDNs • Inline images and fonts Dev PRO SCSS CSS 51 Thursday, March 15, 12
mix($color-1, $color-2, [$weight]) Mixes two colors together. hsla($color, $alpha) Adds an alpha layer to any color value. lighten($color, $amount) Makes a color lighter. darken($color, $amount) Makes a color darker. saturate($color, $amount) Makes a color more saturated. desaturate($color, $amount) Makes a color less saturated. grayscale($color) Converts a color to grayscale. complement($color) Returns the complement of a color. invert($color) Returns the inverse of a color. COLOR FUNCTIONS • Add alpha to hex • Work in HSL, support IE • Find safe colors automagically 53 Thursday, March 15, 12
beausmith
masakaya
ncdc
inesmontani
baasie
cyberagentdevelopers
gaussbeam
usagimaru
madue
zakkerooni
ashapiro
sachag
lara
tammyeverts
marktimemedia
sergeychernyshev
quramy
stephaniewalter
hannesfritz
addyosmani
62gerente
honnibal
