Created by Jackie Keiser
Here's a collection of things I've learned
about Sass since I started using it.
$example: 'value' !default;
You can assign variables if they are not already assigned by using !default. You can see examples of this in the Foundation framework's components files.
$image-path: /templates/images;
.example-image {
background-image: url('#{$image-path}/image.jpg');
}
Interpolation is where variables are replaced with their values within a string or expression
In CSS, @import is for linking to other stylesheets. In Sass, @import works with partials to actually take the the contents of a partial and insert them directly into the output CSS.
Partials are a special kind of Sass file. They must be imported into another stylesheet to be used and their filenames must start with an underscore.
scss/
|
|-- partials/ # Partials
| |-- _buttons.scss # buttons
| |-- _grids.scss # grids
| |-- _home.scss # homepage styles
| |-- _typography.scss # typography
| |-- _variables.scss # variables
| ...
|
|-- framework/ # Framework
| ...
|
`-- styles.scss # Primary Sass file that imports partials
Using a base file that imports partials helps organize files
The Inception Rule: don’t go more than four levels deep.
Check your output!
@media #{$small-only} { // Mobile datepicker uses the popup theme
@import "custom/pickadate-default";
@import "custom/pickadate-default-date";
}
@media #{$medium-up} { // Tablet up datepicker uses the inline theme
@import "custom/pickadate-classic";
@import "custom/pickadate-classic-date";
}
I found nesting partials to be helpful when I had a plugin that needed different styles for different media queries.
Play with this gist on SassMeister.
The ampersand is a way to reference parent selectors when nesting.
Play with this gist on SassMeister.
A mixin allows you to define reusable styles. They can take arguments to manipulate those styles.
Play with this gist on SassMeister.
A function can also take arguments but it is meant to return a value.
Placeholders are similar to mixins in that they are a group of reusable styles. The differences are that they do not accept arugments and instead of repeating the same block of styles, they group selectors together.
@for, @each, @while
$jackies-fav-colors: #9ECC16 #AA81FF #F92672;
Lists are like arrays. In Sass they can be comma or space seperated.
sass --watch input:output
sass --check input:output
Only checks syntax, doesn't evaluate.
sass --line-numbers input:output
Adds comments to the generated CSS that indicates the line numbers in the Sass files.
sass --quiet input:output
Silence warnings and status messages while compiling.
sass --style NAME input:output
Changes the style of your output. The options are nested (default), compact, compressed, or expanded.
sass --help
--help or -h works with a lot of things in the command line. Try it out!
Debugging with Sass partials got you down?
Add --sourcemap to your sass command
sass --watch --sourcemap sass/styles.scss:styles.css
Source maps allow you to see the original source CSS while debugging. When you run --sourcemap it adds a comment to the end of the css file that links to a .map file it created.
Enable source maps in your browser
Chrome, Firefox, and Safari supports source maps.
Check out Using source maps with Sass 3.3 on The Sass Way to find out how to enable them.
(http://thesassway.com/intermediate/using-source-maps-with-sass)
Sass is useful but with the addition of variables and partials, comments are more important than ever.
Using // will prevent your comments from showing up in your output. All comments are removed in compressed format.
//------------------------------------//
// **STOP**
//------------------------------------//
// This project currently uses Grunt. The grunt files have not been commited.
// Please contact Jackie before you make changes.
// Watch example
// sass --watch styles.css:scss/styles.scss
// Sass partials got you down? Add source maps for chrome
// https://developer.chrome.com/devtools/docs/css-preprocessors
// sass --watch --sourcemap styles.css:scss/styles.scss
//------------------------------------//
// Contents
//------------------------------------//
// Variables that can be used globally
@import "custom/variables";
@import "bourbon/bourbon";
// Makes browsers render all elements more consistently and in line with modern standards
@import "normalize";
// Foundation Settings
@import "foundation/settings";
// Foundation component calls. Comment out the ones that are not being used.
@import "foundation";
// All of the foundation overrides and additions
@import "custom";
//------------------------------------//
// General Notes on Eden Roc
//------------------------------------//
// Eden Roc is responsive and built mobile first. If you make a change, remember to
// check on all screen sizes because it will cascade.
// 320px - 767px (Mobiles, Small Tablets)
// 768px - 1229px (Tablets, Netbooks)
// 1230px - 1680+ (Desktop, Full-width)
// - This is the only file you need to watch
// - Media queries are nested and should follow this order:
// .element {
// Small styles
// @media #{$medium-up} { Medium up styles }
// @media #{$large-up} { Large up styles }
// }
// - CSS rules with one or two properties can be on one line. Rules with more than
// two declarations should be on multiple lines.
// .example { color: #999; font-size: 12px; }
// .example-2 {
// color: #999;
// background-color: red;
// font-size: 12px;
// }
// - Try to comment your code like I've done here! Use // so that it gets removed
// when sass compiles.
// - Add global variables to /custom/_variables.scss. Variables specific to a
// certain section or partial can be declared at the top of that section or
// partial.