Playing on SassMeister_Sass and Compass Designer's Cookbook-QQ阅读仙侠女生网

上QQ阅读APP看书，第一时间看更新

Playing on SassMeister

SassMeister is a project of Jed Foster and Dale Sande. SassMeister is a playground for Sass, Compass, and LibSass. You can easily test and share your Sass code on SassMeister. In this recipe, you will be introduced to SassMeister.

Getting ready

For this recipe, you will only need a web browser to visit SassMeister at http://sassmeister.com.

How to do it...

The steps below demonstrate you how to test your code on the SassMeister playground for Sass:

In your browser, navigate to http://sassmeister.com.
You can directly start using SassMeister or you can log in with your GitHub account.

Write down the following SCSS code in the upper-left SCSS input area of SassMeister:

@mixin set-width($width) {
  @if $width < 50 {
    @error "width should be >= 50";
    $width: 1px * $width;
  }
  @if unit($width) not "px" {
    @warn "width (#{$width}) converted to pixels";
    $width: 1px * $width;
  }
  $width: $width * 10;
  @debug "width: #{$width}";
  width: $width;
}

div {
  @include set-width(50);
  background-color: red;
  color: white;
  padding: 20px;
}

In the upper-right HTML area, you should write down the following line of HTML code:
```
<div>Playing on SassMeister</div>
```
Now you will find the compiled CSS code in the middle area. The HTML will be rendered in the bottom area.

Your SassMeister page should look like the following screenshot:

How it works...

SassMeister compiles your SCSS online and applies the compiled CSS directly to your HTML code. The code used in this recipe is the same code as the one used for the Using the @debug, @warn and @error directives recipe of this chapter. Read this recipe to learn more about the directives and find references for the SCSS code used.

SassMeiser does not output the @debug and @warn messages. The @error messages are outputted and stop the compilation process.

There's more...

Via the Settings button in the right corner of the UI of SassMeister, you can configure the compilation process. The Settings panel looks like the following screenshot:

As you can see in the previous screenshot, you can easily switch between different versions of Sass, not only between the older versions, but also between Ruby Sass and LibSass. In the Using the sass- -gulp plugin with Gulp recipe of Chapter 1, Getting Started with Sass, you can read that that there may be slight differences between Ruby Sass and LibSass. With SassMeister, you can easily test your code on both Ruby Sass and LibSass without having to install them both.

You can also switch between the Sass and SCSS syntaxes. When you switch between the syntaxes, SassMeister automatically converts your code from Sass into SCSS or vice versa. In the Writing Sass or SCSS recipe of Chapter 1, Getting Started with Sass, you can read more about the differences between Sass and SCSS code. In this book, the SCSS syntax for Sass will be used.

Another interesting feature is the ability to add and integrate Sass extensions in your code. The list of extensions includes, among others, Compass, as discussed in Chapter 6, Using Compass; Bourbon and Neat, as discussed in Chapter 13, Meeting the Bourbon Family; Foundation, as discussed in Chapter 11, Foundation and Sass; and Susy, as discussed in Chapter 10, Building Grid-based Layouts with Susy and Sass. So, you can easily test these extensions without having to install them first.

Finally, you can choose the output style for your compiled code, as described in the Choosing your output style recipe of Chapter 1, Getting Started with Sass.