Sass: Sass Basics
Before you can use Sass, you need to set it up on your project. If you want to just browse here, go ahead, but we recommend you go install Sass first. Go here if you want to learn how to get everything set up. PreprocessingPreprocessing permalink CSS on its own can be fun, but stylesheets are getting larger, more complex, and harder to maintain. This is where a preprocessor can help. Once you start tinkering with Sass, it will take your preprocessed Sass file and save it as a normal CSS file that you can use in your website. The most direct way to make this happen is in your terminal. You can also watch individual files or directories with the --watch flag. sass --watch input.scss output.css You can watch and output to directories by using folder paths as your input and output, and separating them with a colon. sass --watch app/sass:public/stylesheets Sass would watch all files in the app/sass folder for changes, and compile CSS to the public/stylesheets folder. 💡 Fun fact: SCSS Syntax
Compass Help
Compass is an open-source CSS authoring framework which uses the Sass stylesheet language to make writing stylesheets powerful and easy. If you're not familiar with Sass, you can take a look at these simple tutorials to get caught up. An introduction to Compass from Lorin Tackett on Vimeo. Installing Compass Compass is a tool that runs on the command line. gem install compass This will install Compass and Sass too. compass version Manual Setup compass create /path/to/project cd /path/to/project compass watch Now you can edit the *.scss files in the sass directory with the text editor of your choice. the compass watch process will automatically compile your them into css in the stylesheets directory whenever they change. Manual setup using the Blueprint Framework When starting a project from scratch: compass create /path/to/project --using blueprint When installing into an existing project: cd /path/to/project compass install blueprint Rails Setup compass init rails /path/to/myrailsproject
Sass Style Guide
With more people than ever writing in Sass, it bears some consideration how we format it. CSS style guides are common, so perhaps we can extend those to cover choices unique to Sass. Here are some ideas that I've been gravitating toward. Perhaps they are useful to you or help you formulate ideas of your own. Use Your Regular CSS Formatting Rules / Style Guide This post is about Sass-specific stuff, but as a base to this, you should follow a whatever good CSS formatting guidelines you are already following. Be consistant with indentationBe consistant about where spaces before/after colons/braces goOne selector per line, One rule per lineList related properties togetherHave a plan for class name namingDon't use ID's #hotdramaetc List @extend(s) First .weather { @extends %module; ... } Knowing right off the bat that this class inherits another whole set of rules from elsewhere is good. List "Regular" Styles Next List @include(s) Next Nested Selectors Last Nothing goes after the nested stuff. ...
Sass control directives: @if, @for, @each and @while
Sass control directives are the cornerstone of creating libraries for reuse and distribution, and need to be among the very first items on your list of things to learn when taking your Sass skills to the next level. A crash course to Sass control directives Sass control directives provide flow and logic and give you a finite level of decision making required by mixins and functions. In this guide, we will be covering: @if, @for, @each and @while. Working Code If you'd like to follow along using the compass project used to create this guide, check out the working code on GitHub. @if The @if control directive takes a SassScript expression and processes its block of styles if the expression returns anything other than false. Here's a fairly simple example of an @if control directive. Which emits this CSS: Also notice that I've added @debug followed by a string in each flow option. For example, if you ran this code this is what you would see in the command-line output. /Users/... @for @each @while
Getting started with Sass and Compass
So your friend, co-worker, web-buddy or whomever told you about Sass, Compass … or both. Great! Now what? In this beginner guide we take you through the first steps of getting started with Sass and Compass. We walk you through installation, creating a test project, compiling your first lines of Sass to CSS, and we even "mixin" a little Sass history. Install Sass and Compass Sass and Compass get installed as Ruby gems so you'll need to have Ruby on your machine. If you're on Windows, you can run the Ruby Installer. Getting Ruby in place is beyond the scope of this article, so, if you hit any snags hit up the mailing list if you need help finding the right resources for getting Ruby on your machine. Install Sass Ok, let's install Sass! Windows: Linux / OS X: For Linux and OS X folks, depending on your setup, you may or may not need to install gems under the sudo user. Ok, I know what you're thinking. If you are intimidated by the command line, don't be. CSS Parser Create a test project Do it.
Understanding placeholder selectors
Sass provides a number of different ways to share code between CSS rules. You can use mixins to insert new CSS properties and/or rules into your CSS and you can use @extend to share CSS properties between selectors. Sass 3.2 introduces a new concept called "placeholders" to make @extend generate more efficient output. But before we get into that, let's talk about how extend works… How extend works The @extend directive allows us to easily share styles between selectors. Which will generate the following output: What's going on here? Now here comes the interesting part. Enter placeholder selectors Placeholder selectors were introduced to solve this exact problem. Going back to our initial example, if our icon styles are defined like so: The following CSS will be generated: Notice how .icon is no longer present in the compiled CSS! Extend vs. include At first glance it may look like placeholder selectors are the same as parameterless mixins. This will generate the following CSS: Limitations
The Sass Way
Sass: Install Sass
Applications There are a good many applications that will get you up and running with Sass in a few minutes for Mac, Windows, and Linux. You can download most of the applications for free but a few of them are paid apps (and totally worth it). CodeKit (Paid) Mac Ghostlab (Paid) Mac Windows Hammer (Paid) Mac LiveReload (Paid, Open Source) Mac Windows Prepros (Paid) Mac Windows Linux Scout-App (Free, Open Source) Windows Linux Mac Libraries The Sass team maintains two Node.js packages for Sass, both of which support the standard JavaScript API. There are also community-maintained wrappers for the following languages: Java, including a Gradle plugin. Command Line When you install Sass on the command line, you'll be able to run the sass executable to compile .sass and .scss files to .css files. sass source/stylesheets/index.scss build/stylesheets/index.css First install Sass using one of the options below, then run sass --version to be sure it installed correctly. Learn More About Sass
