lers review ular compi pop CSS

lers review ular compi & pop

CSS : anything but DRY

Don’t Procrastinate, Preprocess

INSTALLATION: LESS • Go get yourself a copy of less. js; • Create a file to put your styles in, such as style. less; • Add the following code to your HTML’s :

INSTALLATION: SASS • Needs Ruby in order to work(in Mac this has been pre-installed, but in Windows you probably need to get it installed before you can start playing with Sass) • Sass needs to be installed through the Terminal(Mac) or Command Prompt(Windows): gem install sass

START USING SASS A simple command via the command line. A desktop app (there are several) that will help you manage your Sass files and their output. $ sass --watch mystyledshit. scss: mystyledshit. css ($ sass --watch stylesheets/sass: stylesheets – for whatching the whole directory) >>> Sass is watching for changes. Press Ctrl-C to stop.

Popular Preprocessors • Code. Kit (Paid) • Compass. app (Paid, Open Source) • Hammer (Paid) • Koala (Open Source) • Live. Reload (Paid, Open Source) • Mixture (Free) • Prepros (Paid) • Scout (Open Source)

CHOOSING AN OUTPUT STYLE LESS (no options) SASS ü Nested (the default) ü Expanded ü Compact ü Compressed

Nested (the default) ol { margin: 10 px 0; padding: 10 px 0; } ol li { font-size: 2 em; line-height: 1. 4; } ol li p { color: #333; } Expanded ol { margin: 10 px 0; padding: 10 px 0; } ol li { font-size: 2 em; line-height: 1. 4; } ol li p { color: #333; } $ sass --watch --style expanded screen. scss: screen. css

Compact Compressed ol { margin: 10 px 0; padding: 10 px 0; } ol li { font-size: 2 em; line-height: 1. 4; } ol li p { color: #333; } ol{margin: 10 px 0; padding: 10 px 0; }ol li{font- » size: 2 em; line-height: 1. 4; }ol li p{color: #333; } $ sass --watch --style compressed screen. scss: screen. css $ sass --watch --style compact screen. scss: screen. css

rules esting N SASS/LESS nav { margin: 50 px auto 0; width: 788 px; height: 45 px; ul { padding: 0; margin: 0; } }

ROPERTIES ESPACED P TING NAM NES LESS SASS

nesting properties that share a namespace (e. g. , font-family, font-size, font-weight, etc. ): font: bold 54 px Jubilat, Georgia, serif;

background: #ea 4 c 89 url(sasquatch. png) no-repeat top left;

Variables

MIXINS

Mixins are functions that allow the reuse of properties throughout the stylesheet.

Compass has a mixin called background. It's so robust, that you can pass just about whatever you want to that thing that it will output what you need. Images, gradients, and any combination of them comma-separated, and you'll get what you need (vendor prefixes and all)

Mixin arguments Multiple arguments

Defining defaults for arguments

LESS’s "guarded mixins. "

Inheritance: LESS Instead of adding multiple selectors to one set of properties, it treats inheritance like a mixin without arguments and imports the styles into their own selectors.

Inheritance: SASS

Color Functions

OPERATIONS Both Sass and LESS can do basic math operations, but sometimes they return different results. See how they perform this random calculation:

SO THEN I TOLD HER BITCH YOU’D BETTER USE SASS