This document discusses using SASS to modularize CSS with features like partials, mixins, imports and output styles. Partial files allow reusable code snippets to be imported. Mixins can accept parameters like functions. The SASS file is compiled to CSS. Features like partials, mixins, imports and a compressed output style can help organize and optimize CSS.
2. SASS Syntax
Save as .sass
$font-base-size: 16px
$link-color: #ff0000
body
font: $font-base-size
a
color: $link-color
Save as .scss
$font-base-size: 16px;
$link-color: #ff0000;
body {
font: $font-base-size;
}
a {
color: $link-color;
}
.sass use indent to interpret syntax(error-prone, if you are careless), we use SCSS syntax in OrderPath.
RealNetworks, Inc.2014/7/31 2
A tale of two syntax
6. Media Queries
.first-name, .last-name {
width: 9.64286em;
@media only screen and (min-width: 321px) {
width: 15.35714em;
}
@media only screen and (min-width: 321px) and (max-
width: 360px) {
width: 10.92857em;
}
}
.first-name, .last-name {
width: 9.64286em;
}
@media only screen and (min-width: 321px) {
.first-name, .last-name {
width: 15.35714em;
}
}
@media only screen and (min-width: 321px) and (max-width: 360px) {
.first-name, .last-name {
width: 10.92857em;
}
}
RealNetworks, Inc.2014/7/31 6
7. Partials
A partial is simply a Sass file named with a leading underscore. You might name it something like _partial.scss. The
underscore lets Sass know that the file is only a partial file and that it should not be generated into a CSS file. Sass
partials are used with the @import directive.
- sass-lang.com
_lightbox.scss
.lightbox {
position: relative;
background: #fff;
#close {
position: absolute;
right: 5px;
top: 5px;
}
}
.lightbox-outer {
padding: 2em 0;
z-index: 20;
}
billing.scss
@import "lightbox"
billing.css
.lightbox {
position: relative;
background: #fff;
}
.lightbox #close {
position: absolute;
right: 5px;
top: 5px;
}
.lightbox-outer {
padding: 2em 0;
z-index: 20;
}
RealNetworks, Inc.2014/7/31 7
8. Mixins
A mixin lets you make groups of CSS declarations that you want to reuse throughout your site. You can even pass in
values to make your mixin more flexible.
- sass-lang.com
_misc.scss
@mixin centererie($width, $height, $top: 50%, $left: 50%) {
position: absolute;
top: $top;
left: $left;
margin-left: ($width / 2) * -1;
@if $top == 50% {
margin-top: ($width / 2) * -1;
}
}
billing.scss
.lightbox {
@include centererie(290px, 459px, 22px);
}
billing.css
.lightbox {
position: absolute;
top: 22px;
left: 50%;
margin-left: -145px;
}
RealNetworks, Inc.2014/7/31 8
10. SASS - install, compile and watch changes
1. install ruby
2. install sass gem
I. gem install sass
II. sass -v
3. compile scss into css
sass billing.scss billing.css
4. watch single files changes
sass –watch billing.scss:billing.css
5. watch folders changes
sass –watch stylesheets:dist/css
RealNetworks, Inc.2014/7/31 10
11. Output Style
2014/7/31 RealNetworks, Inc. 11
There’re four different output styles to set using –style options in command line. :nested, :expanded, :compact
and :compressed.
:compressed( in production)
.try-again,.tech-diff .try-again{font-size:2.4em;margin-bottom:3.5em}
:expanded(using in development/debug)
.try-again,.tech-diff .try-again{
font-size:2.4em;
margin-bottom:3.5em
}
12. More Features…
2014/7/31 RealNetworks, Inc. 12
conditional expressions(@if, @for), Interpolation, %placeholders, Functions
Learn more
7 Sass features you should be familiar with
Bootstrap-sass