(Follow along at http://taupecat.github.io/sassywp)
I'm getting Sassy at #WCNYC!
.sidebar {
border-left: 1px solid #262626;
padding-left: 20px;
aside {
margin-bottom: 20px;
a {
color: #ffe44b;
&:hover, &:active, &:focus {
color: #e10000;
}
}
}
}
.sidebar {
border-left: 1px solid #262626;
padding-left: 20px;
}
.sidebar aside {
margin-bottom: 20px;
}
.sidebar aside a {
color: #ffe44b;
}
.sidebar aside a:hover,
.sidebar aside a:active,
.sidebar aside a:focus {
color: #e10000;
}
$color-primary: #002366;
$font-header: Roboto, "Helvetica Neue", Arial, sans-serif;
body {
background-color: $color-primary;
}
h1, h2, h3 {
font-family: $font-header;
}
.subtitle {
font-family: $font-header;
}
body {
background-color: #002366;
}
h1, h2, h3 {
font-family: Roboto, "Helvetica Neue", Arial, sans-serif;
}
.subtitle {
font-family: Roboto, "Helvetica Neue", Arial, sans-serif;
}
%widget-default {
background-color: #FFFCEB;
color: #262626;
text-decoration: underline;
}
.sidebar {
@extend %widget-default;
font-size: 13px;
}
.footer-widget-area {
@extend %widget-default;
font-size: 16px;
}
.sidebar,
.footer-widget-area {
background-color: #FFFCEB;
color: #262626;
text-decoration: underline;
}
.sidebar {
font-size: 13px;
}
.footer-widget-area {
font-size: 16px;
}
Sass has partials, imported files that are concatenated into one bigger file and not processed separately.
-rw-r--r-- 1 taupecat staff 153 May 24 23:36 _asides.scss
-rw-r--r-- 1 taupecat staff 130 May 24 23:37 _comments.scss
-rw-r--r-- 1 taupecat staff 300 May 24 23:35 _content.scss
-rw-r--r-- 1 taupecat staff 5904 May 26 20:55 _global.scss
-rw-r--r-- 1 taupecat staff 298 May 24 23:37 _navigation.scss
-rw-r--r-- 1 taupecat staff 1731 May 25 22:02 _reset.scss
-rw-r--r-- 1 taupecat staff 1731 May 25 22:02 project.scss
@import "reset";
@import "global";
@import "navigation";
@import "content";
@import "asides";
@import "comments";
Awesome for responsive design, when you need:
/* target / context = result */
@function calc-percent($target, $context) {
@return ($target / $context) * 100%;
}
.main-content {
width: calc-percent(600px, 960px);
}
.main-content {
width: 62.5%;
}
$default-font-size: 16px !default;
@mixin rem($property, $value, $context: $default-font-size) {
#{$property}: $value; /*! IE8 Fallback */
#{$property}: ($value / $context * 1rem);
}
h1 {
@include rem(font-size, 18px);
}
h1 {
font-size: 18px; /*! IE8 Fallback */
font-size: 1.125rem;
}
This is the awesome sauce that makes responsive web design soooo much easier.
.main-content {
background-color: LavendarBlush
@media only all and (min-width: 560px) {
float: left;
margin-right: calc-percent( 20px, 960px );
width: calc-percent( 600px, 960px );
}
}
.sidebar {
background-color: MediumSlateBlue;
@media only all and (min-width: 560px) {
float: left;
width: calc-percent( 340px, 960px );
}
}
Note: Just an illustration.
There are actually better ways to do this.
.main-content {
background-color: LavendarBlush;
}
@media only all and (max-width: 560px) {
.main-content {
float: left;
margin-right: 2.083333333333%;
width: 62.5%;
}
}
.sidebar {
background-color: MediumSlateBlue;
}
@media only all and (max-width: 560px) {
.sidebar {
float: left;
width: 35.416666666667%;
}
}
There are even more advanced features
that I won't go into detail here:
*Sucking is a highly subjective term.
When wouldn't you use Sass?
Uh, I dunno.
Every day: It’s just a few styles. I won’t need SASS [sic]. Five minutes later: I really wish I had done this in SASS.
— Yuri Victor ♥ (@yurivictor) June 15, 2014