Preprocess

From Things and Stuff Wiki
(Redirected from SCSS/Compass)
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
Usage: compass help [command]

Description:
  The Compass Stylesheet Authoring Framework helps you
  build and maintain your stylesheets and makes it easy
  for you to use stylesheet libraries provided by others.

Donating:
  Compass is charityware. If you find it useful please make
  a tax deductable donation: http://umdf.org/compass

To get help on a particular command please specify the command.

Primary Commands:
  * clean       - Remove generated files and the sass cache
  * compile     - Compile Sass stylesheets to CSS
  * create      - Create a new compass project
  * init        - Add compass to an existing project
  * watch       - Compile Sass stylesheets to CSS when they change
Other Commands:
  * config      - Generate a configuration file for the provided command line options.
  * extension   - Manage the list of compass extensions on your system
  * frameworks  - List the available frameworks
  * grid-img    - Generates a grid background image.
  * help        - Get help on a compass command or extension
  * imports     - Emit an imports suitable for passing to the sass command-line.
  * install     - Install an extension's pattern into your compass project
  * interactive - Interactively evaluate SassScript
  * sprite      - Generate an import for your sprites.
  * stats       - Report statistics about your stylesheets
  * unpack      - Copy an extension into your extensions folder.
  * validate    - Validate your generated css.
  * version     - Print out version information
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

node.js

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
  • GSS (Grid Style Sheets) reimagines CSS layout & replaces the browser’s layout engine with one that harnesses the Cassowary Constraint Solver — the same algorithm Apple uses to compute native layout. [2]



  • Harp serves Jade, Markdown, EJS, CoffeeScript, Sass, LESS and Stylus as HTML, CSS & JavaScript—no configuration necessary. The static web server with built-in preprocessing.


  • https://github.com/reworkcss/rework - CSS manipulations built on css, allowing you to automate vendor prefixing, create your own properties, inline images, anything you can imagine!




PostCSS

  • https://github.com/postcss/postcss - a tool for transforming styles with JS plugins. These plugins can lint your CSS, support variables and mixins, transpile future CSS syntax, inline images, and more. PostCSS is used by industry leaders including Wikipedia, Twitter, Alibaba, and JetBrains. The Autoprefixer PostCSS plugin is one of the most popular CSS processors. PostCSS takes a CSS file and provides an API to analyze and modify its rules (by transforming them into an Abstract Syntax Tree). This API can then be used by plugins to do a lot of useful things, e.g., to find errors automatically, or to insert vendor prefixes.



Future

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