ScalaCSS

Settings

The first thing you'll want to do is import some settings by using one of these import statements:

import scalacss.DevDefaults._  // Always use dev settings
import scalacss.ProdDefaults._ // Always use prod settings

// This will choose between dev/prod depending on:
//   1. `sbt -Dscalacss.mode=dev` or `sbt -Dscalacss.mode=prod`
//   2. Defaults to dev-mode unless in `fullOptJS`
//
val CssSettings = scalacss.devOrProdDefaults
import CssSettings._

This provides two sets of sensible settings: development and production.

Property Dev Prod
Style conflicts Keep both sides of conflict.
Issue warnings.		 Keep both sides of conflict.
Error handling Print to stderr Ignore
Class name generation .<class>-<val>
Eg. .MyStyles-outer		 ._a0
._a1
etc
CSS output Pretty-print.
Indents, spaces, newlines.		 Minified.
No whitespace.

Defaults aren't mandatory, you're free to customise as needed. (See DefaultSettings.scala.)

StyleSheets

Styles, attributes, values, nearly everything in ScalaCSS is immutable. When you're declaring a large module of styles, it's very inconvenient to have to manually collate all styles you declare. mutable.StyleSheet exists for this purpose. Subclass it, create your styles and they will be registered automatically so that you can turn them all into CSS at once.

Stylesheets come in two different flavours: standalone and inline.

Property Standalone Inline
Purpose Generating a CSS file. Styling in a Scala or Scala.JS webapp.
CSS Selectors
(class names)		 Mandatory.
You need to specify.		 Optional.
Generated when not provided.
Usable style types Static only: StyleS All types: StyleS, StyleF, StyleC.
Return type after creation Unit StyleA (A = Applicable)
Declaration style "div.box" - ... val box = style(...)

To create a style module,

  1. Create an object that extends StyleSheet.Standalone or StyleSheet.Inline.
  2. Inside the object, import the DSL by typing import dsl._.
  3. Following the examples, just start typing and if you're using an IDE with auto-complete, you'll be guided towards type-safe styles.
Full examples: