GSS (Groovy Style Sheets)

  • Tags : css
  • Latest : 1.0.1
  • Last Updated: 30 October 2009
  • Grails version : 1.1.1 > *
  • Authors : null
3 votes
Dependency : 
compile ":gss:1.0.1"

Documentation

Summary

Description

GSS is a plugin that allows to write css with groovy

Installation

  • grails install-plugin gss

Getting started

After installation plugin will create folder grails-app/style . GSS watches this folder and processes all groovy files.

GSS expects that gss style file has following structure 
def style = {
   //all code here
}
In case of valid input file GSS generates CSS file with the same name and puts it in web-appcss. If you change something in the GSS file all changes immediately will be reflected in CCS while app is runnig.

Syntax

GSS uses custom groovy builder to process input therefore GSS supports all constructions that allowed in builders.
All examples assume that you write code in style closure 
def style = {
   //examples code
}
  • Simple construction
'.myClass'(padding:'20px', margin:'0')
  '#myId'(color:'gray')
You should wrap not valid groovy names in quotes e.g. '.Class', 'padding-left'
  • Nested styles
table(width:'300px'){
    tr(height:'50px'){
      td{
        '.label'('text-align':'right') 
        '~#number'(color:'red')
      }
    } 
  }
this code will generate
If you don't want white space before an id you should use '~' 
table{
   width:300px;
}
table tr{
   height:50px;
}
table tr td .label{
   text-align:right;
} 
table tr td#number{
   color:red;
}
  • Property blocks
You can define blocks that contains only properties without any id.

def icon = [
      d:[
         'padding-left':'20px',
         background:'url(../images/%imageId) no-repeat left center'  
      ], 
      v:[
         '%imageId':'default.png'
      ]
 ]
To inherit properties from the block in your style write 
p:[block_name1, block_name2, block_name3]
Blocks can inherit properties from another blocks themselves 
def redColor = [
     d:[color:'red']
  ]
  def border = [
     d:[border:'1px solid gray']
  ]
  def block = [
     d:['backgroud-color':'blue']
     p:[redColor, border]
  ]

If you want to replace some parts of the property's value with variable use %var_name. To define value for vars write 

v:['%var1_name':'var1_value', '%var2_name':'var2_value']
example 
'.myButton'('border-color':'gray', p:[icon], v:['%imageId': 'icon.png'])
this code will generate 
.myButton{
     padding-left:20px;
     background:url(../images/icon.png) no-repeat left center;
     border-color:gray;
  }