sass – Notes and Random Stuff

Installing in Mac:

gem install sass

comments: use /* */ for anything that will appear on the compiled file, and // for things that only show on the sass development files

When compiling, you can specify if you want your file compacted:

sass yourfile.scss ../css/yourfile.css –style compressed

Other styles: nested, compact, expanded

One of the most powerful features, mixings (example):

@mixin blue_text($size) {
color: #336699;
font-family: helvetica, arial, sans-serif; font-size: $size;
font-variant: small-caps; }

.product_title {
@include blue_text (15px); }

Example of rounded corners mixin:

@mixin rounded_borders($color, $width: 5px, $rounding: 5px) { -moz-border-radius: $rounding $rounding; -webkit-border-radius: $rounding $rounding; -khtml-border-radius: $rounding $rounding; -o-border-radius: $rounding $rounding;border-radius: $rounding $rounding;
border: $width $color solid; }

For mixings, it is always a good idea to put them on their own import file for maintainability (example):

@import “cross_browser_opacity.scss”; .h1 {@include opacity(60); }

@mixin opacity($opacity) {
filter: alpha(opacity=#{$opacity}); // IE 5-9+ opacity: $opacity * 0.01; }

Interpolation means you can have rule definitions that are dynamic:

.red_#{$carname} will generate .red_volvo if volvo is $carname

Here is an example of using this:

@mixin car_make($car_make, $car_color) {
// Set the $car_make with “_make” at the end as a class .car.#{$car_make}_make {
color: $car_color;
width: 100px;
.image {
background: url(“images/#{$car_make}/#{$car_color}.png”); }

} }

And, this is the way you iterate in sass:

@each $member in thom, jonny, colin, phil { .#{$member}_picture {

background-image: url(“/image/#{$member}.jpg”); } }

But just wait a minute: you can also use if statements:

@mixin country_color($country) { @if $country == france {

color: blue; }
@else if $country == spain {

color: yellow; }
@else if $country == italy {

color: green; } @else {
color: red; } }

Writting media queries:

.main {
color: #336699; font-size: 15px; @media print { font-size: 10px; } }

This compiles to:

.main {
color: #336699; font-size: 15px; } @media print {
.main {
font-size: 10px; } }

layouts

The default layout (applied to all controllers) is: app/views/layouts/application.html.erb You can overwrite it by:

creating a erb file with the name of the controller you want to make a custom layout for in the layouts directory (for example: app/views/layouts/mycontroller.html.erb)

explicitly overwrite the layout to be used inside the controller:

class ExampleController < ApplicationController
  layout 'my_layout' # Will use a layout in app/views/layouts/my_layout.html.erb
end

explicitly specify a layout in an action inside a controller (just for that action): render :layout => ‘my_layout’
explicitly state you don’t want a layout: render :layout => false

partials

app/views/layouts/_footer.html.erb (take note of the underscore before the partial name)

It is called from the code as:
<%= render ‘layouts/footer’ %>

You can pass arguments to partials as follows:

<%= render 'header', :title => 'My Blog' %>

partials have a shortcut to render objects, as follows:
<%= render @article %>
It is the equivalent to:
<%= render ‘articles/article’, :article => @article %>

It basically renders the _article partial under articles, with the object assigned to the variable @article.

You could even render a collection of articles, via:
<%= render @articles %>

Note: if you overwrite views/layouts/application, you may want to include the following tag in it:

<%= csrf_meta_tags %>

This is the tag that automatically generates a security token when you post forms, use it to avoid cross domain attacks.

stylesheet_link_tag

stylesheet_link_tag is for including CSS stylesheets from the app/assets/stylesheets directory. The links have a cache buster that is based on the digest content of the files. Example of the output in the HTML of this:

<link rel="stylesheet" href="/assets/projects-[digest].css?x52773"
media="all" data-turbolinks-track="true" />
<link rel="stylesheet" href="/assets/application-[digest].css?x52773"
media="all" data-turbolinks-track="true" />

Sprockets is the name of the gem that takes care of the assets pipeline.

The other css link assets pipeline will take care of for you look on the following directories: will app/assets, lib/assets, and vendor/assets, in that order, and generate a concatenated CSS file with the contents of the css files there. In development mode you get a non-concatenated version of it.

Inside app/assets, if you have a .scss extension, your file will get sass pre-processed before it gets generated. There is usually a [name of your app].scss file there waiting to be filled.

javascript_include_tag

javascript_include_tag, when in the application.html.erb page, loads the javascript from the app/assets/javascripts/application.js directory.

This ends up loading jquery, turbolinks, and any files contained inside app/assets/javascripts, and concatenate them into a javascript output file in: application.js

In development mode, you get all these files separated from each other.

Any files with the .coffee extension will be treated as coffescript files, and precompiled into javascript along the way.