* 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
tanasho
ashapiro
otanet
xuechunwu
oguemon
kei141
root_recruit
elsh
takuto_yonemichi
amishiratori
cyberagentdevelopers
elrns88
jmmastey
thoeni
bkeepers
bcantrill
marcduiker
andyhume
smashingmag
tammyeverts
jrom
chriscoyier
denniskardys
lara
