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