modular css with sass in cascade server

14
Oh No You Di’int: Modular CSS with Sass in Cascade Server Eric L. Epps @ericepps

Upload: eric-epps

Post on 25-Jun-2015

354 views

Category:

Technology


8 download

DESCRIPTION

Demonstration of using Sass (SCSS) and Web Services to update CSS files in Cascade Server. Code available at https://github.com/ericepps/Cascade-Server-SCSS

TRANSCRIPT

Page 1: Modular CSS with Sass in Cascade Server

Oh No You Di’int:Modular CSS with Sass

in Cascade ServerEric L. Epps@ericepps

Page 2: Modular CSS with Sass in Cascade Server

Overview

Why to use Sass (SCSS syntax)

Modular Sass

Managing (S)CSS in Cascade Server

Code!

Page 3: Modular CSS with Sass in Cascade Server

Remember This?

Page 4: Modular CSS with Sass in Cascade Server

Why SASS?Variables

Nesting

Mixins

Extend/Inheritance

Operators

Partials/Import

Page 5: Modular CSS with Sass in Cascade Server

Why SASS?

Variables

http://sass-lang.com/guide

Page 6: Modular CSS with Sass in Cascade Server

Why SASS?Nesting

http://sass-lang.com/guide

Page 7: Modular CSS with Sass in Cascade Server

Why SASS?

Mixins

http://sass-lang.com/guide

Page 8: Modular CSS with Sass in Cascade Server

Why SASS?Extend/Inheritance

http://sass-lang.com/guide

Page 9: Modular CSS with Sass in Cascade Server

Why SASS?Operators

http://sass-lang.com/guide

Page 10: Modular CSS with Sass in Cascade Server

Why SASS?Partials/Import

http://sass-lang.com/guide

Page 11: Modular CSS with Sass in Cascade Server
Page 12: Modular CSS with Sass in Cascade Server

Requirements

Compile SCSS

Modular for content re-use

Minify CSS

Easily publish changes

In Cascade Server

Page 13: Modular CSS with Sass in Cascade Server

Modules

Code

RenderedSCSSPage

SCSS Site

Compile SCSSMinify CSS

PHP

CascadeWeb Services

CSS File

Pages

Target Site

Website