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

Modular CSS with Sass in Cascade Server

Embed Size (px)

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

Citation preview

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