ScalaCSS

https://japgolly.github.io/scalacss/book/
Admin
ScalaCSS is a Scala and Scala.js library that brings compile-time type safety, conflict detection,...
Tokens:19,982
Snippets:171
Trust Score:9.7
Update:3 weeks ago
Show doc for...
Tokens:
Raw
### Example package object (package.scala)

Source: https://japgolly.github.io/scalacss/book/ext/scalatags.html

Defines CssSettings as scalacss.devOrProdDefaults in the example package. This is the first file of the example project.

```scala
package object example {
  val CssSettings = scalacss.devOrProdDefaults
}
```

--------------------------------

### Inline StyleSheet with StyleF examples

Source: https://japgolly.github.io/scalacss/book/features/stylef.html

Complete example of an inline StyleSheet using StyleF. Demonstrates styleF.bool, styleF.int, and full control with a custom domain.

```scala
object MyInline extends StyleSheet.Inline {
  import dsl._

  // Convenience method: styleF.bool
  val everythingOk =
    styleF.bool(ok => styleS(
      backgroundColor(if (ok) green else red)
    ))

  // Convenience method: styleF.int
  val indent =
    styleF.int(1 to 3)(i => styleS(
      paddingLeft(i * 4.ex)
    ))

  // Full control
  sealed trait Blah
  case object Blah1 extends Blah
  case object Blah2 extends Blah
  case object Blah3 extends Blah
  val blahDomain = Domain.ofValues(Blah1, Blah2, Blah3)
  val blahStyle =
    styleF(blahDomain)(b => styleS(
      ...
    ))
}

```

--------------------------------

### Media query examples

Source: https://japgolly.github.io/scalacss/book/features/cond.html

Examples of media queries in ScalaCSS, including single and multiple queries. The comments show the resulting CSS output.

```scala
// Single queries:
media.color                         // @media (color)
media.screen                        // @media screen
media.screen.landscape.color        // @media screen and (orientation:landscape) and (color)
media.not.handheld.minWidth(320 px) // @media not handheld and (min-width:320px)

// Multiple queries:

media.screen & media.not.handheld
// produces: @media screen, not handheld

media.screen.color & media.not.handheld & media.minHeight(240 px)
// produces: @media screen and (color), not handheld, (min-height:240px)
```

--------------------------------

### Applying conditional styles in ScalaCSS

Source: https://japgolly.github.io/scalacss/book/features/cond.html

Complete example of applying conditional styles in ScalaCSS. Shows pseudo selectors, media queries, combinations, and the alternative syntax `-` for cases where Scala gets confused. Also demonstrates reusing conditions with a helper method.

```scala
object CondExample extends StyleSheet.Inline {
  import dsl._

  val exampleStyle = style(

    // Simple pseudo selector
    &.hover(
      lineHeight(1 em)
    ),

    // Multiple pseudo selectors
    &.visited.not(_.firstChild)(
      fontWeight.bold
    ),

    // Simple media query
    media.landscape(
      margin.auto
    ),

    // Pseudo selector and media query
    (&.hover & media.landscape)(
      color.black.important
    ),

    // Multiple media queries
    (media.tv.minDeviceAspectRatio(4 :/: 3) & media.all.resolution(300 dpi))(
      margin.vertical(10 em)
    ),

    // Syntax #2: <condition> - (<styles>)
    // Scala gets confused because media.color and media.color(ColorBits).
    // Use second syntax to resolve.
    media.color - (
      padding.horizontal(500 px)
    )

    // Everything is immutable. You can DRY repeated conditions
    modeX(
      backgroundColor(c"#700")
    ),
    modeX.hover(
      backgroundColor(c"#f00")
    )
  )

  def modeX = media.maxWidth(320 px).maxHeight(240 px) & media.handheld
}
```

--------------------------------

### Example application (MyApp.scala)

Source: https://japgolly.github.io/scalacss/book/ext/scalatags.html

Renders the style sheet and applies the bootstrapButton style to a button in a Scalatags Text page.

```scala
package example

import CssSettings._
import scalacss.ScalatagsCss._
import scalatags.Text._
import scalatags.Text.all._

object MyApp {

  def myPage =
    html(
      MyStyles.render[TypedTag[String]],
      body(
        button(
          MyStyles.bootstrapButton,
          "I am a button!"
        )
      )
    )
}
```

--------------------------------

### Domain construction examples

Source: https://japgolly.github.io/scalacss/book/features/stylef.html

Shows how to construct Domain[A] instances for use with StyleF. Domains define the set of legal inputs and must be provided ahead-of-time.

```scala
Domain.boolean                                   // Domain[Boolean]
Domain.ofValues(1, 5, 7, 9)                      // Domain[Int]
Domain.ofRange(0 to 4)                           // Domain[Int]
Domain.ofRange(0 to 4).option *** Domain.boolean // Domain[(Option[Int], Boolean)]

```

--------------------------------

### Generated CSS for AdminPage example

Source: https://japgolly.github.io/scalacss/book/history/0.3.html

The CSS output generated from the AdminPage stylesheet example, showing the automatically generated class names.

```css
.AdminPage-header     { display: block }
.AdminPage-hasError-t { background-color: green }
.AdminPage-hasError-f { background-color: red }

```

--------------------------------

### Example: MyApp.scala

Source: https://japgolly.github.io/scalacss/book/ext/react.html

Defines a React component that uses MyStyles.bootstrapButton and renders it to the DOM. Calls MyStyles.addToDocument() before rendering.

```scala
package example

import scala.scalajs.js.annotation.JSExport
import org.scalajs.dom.{alert, document}
import japgolly.scalajs.react._
import japgolly.scalajs.react.vdom.prefix_<^._
import CssSettings._
import scalacss.ScalaCssReact._

object MyApp {

  val MyComponent =
    ReactComponentB[Unit]("blah")
      .render(_ =>
        <.button(
          ^.onClick --> alert("Hey! I didn't say you could click me!"),
          MyStyles.bootstrapButton,
          "I am a button!"))
      .buildU


  @JSExport("app")
  def main(): Unit = {
    MyStyles.addToDocument()
    MyComponent() render document.getElementById("demo")
  }
}
```

--------------------------------

### Shared theme module example

Source: https://japgolly.github.io/scalacss/book/features/reuse.html

A shared style module defining button and title styles, using the dsl import.

```scala
class SharedTheme(implicit r: StyleSheet.Register) extends StyleSheet.Inline()(r) {
  import dsl._

  val button = style(
    padding(0.5 ex, 2 ex),
    backgroundColor("#eee"),
    border(1 px, solid, black)
  )

  val title = style(
    fontSize(32 px)
  )
}
```

--------------------------------

### Rendered CSS for keyframe animation example

Source: https://japgolly.github.io/scalacss/book/features/keyframes.html

Shows the CSS output generated by the ScalaCSS example. The keyframe 'hello2' is not rendered as a separate class; its styles appear only inside the @keyframes block. The animation-name property includes vendor prefixes.

```css
@keyframes Demo-kf1 {
  0% {
    height: 100px;
    width: 30px;
  }

  20% {
    height: 150px;
    width: 30px;
  }

  100% {
    height: 200px;
    width: 60px;
  }
}

.Demo-hello {
  height: 100px;
  width: 30px;
}

.Demo-anim1 {
  -o-animation-name: Keyframes-kf1;
  -webkit-animation-name: Keyframes-kf1;
  -moz-animation-name: Keyframes-kf1;
  animation-name: Keyframes-kf1;
}

```

--------------------------------

### Example conflict warnings

Source: https://japgolly.github.io/scalacss/book/features/conflict.html

Example warning messages produced by ScalaCSS when conflicts are detected. Each line shows the style name and the conflicting attribute values.

```text
[CSS WARNING] .MyStyles-navbar -- {margin-left: 6px} conflicts with {margin: 12px}
[CSS WARNING] .MyStyles-button -- {cursor: zoom-in} conflicts with {cursor: pointer}

```

--------------------------------

### Example style sheet (MyStyles.scala)

Source: https://japgolly.github.io/scalacss/book/ext/scalatags.html

Defines an inline style sheet with a bootstrapButton style that adds classes 'btn' and 'btn-default' and sets font-size to 200%.

```scala
package example

import CssSettings._

object MyStyles extends StyleSheet.Inline {
  import dsl._

  val bootstrapButton = style(
    addClassNames("btn", "btn-default"),
    fontSize(200 %%)
  )
}
```

--------------------------------

### Import ScalaCSS settings (dev/prod)

Source: https://japgolly.github.io/scalacss/book/features/basics.html

Import development or production settings. The commented example shows how to choose between dev/prod based on sbt flags or default to dev-mode unless in fullOptJS. The import statements provide sensible defaults for style conflicts, error handling, class name generation, and CSS output.

```scala
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._
```

--------------------------------

### Failing styleF with non-univEq class

Source: https://japgolly.github.io/scalacss/book/features/stylef.html

This example will not work because MyBlob lacks universal equality and a proper hashcode. Inputs to styleF are stored in a standard Scala Map, so they require sensible hashcodes and universal equality.

```scala
class MyBlob(val blobIsHappy: Boolean)

val domain = Domain.ofValues(new Blob(true), new Blob(false))

styleF("blobs")(domain)(blob => styleS(…))

```

--------------------------------

### Pseudo selector examples

Source: https://japgolly.github.io/scalacss/book/features/cond.html

Examples of pseudo selectors in ScalaCSS. The `:not(...)` argument can be a string or a function in the same format used to create conditions.

```scala
&.hover                             // :hover
&.hover.visited                     // :hover:visited
&.hover.not(_.visited)              // :hover:not(:visited)
&.hover.not(_.firstChild.visited)   // :hover:not(:first-child:visited)
&.nthChild(3).not(".debug")         // :nth-child(3):not(.debug)
&.nthChild("3n+2")                  // :nth-child(3n+2)
&.attr("custom-attr", "bla").hover  // [custom-attr="bla"]:hover
&.attrExists("custom-attr").hover   // [custom-attr]:hover
```

--------------------------------

### Fixing styleF with case class and UnivEq

Source: https://japgolly.github.io/scalacss/book/features/stylef.html

Correct version of the previous example. Make MyBlob a case class and provide an implicit UnivEq[MyBlob] instance to satisfy the Map requirements.

```scala
import japgolly.univeq._

case class MyBlob(blobIsHappy: Boolean)
object MyBlob {
  implicit def univEq: UnivEq[MyBlob] = UnivEq.derive
}

val domain = Domain.ofValues(Blob(true), Blob(false))

styleF("blobs")(domain)(blob => styleS(…))

```

--------------------------------

### Example: initialize inner style objects with initInnerObjects

Source: https://japgolly.github.io/scalacss/book/gotchas.html

Place this initInnerObjects call last in the stylesheet, listing one style per inner object so they are eagerly initialized before rendering. Styles defined in nested objects are otherwise not registered due to lazy initialization.

```scala
object MyStyles extends StyleSheet.Inline {
  import dsl._

  val hello = style(display.inline)

  object innerObject {
    val blah1 = style(borderCollapse.collapse)
    val blah2 = style(borderCollapse.separate)

    object andAgain {
      val hello = style(display.block)
    }
  }

  // Put this last
  initInnerObjects(
    innerObject.blah1,
    innerObject.andAgain.hello)
}

```

--------------------------------

### Standalone stylesheet with loop-generated classes

Source: https://japgolly.github.io/scalacss/book/features/stylef.html

For standalone stylesheets, you can generate styles in a loop without needing a StyleF. This example creates four classes .indent-0 through .indent-3 with increasing left padding.

```scala
object MyStyles extends StyleSheet.Standalone {
  import dsl._

  for (i <- 0 to 3)
    s".indent-$i" -
      paddingLeft(i * 2.ex)
}

```

--------------------------------

### Automatic style naming example: AdminPage stylesheet

Source: https://japgolly.github.io/scalacss/book/history/0.3.html

ScalaCSS Inline stylesheet demonstrating automatic naming of styles based on variable names. The generated CSS shows class names like .AdminPage-header and .AdminPage-hasError-t/f.

```scala
object AdminPage extends StyleSheet.Inline {
  import dsl._

  val header = style(display.block)

  val hasError =
    styleF.bool(ok => styleS(
      backgroundColor(if (ok) green else red)))
}

```

--------------------------------

### Use shared styles in scalajs-react component

Source: https://japgolly.github.io/scalacss/book/features/reuse.html

Example usage in scalajs-react, using the shared theme's button style and headingTitle.

```scala
def showDetailsButton =
  <.button(
    MyAppStyles.theme.button,
    ^.onClick ~~> showLoginDetails(user),
    "Show Details"))

def render =
  <.div(
    <.h1(
      MyAppStyles.headingTitle,
      "Your Login Details"),
    showDetailsButton)
```

--------------------------------

### ScalaCSS keyframe animation example

Source: https://japgolly.github.io/scalacss/book/features/keyframes.html

Defines a StyleSheet.Inline with a style, a keyframe, and a keyframes group. The keyframe 'hello2' is not rendered as a separate CSS class; its styles are only included inside the @keyframes block. The animationName style references the keyframes group.

```scala
object Demo extends StyleSheet.Inline {
  import dsl._

  val hello = style(
    height(100 px),
    width(30 px))

  val hello2 = keyframe(
    height(150 px),
    width(30 px))

  val kf1 = keyframes(
    (0 %%) -> hello,
    (20 %%) -> hello2,
    (100 %%) -> keyframe(
      height(200 px),
      width(60 px))
  )

  val anim1 = style(
    animationName(kf1))
}

```

--------------------------------

### Bypass example with := and :=!

Source: https://japgolly.github.io/scalacss/book/features/typed-values.html

Using := on a typed attribute produces a compiler warning, while :=! suppresses it. The ! indicates intentional bypass of type-safety.

```scala
margin :=  "12px auto"  // Compile warns there's a type-safe alternative
margin :=! "auto\\9"    // The ! means you know what you're doing
```

--------------------------------

### Get HTML class names for styles

Source: https://japgolly.github.io/scalacss/book/quickstart/inline.html

Shows how to retrieve the class names generated for each style. The styleF-based indent style requires an Int parameter, producing distinct class names per value.

```scala
MyStyles.outer.htmlClass     // Returns "MyStyles-outer"
MyStyles.indent(1).htmlClass // Returns "MyStyles-indent-1"
MyStyles.indent(2).htmlClass // Returns "MyStyles-indent-2"
MyStyles.button.htmlClass    // Returns "btn btn-default"

```

--------------------------------

### Valid and invalid color literals

Source: https://japgolly.github.io/scalacss/book/history/0.3.html

Examples showing valid and invalid color literals. The invalid one (5 digits) causes a compiler error.

```scala
backgroundColor(c"#ffcc99") // ok
backgroundColor(c"#ffcc9") // 5 digits = compiler error

```

--------------------------------

### Defining font faces and generated CSS

Source: https://japgolly.github.io/scalacss/book/features/font_faces.html

Shows how to define @font-face rules in ScalaCSS with a StyleSheet.Inline, then the generated CSS. The example defines three font faces, each requiring a .src(...) and optional attributes, then uses the first in a style rule.

```scala
object Demo extends StyleSheet.Inline {
  import dsl._

  val ff = fontFace("myFont")(
    _.src("url(font.woff)")
      .fontStretch.expanded
      .fontStyle.italic
      .unicodeRange(0, 5))

  val ff2 = fontFace("myFont2")(
    _.src("url(font2.woff)")
      .fontStyle.oblique
      .fontWeight._200)

  val ff3 = fontFace("myFont3")(
    _.src("local(HelveticaNeue)", "url(font2.woff)")
      .fontStretch.ultraCondensed
      .fontWeight._200)

  val myFontText = style(
    fontFamily(ff))
}

```

```css
@font-face {
  font-family: myFont;
  src: url(font.woff);
  font-stretch: expanded;
  font-style: italic;
  unicode-range: U+0-5;
}

@font-face {
  font-family: myFont2;
  src: url(font2.woff);
  font-style: oblique;
  font-weight: 200;
}

@font-face {
  font-family: myFont3;
  src: local(HelveticaNeue),url(font2.woff);
  font-stretch: ultra-condensed;
  font-weight: 200;
}

.MyInlineWithFontFace-myFontText {
  font-family: MyInlineWithFontFace-myFont;
}

```

--------------------------------

### Migration aid: perl commands to replace boolStyle, intStyle, and color DSL

Source: https://japgolly.github.io/scalacss/book/history/0.3.html

Shell commands to migrate Scala source files from the old DSL to the new syntax. Use these to replace boolStyle with styleF.bool, intStyle with styleF.int, and the string color DSL with the c prefix.

```bash
find . -type f -name '*.scala' -exec perl -pi -e 's/(?<!\w)boolStyle\(/styleF.bool(/g' {} +
find . -type f -name '*.scala' -exec perl -pi -e 's/(?<!\w)intStyle\(/styleF.int(/g' {} +
find . -type f -name '*.scala' -exec perl -pi -e 's/(".+?").color/c$1/g' {} +

```

--------------------------------

### Register stylesheet with GlobalRegistry

Source: https://japgolly.github.io/scalacss/book/features/global_registry.html

Defines an inline stylesheet class and registers it with the global registry. The first block creates a style with margin, padding, and border. The second block imports GlobalRegistry and registers the stylesheet in an onStartup method.

```scala
class BoxStyles extends StyleSheet.Inline {
  import dsl._
  val mainBox = style(
    margin(2 px, 1 ex),
    padding(1 ex),
    border(1 px, solid, black))
}

```

```scala
import scalacss.internal.mutable.GlobalRegistry

def onStartup(): Unit = {
  // Register styles
  GlobalRegistry.register(new BoxStyles)
}

```

--------------------------------

### Combining media queries and pseudo selectors

Source: https://japgolly.github.io/scalacss/book/features/cond.html

Shows three equivalent ways to combine a media query with a pseudo selector in ScalaCSS. All produce the same CSS output.

```scala
// These are all equivalent. All produce:
//   @media screen { <css>:active {...} }

media.screen.active

media.screen & &.active

&.active & media.screen
```

--------------------------------

### StyleF syntax variants

Source: https://japgolly.github.io/scalacss/book/features/stylef.html

Syntax overview for creating StyleF instances. Includes convenience methods for boolean and integer ranges, and optional manual classname specification.

```scala
// Styles for each A
styleF(Domain[A])(a => styleS(…))

// Convenience methods for boolean & integer ranges
styleF.bool      (b => styleS(…))
styleF.int(range)(i => styleS(…))

// Manual classname
styleF("manual")(Domain[A])(a => styleS(…))
styleF("manual").bool      (b => styleS(…))
styleF("manual").int(range)(i => styleS(…))

```

--------------------------------

### Media query syntax

Source: https://japgolly.github.io/scalacss/book/features/cond.html

Shows the syntax for creating media queries in ScalaCSS. Single queries are built by chaining attributes; multiple queries are composed with the `&` operator.

```scala
// Creating a single query
media.<attr1>
media.<attr1>.<attr2>…<attrn>

// Composing queries
<query1> & <query2> [… & <queryn>]
```

--------------------------------

### Use shared styles in app stylesheet

Source: https://japgolly.github.io/scalacss/book/features/reuse.html

Concrete styles in the app that instantiate the shared theme and extend its styles.

```scala
object MyAppStyles extends StyleSheet.Inline {
  import dsl._

  val theme = new SharedTheme // Instantiate shared styles

  val headingTitle = style(
    theme.title,              // Extend shared style
    color(red)
  )
}
```

--------------------------------

### Define an inline stylesheet with StyleSheet.Inline

Source: https://japgolly.github.io/scalacss/book/quickstart/inline.html

Creates a StyleSheet.Inline object with mixins, styles, a styleF for parameterized styles, and a style that adds Bootstrap classes. Uses the dsl._ import for the DSL.

```scala
import scalacss.DevDefaults._

object MyStyles extends StyleSheet.Inline {
  import dsl._

  val common = mixin(
    backgroundColor.green
  )

  val outer = style(
    common, // Applying our mixin
    margin(12 px, auto),
    textAlign.left,
    cursor.pointer,

    &.hover(
      cursor.zoomIn
    ),

    media.not.handheld.landscape.maxWidth(640 px)(
      width(400 px)
    )
  )

  /** Style requiring an Int when applied. */
  val indent =
    styleF.int(0 to 3)(i => styleS(
      paddingLeft(i * 2.ex)
    ))

  /** Style hooking into Bootstrap. */
  val button = style(
    addClassNames("btn", "btn-default")
  )
}

```

--------------------------------

### Add all registered styles with GlobalRegistry.addToDocumentOnRegistration()

Source: https://japgolly.github.io/scalacss/book/ext/react.html

If using GlobalRegistry, call addToDocumentOnRegistration() to add all registered styles to the document.

```scala
GlobalRegistry.addToDocumentOnRegistration()
```

--------------------------------

### Retrieve stylesheet with GlobalRegistry.apply

Source: https://japgolly.github.io/scalacss/book/features/global_registry.html

Retrieves a registered stylesheet by type. If the stylesheet is not registered, the result is None and calling .get throws an exception. The retrieved stylesheet is then used in a scalajs-react div.

```scala
// Calling Option.get will throw an exception if BoxStyles hasn't been registered
val boxStyles = GlobalRegistry[BoxStyles].get

<.div(boxStyles.mainBox, "Yay")

```

--------------------------------

### Register callbacks with onRegistration and onRegistrationN

Source: https://japgolly.github.io/scalacss/book/features/global_registry.html

Registers callbacks that run when stylesheets are added to the registry. onRegistration handles a single stylesheet, while onRegistrationN handles a Vector of stylesheets. Both callbacks apply retroactively to already-registered styles and to new ones.

```scala
GlobalRegistry.onRegistration { s =>
  val styleCount = s.styles.size
  println(s"Registered $styleCount styles.")
}

GlobalRegistry.onRegistrationN { ss =>
  val sheetCount = ss.size
  val styleCount = ss.map(_.styles.size).sum
  println(s"Registered $sheetCount sheets with a total of $styleCount styles.")
}

```

--------------------------------

### Style composition warning output before and after

Source: https://japgolly.github.io/scalacss/book/history/0.2.html

Shows the old and new warning messages for style composition conflicts. The new format includes the style name and the conflicting CSS declarations.

```text
// Before
[CSS WARNING] .scalacss-0001 -- margin overridden by marginLeft.
[CSS WARNING] .scalacss-0002 -- cursor overridden by cursor.

// After
[CSS WARNING] .MyStyles-0001 -- {margin-left: 6px} conflicts with {margin: 12px}
[CSS WARNING] .MyStyles-0002 -- {cursor: zoom-in} conflicts with {cursor: pointer}

```

--------------------------------

### Pass shared style as parameter for library

Source: https://japgolly.github.io/scalacss/book/features/reuse.html

Tweaked version for shared libraries, passing the theme as a parameter instead of using a global.

```scala
def showDetailsButton(theme: SharedTheme) =
  <.button(
    theme.button,
    ^.onClick ~~> showLoginDetails(user),
    "Show Details"))
```

--------------------------------

### Import ScalaCssReact for React integration

Source: https://japgolly.github.io/scalacss/book/ext/react.html

Import scalacss.ScalaCssReact._ to enable ScalaCSS integration with React code.

```scala
import scalacss.ScalaCssReact._
```

--------------------------------

### Automate package rename with perl

Source: https://japgolly.github.io/scalacss/book/history/0.2.html

Run this shell command in the project root to automatically replace the old package prefix `japgolly.` in all Scala files, transitioning to the new `scalacss` package.

```bash
find . -type f -name '*.scala' -exec perl -pi -e 's/japgolly\.(?=scalacss)//g' {} +

```

--------------------------------

### Define a standalone stylesheet with ScalaCSS

Source: https://japgolly.github.io/scalacss/book/quickstart/standalone.html

Creates a StyleSheet.Standalone object using the ScalaCSS DSL. Includes selectors, pseudo-classes, media queries, and dynamic generation with a for loop.

```scala
import scalacss.DevDefaults._

object MyStyles extends StyleSheet.Standalone {
  import dsl._

  "div.std" - (
    margin(12 px, auto),
    textAlign.left,
    cursor.pointer,

    &.hover -
      cursor.zoomIn,

    media.not.handheld.landscape.maxWidth(640 px) -
      width(400 px),

    &("span") -
      color.red
  )

  "h1".firstChild -
    fontWeight.bold

  for (i <- 0 to 3)
    s".indent-$i" -
      paddingLeft(i * 2.ex)
}
```

--------------------------------

### Pseudo selector syntax

Source: https://japgolly.github.io/scalacss/book/features/cond.html

Shows the syntax for creating pseudo selectors in ScalaCSS. Use one or more pseudo selector names separated by dots, each prefixed with an ampersand.

```scala
&.<psuedo1>
&.<psuedo1>.<psuedo2>…<psuedon>
```

--------------------------------

### Instantiate shared style module in another stylesheet

Source: https://japgolly.github.io/scalacss/book/features/reuse.html

Create an instance of the shared module inside another stylesheet to use its styles.

```scala
object MyStyles extends StyleSheet.Inline {
  val shared = new MyStyleModule
}
```

--------------------------------

### Apply styles to React tags

Source: https://japgolly.github.io/scalacss/book/ext/react.html

Reference styles directly in React tags, e.g., <.h1(MyStyles.heading, "This is a heading").

```scala
<.h1( MyStyles.heading, "This is a heading" )
```

--------------------------------

### CSS value prefixes for cursor: zoom-in

Source: https://japgolly.github.io/scalacss/book/features/prefixes.html

Shows the engine-specific prefixes required for the CSS value zoom-in on the cursor property, as generated by ScalaCSS using caniuse.com data.

```css
cursor:    -moz-zoom-in;
cursor:      -o-zoom-in;
cursor: -webkit-zoom-in;
cursor:         zoom-in;

```

--------------------------------

### Define a style module class with implicit register

Source: https://japgolly.github.io/scalacss/book/features/reuse.html

Instead of an object, create a class with an implicit StyleSheet.Register parameter. The empty argument list before the implicit is required by Scala's implicit parameter rules.

```scala
class MyStyleModule(implicit r: StyleSheet.Register) extends StyleSheet.Inline()(r) {

}
```

--------------------------------

### Color functions with c prefix

Source: https://japgolly.github.io/scalacss/book/history/0.3.html

Color functions can also use the c prefix, even though Scala DSL exists for them. These are valid alternatives.

```scala
backgroundColor(c"hsl(200, 20%, 10%)")
backgroundColor(c"rgb(0%, 20%, 10%)")
backgroundColor(c"rgba(0, 0, 0, 0.5)")
backgroundColor(c"rgb(30, 30, 300)") // 300 is too large = compiler error
// etc

```

--------------------------------

### External CSS with addClassNames

Source: https://japgolly.github.io/scalacss/book/features/extern.html

Declares a button style that adds Bootstrap classes 'btn' and 'btn-default' using addClassNames. This consolidates external CSS class names into a single file, easing migration between CSS libraries.

```scala
object MyStyles extends StyleSheet.Inline {
  import dsl._

  val button = style(
    addClassNames("btn", "btn-default"), // Bootstrap classes
    textAlign.center                     // Optional customisation
  )
}
```

--------------------------------

### Development-mode CSS output

Source: https://japgolly.github.io/scalacss/book/quickstart/inline.html

The CSS generated by MyStyles.render in development mode (DevDefaults). Shows readable class names and includes hover, media query, and parameterized styles.

```css
.MyStyles-outer {
  background-color: green;
  margin: 12px auto;
  text-align: left;
  cursor: pointer;
}

.MyStyles-outer:hover {
  cursor: -webkit-zoom-in;
  cursor: -moz-zoom-in;
  cursor: -o-zoom-in;
  cursor: zoom-in;
}

.MyStyles-indent-0 {
  padding-left: 0;
}

.MyStyles-indent-1 {
  padding-left: 2ex;
}

.MyStyles-indent-2 {
  padding-left: 4ex;
}

.MyStyles-indent-3 {
  padding-left: 6ex;
}

@media not handheld and (orientation:landscape) and (max-width:640px) {
  .MyStyles-outer {
    width: 400px;
  }
}

```

--------------------------------

### Four-edge margin vertical shortcut

Source: https://japgolly.github.io/scalacss/book/history/0.2.html

Shows the `.vertical` shortcut for setting top and bottom margins. The commented arrow indicates that `margin.vertical(4 px)` is equivalent to composing `marginTop` and `marginBottom`.

```scala
margin.vertical(4 px)
// ↑ is a shortcut for ↓
marginTop(4 px) compose marginBottom(4 px)

```

--------------------------------

### CSS attribute prefixes for animation-delay

Source: https://japgolly.github.io/scalacss/book/features/prefixes.html

Shows the engine-specific prefixes required for the CSS property animation-delay, as generated by ScalaCSS using caniuse.com data.

```css
    -ms-animation-delay: 60s,50ms;
   -moz-animation-delay: 60s,50ms;
     -o-animation-delay: 60s,50ms;
-webkit-animation-delay: 60s,50ms;
        animation-delay: 60s,50ms;

```

--------------------------------

### Four-edge margin DSL with correct vertical/horizontal order

Source: https://japgolly.github.io/scalacss/book/history/0.2.html

Shows the correct usage of the four-edge margin DSL. The first form uses positional arguments, the second uses named `h` and `v` parameters; both produce the same CSS.

```scala
// These correctly generate {margin: 4px 1ex}
margin(4 px, 1 ex)
margin(h = 1.ex, v = 4.px)

```

--------------------------------

### Import scalacss.ScalatagsCss._

Source: https://japgolly.github.io/scalacss/book/ext/scalatags.html

Imports the Scalatags integration into your Scala code. Required to use ScalaCSS with Scalatags.

```scala
import scalacss.ScalatagsCss._
```

--------------------------------

### New color literal syntax with c prefix

Source: https://japgolly.github.io/scalacss/book/history/0.3.html

The new syntax for color literals, requiring a c prefix. Invalid literals cause compiler errors.

```scala
backgroundColor(c"#fc9")

```

--------------------------------

### Old color literal syntax (before compile-time checking)

Source: https://japgolly.github.io/scalacss/book/history/0.3.html

The previous way to specify a color literal, which is now replaced by the c-prefixed syntax.

```scala
backgroundColor("#fc9")

```

--------------------------------

### Render generated CSS

Source: https://japgolly.github.io/scalacss/book/quickstart/inline.html

Calls render on the stylesheet to produce the CSS string. The output is shown in the next snippet.

```scala
println( MyStyles.render )

```

--------------------------------

### fontFace method overloads

Source: https://japgolly.github.io/scalacss/book/features/font_faces.html

Two overloads of the fontFace method. The first takes only a configuration function; the second takes an optional font family name before the configuration. The configuration must include the source via .src(...) and may include optional font attributes.

```scala
def fontFace                    (config: FontSrcSelector => FontFace): FontFace
def fontFace(fontFamily: String)(config: FontSrcSelector => FontFace): FontFace

```

--------------------------------

### Generated CSS output (development mode)

Source: https://japgolly.github.io/scalacss/book/quickstart/standalone.html

The CSS output produced by MyStyles.render in development mode (DevDefaults). Shows expanded formatting with vendor prefixes for cursor: zoom-in.

```css
div.std {
  text-align: left;
  margin: 12px auto;
  cursor: pointer;
}

div.std:hover {
  cursor: -webkit-zoom-in;
  cursor: -moz-zoom-in;
  cursor: -o-zoom-in;
  cursor: zoom-in;
}

div.std span {
  color: red;
}

h1:first-child {
  font-weight: bold;
}

.indent-0 {
  padding-left: 0;
}

.indent-1 {
  padding-left: 2ex;
}

.indent-2 {
  padding-left: 4ex;
}

.indent-3 {
  padding-left: 6ex;
}

@media not handheld and (orientation:landscape) and (max-width:640px) {
  div.std {
    width: 400px;
  }
}
```

--------------------------------

### Add ScalaCSS core dependency for Scala.JS (SBT)

Source: https://japgolly.github.io/scalacss/book/quickstart/index.html

Adds the ScalaCSS core library as a dependency for a Scala.JS project using SBT.

```scala
libraryDependencies += "com.github.japgolly.scalacss" %%% "core" % "0.8.0-RC1"
```
Tokens:
Raw