SASS and SCSS are both CSS preprocessors that add features like variables, nesting, and mixins to regular CSS. SASS uses indentation for its syntax while SCSS uses brackets and semi-colons like regular CSS. SCSS was introduced as the new main syntax for Sass and is a superset of CSS, so any valid CSS is also valid SCSS. Both SASS and SCSS have the same features but SCSS has a more familiar syntax for CSS authors.

1. SASS VS SCSS
Peggy
2015/05/08

2. 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;
}

3. 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)

4. 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 .nav
margin-top: 100px
li
margin-left: 10px
a
height: 30px
line-height: 10px

5. The Same Style Rules
CSS
.footer {
color: #b3b3b3;
background-color: #fafafa;
}
.copy {
color: #b3b3b3;
background-color: #fafafa;
}
SASS
.footer, .copy
color: #b3b3b3
background-color: #fafafa

6. Pseudo-class And Selector Combination
CSS
.button:hover {
color: #ffffff;
background-color: #bf813d;
}
.button.active {
background-color: #986731;
}
SASS
.button
&:hover
color: #ffffff
background-color: #bf813d
&.active
background-color: #986731

7. 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

8. 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.

9. 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; }
}
}

10. PARENT REFERENCES 父層參照
CSS
a { color: #ce4dd6; }
a:hover { color: #ffb3ff; }
a:visited { color: #c458cb; }
SCSS
a {
color: #ce4dd6;
&:hover { color: #ffb3ff; }
&:visited { color: #c458cb; }
}

11. VARIABLES 變數
CSS
#navbar {
color: #ce4dd6;
border-bottom: #ce4dd6 2px
solid;
}
SCSS
$main-color: #ce4dd6;
#navbar {
color: $main-color;
border-bottom: $main-color
2px solid;
}

12. 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; }

13. 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