ScalaCSS

Scalatags

ScalaCSS integrates with Scalatags in both Text and JsDom modes.

  1. Add this to your SBT build:

    libraryDependencies += "com.github.japgolly.scalacss" %%% "ext-scalatags" % "0.5.3"
  2. Add this to your Scala code:

    import scalacss.ScalatagsCss._
    
  3. Create your inline styles as normal.

  4. To generate a <style> tag of all of your styles, call .render[T] where T is the type of output you want.

    • MyStyles.render[String]
    • MyStyles.render[scalatags.Text.TypedTag[String]]
    • MyStyles.render[scalatags.JsDom.TypedTag[HTMLStyleElement]]

  5. Finally, to apply styles, just reference them in your tags.

    h1( MyStyles.heading, "This is a heading" )
    

Example

example/package.scala

package object example {
  val CssSettings = scalacss.devOrProdDefaults
}

example/MyStyles.scala

package example

import CssSettings._

object MyStyles extends StyleSheet.Inline {
  import dsl._

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

example/MyApp.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!"
        )
      )
    )
}