Preprocess

From Things and Stuff Wiki
Revision as of 14:54, 8 June 2015 by Milk (talk | contribs) (→‎Future)
Jump to navigation Jump to search


Semantics

Sass

Basics

Articles

Video

Setup

Ruby

Init; 

gem install sass 
mv style.css style.scss 
sass --watch style.scss:style.css

sass --watch input.sass:output.css
sass --watch input-dir:output-dir
sass --watch .:../css

Sasson config.rb

prefered_syntax = :scss
http_path = '/'
css_dir = 'styles'
sass_dir = 'styles'
images_dir = 'images'
javascripts_dir = 'scripts'
relative_assets = true
line_comments = true

#output_style = :compressed
output_style = :expanded

PHP

old?: Don't forget to add to $PATH (i.e. /var/lib/gems/1.8/bin)

  • sassphp

node.js

libsass

Source Maps

Sprockets

Features

Variables

Variables: 

$blue: #3bbfce;
$margin: 16px;

.content-navigation {
  border-color: $blue;
  color:
    darken($blue, 9%);
}

.border {
  padding: $margin / 2;
  margin: $margin / 2;
  border-color: $blue;
}
_partial.sass
  partial files with a leading underscore,
  for inclusion in the compiled source

Functional Variable Names; 

// first we set descriptive variables:
$darkgrey: #333333;
$blue: #001eff;
 
// then we set functional variables:
$text_color: $darkgrey;
$link_color: $lightblue;
$border_color: $lightblue;
 
.myClass{
  color: $text_color;
  border-color: $border_color;
}
a{
  color: $link_color;
}
Colours

Nesting

table.hl {
  margin: 2em 0;
  td.ln {
    text-align: right;
  }
}

li {
  font: {
    family: serif;
    weight: bold;
    size: 1.2em;
  }
}

Mixins

@mixin table-base {
  th {
    text-align: center;
    font-weight: bold;
  }
  td, th {padding: 2px}
}

@mixin left($dist) {
  float: left;
  margin-left: $dist;
}

#data {
  @include left(10px);
  @include table-base;
}
  • SCSS Blend Modes - CSS doesn't natively support color blending the way that Photoshop does. This library attempts to fake that by allowing you to blend a foreground color with a background color in order to approximate color blending. This was originally intended for use with the Compass Photoshop Drop Shadow Plugin but it proved impractical to integrate.
  • sass-recipes - examples that you can use or modify to suit your needs.
    • CSS Arrows
    • Hover to View
    • Multi-Line Button
    • Progress Bar
    • Search Input
    • File Field Mask
  • Zocial is a CSS3 social buttons set and vector icons with @font-face as a Sass mixin and usable as a Compass extension.

Selector Inheritance

.error {
  border: 1px #f00;
  background: #fdd;
}
.error.intrusion {
  font-size: 1.3em;
  font-weight: bold;
}

.badError {
  @extend .error;
  border-width: 3px;
}

Placeholder Selector

%clearfix {
  overflow: none;
  *zoom: 1;
}

aside, footer {
  @extend %clearfix;
}

#grid-container {
  @extend %clearfix;
}

Produces: 

aside, footer, #grid-container {
  overflow: none;
  *zoom: 1;
}

Control Directives

Mixin Directives

etc

Extensions

Bourbon

Compass

Setup
  • Instal - Handy dropdown menu config.rb generator.
gem install compass
compass version
Basics
Gradients

The linear-gradient and radial-gradient mixins have been deprecated. Instead use the background-image mixin and pass it a gradient function. The deprecation warning will print out the correct call for you to use. 

@import "compass/css3/images"
Transitions
@include transition(color 0.2s ease-in);
@include transition(text-shadow 0.2s ease-in);
Other
Guides
Susy

"You can build grids of all kinds with Susy. Define you grid using any unit of measurement (ems, pixels, percentages, inches, etc.) and then determine how and when you want that grid responding to the viewport. Susy converts all internal grid-widths into percentages, so that once you have a grid it is able to respond and flex in any way you choose. How the grid responds depends on the outer container."

See Grid/rhythm#Susy

Vertical rhythm
Other

Units

Vertical rhythm

If you don't reset browser margin and padding defaults, you're gonna have a bad time (re jigging margin/padding normalisations), imho. To choose a method that manages this best.

vertical-rhythmic

Usage

1em and 1.5em are the defaults (16px being browser em default. line-height is normally 1.4em) 

$base-font-size: 1em;
$base-line-height: 1.5em;

@import "vertical-rhythmic";

@include $font-size()
  number $font-size   : font size, in ems
  integer $lines      : number of whitespace lines for the line-height
  Keeps base line proportions by default

first basic method; default-font-size: 0.9em and line-height: 1.4em h1 the space of two 1.4em lines 

 @include $font-size(1.5)

second basic; 

 font-size:1.5em;
 line-height:rhythm(auto,1.5em);

@include margin()
   integer $lines          : number of whitespace lines (default: 1)
   number $font-size       : actual font-size, in ems, to calculate with (default: 1em)
   integer $border-width   : width of additionnal borders around the box
   Useful to substract borders from the whitespace to not break the rhythm

@include margin-top
  integer $lines          : number of whitespace lines (default: 1)
  number $font-size       : actual font-size, in ems, to calculate with (default: 1em)
  integer $border-width   : width of additionnal borders around the box
  Useful to substract borders from the whitespace to not break the rhythm

@include margin-bottom
  etc.
@include padding
@include padding-top
@include padding-bottom
@include border
@include border-top
@include border-bottom
@include outline

h1 {
   @include font-size(1.5em);
}

// 2nd method

// rhythm() can be used directly

Other

Responsive

  • Breakpoint makes writing media queries in Sass super simple. Create a variable using a simplified syntax based on most commonly used media queries, then call it using the breakpoint mixin. Breakpoint handles all of the heavy lifting, from writing the media query itself, to handling cross-browser compatibility issues, so you can focus on what's important: making sure your website looks its best.

Drupal

Tools

Browser

LESS

  • LESS extends CSS with dynamic behavior such as variables, mixins, operations and functions. LESS runs on both the client-side (Chrome, Safari, Firefox) and server-side, with Node.js and Rhino.

Libs

PHP

Stylus

  • Stylus - Expressive, robust, feature-rich CSS language built for nodejs
  • nib - Stylus mixins, utilities, components, and gradient image generation

Myth

Other

  • csscrush - An extensible PHP based CSS preprocessor
  • PCSS - Shortcut-oriented Server-side CSS3 Preprocessor
    • Pre-defined CSS constants and PCSS functions to make the CSS writing more intuitive and to make the code slimmer and even more readable
    • Class nesting
    • Variables that can hold any kind of data
    • Default unit and default image directory to set for pre-defined functions
    • @font-face shortcut with server-side browser detection for slimmer resulting code
    • Browser-specific shortcuts are detected on server-side to avoid redundant commands (like many "-webkit", "-moz", etc.)
    • Minifies the resulting CSS file
    • PHP5

Future

Retrieved from "https://wiki.thingsandstuff.org/index.php?title=Preprocess&oldid=30602"