Developing with SASS

About SASS

SASS

Manually Compiling Stylesheets

uPortal 4's portal.css files are generated via SASS, but checked into source control for those adopters who would prefer to work directly with CSS.  The original SASS files are also checked into the source for those who would like to make modifications via SASS.  To manually compile the stylesheets, use the following command:

 

Example: Watching the mobile skin's common directory
mvn org.jasig.maven:sass-maven-plugin:update-stylesheets

Performing Live Development

To see changes to SASS files in realtime, first disable resource aggregation in the portal.  Next, from the uportal-war directory, use the SASS maven plugin's "watch" goal to automatically deploy changes to your tomcat instance.  The watch goal requires a target output directory, which should be set to the root of the uPortal webapp in your tomcat instance.  

The maven plugin is only capable of watching a single skin at a time.  Specify the skin by including some unique part of the path to the skin as part of the watch command.  For example, to watch the default "uportal3" desktop skin, you could use the command:

Example: Watching the desktop default "uportal3" skin
mvn org.jasig.maven:sass-maven-plugin:watch -Dwatch.output=/path/to/tomcat/webapps/uPortal -Dwatch.skin=uportal3

To watch the mobile skin's common directory, use:

Example: Watching the mobile skin's common directory
mvn org.jasig.maven:sass-maven-plugin:watch -Dwatch.output=/path/to/tomcat/webapps/uPortal -Dwatch.skin=muniversality/common