SASS VS SCSSPeggy2015/05/08

CSS

缺點

• Repetition causes maintenance challenges

• Relationships are not clear

• Reasons are trapped in the mind of the designer

.msg {

padding: 24px;

}

.msg h3 {

padding: 24px;

margin: -24px -24px 0;

}

SASS

• Since the creation of Sass nearly 5 years ago, it has been plagued by many levels of controversy.

• It billed itself as "a better CSS" and added brand new features unheard of to CSS authors such as variables, nesting, mixins and inheritance.

• Sass also introduced an entirely different indentation-oriented syntax and a brand new perspective on how to author CSS.

(September 12, 2011 ~ Editorial, John W. Long)

Using CSS2SASS

CSS

header .nav {margin-top: 100px;

}header .nav li {

margin-left: 10px;}header .nav li a {

height: 30px;line-height: 10px;

}

SASS

header .navmargin-top: 100pxlimargin-left: 10pxa

height: 30pxline-height: 10px

The Same Style Rules

CSS

.footer {color: #b3b3b3;background-color: #fafafa;

}.copy {

color: #b3b3b3;background-color: #fafafa;

}

SASS

.footer, .copycolor: #b3b3b3background-color: #fafafa

Pseudo-class And Selector Combination

CSS

.button:hover {color: #ffffff;background-color: #bf813d;

}.button.active {

background-color: #986731;}

SASS

.button&:hovercolor: #ffffffbackground-color: #bf813d

&.activebackground-color: #986731

Pros For Sass

• Reason #1: The Sass syntax is more concise

• Reason #2: The Sass syntax is easier to read

• Because of its rules about indentation, it's kind of hard to write unreadable Sass. Sass forces you to write your code the same way every time.

• Reason #3: The Sass syntax doesn't complain about missing semi-colons

SCSS

• In version 3 of Sass, the SCSS (Sassy CSS) syntax was introduced as "the new main syntax" for Sass and builds on the existing syntax of CSS.

• It uses brackets(括弧) and semi-colons(分號) just like CSS. It doesn't care about indentation levels or white-space. • In fact, Sass's SCSS syntax is a superset of CSS – which means SCSS contains all the features

of CSS, but has been expanded to include the features of Sass as well. In layman's terms, any valid CSS is valid SCSS.

• And in the end, SCSS has the exact same features as the Sass syntax, minus the opinionated syntax.

NESTING 巢狀寫法

CSS

#navbar { width: 80%; height: 23px; }

#navbar ul { list-style-type: none; }

#navbar li { float: left; }

#navbar li a { font-weight: bold; }

SCSS

#navbar {

width: 80%;

height: 23px;

ul { list-style-type: none; }

li {

float: left;

a { font-weight: bold; }

}

}

PARENT REFERENCES 父層參照

CSS

a { color: #ce4dd6; }

a:hover { color: #ffb3ff; }

a:visited { color: #c458cb; }

SCSS

a {

color: #ce4dd6;

&:hover { color: #ffb3ff; }

&:visited { color: #c458cb; }

}

VARIABLES 變數

CSS

#navbar {

color: #ce4dd6;

border-bottom: #ce4dd6 2px

solid;

}

SCSS

$main-color: #ce4dd6;

#navbar {

color: $main-color;

border-bottom: $main-color

2px solid;

}

MIXINS

CSS

nav a {

text-decoration: none;

}

nav a:hover {

text-decoration: underline;

}

SCSS

@mixin hover-link {

text-decoration: none;

&:hover { text-decoration:

underline; }

}

nav a { @include hover-link; }

PROS FOR SCSS

• Reason #1: SCSS is more expressive

• Reason #2: SCSS encourages proper nesting of rules

• Reason #3: SCSS encourages more modular code with @extend

• Reason #4: SCSS allows me to write better inline documentation

• Reason #5: Existing CSS tools often work with SCSS

• Reason #6: Integration with an existing CSS codebase is much easier

• Reason #7: SCSS provides a much lower barrier to entry

• Reason #8: SCSS could become the next version of CSS