fbpx

Welcome to Gappsy 2.0

Looking for a Specific Product?

Our Services

Web Design

Your content goes here. Edit or remove this text inline.

Logo Design

Your content goes here. Edit or remove this text inline.

Web Development

Your content goes here. Edit or remove this text inline.

VIEW ALL SERVICES

Shop Our Products

Hoodies

Your content goes here. Edit or remove this text inline.

T-Shirts

Your content goes here. Edit or remove this text inline.

Jeans

Your content goes here. Edit or remove this text inline.

BROWSE ALL OUR PRODUCTS

More of us

Customer Reviews

Your content goes here. Edit or remove this text inline.

Good Stuff We do!

Your content goes here. Edit or remove this text inline.

More From Us...

Your content goes here. Edit or remove this text inline.

EXPLORE CUSTOMERS STORIES

Custom CSS Documentation

How to use the Advanced Customization CSS / SCSS

Where can you do this?

The section in the Colors menu allows you to customize your application deeper with CSS / SCSS. Here is an example with a modification based on the Layout 6 by using the advanced customization with CSS / SCSS in an app:

Screen Shot 2016-09-08 at 15.24.59

The version without these customizations:

Screen Shot 2016-09-08 at 16.32.12

What is CSS?

CSS is a programming language (simple one)  to format and shape a page. It stands for Cascading Style Sheet and define how the HTML5 elements are displayed. More information here.

 

 

What is SCSS?

SCSS is a superset of CSS3. It adds more options to classic CSS by using, especially, nesting and variables.

As an example, here are two style sheets written in CSS and SCSS:

 

CSS code:

 

The same written in SCSS code:

 

What’s the difference between the two?

1. If you look at the code above you can see there is a variable 

, and this variable is called in the CSS itself as a value of the property “color”, see: 

The power of this is you can call a variable in your CSS, and then you would have to work only on the value of this variable to change the value of all the selectors that uses this variable. The difference with classic CSS is that you would have to change the value of the property for every selectors rather than changing it once for all selectors.

2. If you compare the two codes above, both have 3 selectors, two of them are children of a main selector. In SCSS the children can be nested in the parent. It makes the code easier to read, write and maintain. So instead of writing in CSS:

in SCSS you would write:

 

3. You can see there is the same for some properties which can be split in parent and child properties. For example, in SCSS 

becomes a child property of the parent property “font”

in CSS:

in SCSS:

 

X