Como utilizar scss en Rails (Rails Scss or Sassy css)?

content{
   margin-left: 20px;
   width: 500px;
}

content p{
   color: black;
   font-size: 10px;
}

content h1{
   color: blue;
   font-size: 20px;
}

content{
  margin-left: 20px;
  width: 500px;

  p{
   color: black;
   font-size: 10px;
  }

  h1{
   color: blue;
   font-size: 20px;
  }

}

Otro ejemplo

.btn{
  text: {
   decoration: underline
  }
}

Lo anterior generara en el application.css un codigo css como el siguiente

.btn{
   text-decoration: underline;
}

Utilizando el & (amperstand) para hacer referencia en Scss Rails.

 El amperstand (&) nos ayuda para hacer referencia al elemento padre.

.content {
  border: 1px solid #ccc;
  padding: 20px;
  .callout {
    border-color: red;
  }
  &.callout {
    border-color: green;
  }
}

Al generarse el código en css lucira de la siguiente manera

.content {
  border: 1px solid #ccc;
  padding: 20px;
}
.content .callout {
  border-color: red;
}
.content.callout {
  border-color: green;
}

 En este caso si queremos el borde verde necesitamos en nuestro elemento agregar ambas clases por ejemplo:

<div class= "content callout">Algo de contenido en el div</div>

Otro ejemplo utilizando referencia (amperstand)

a {
  color: #999;
  &:hover {
  color: #777;
  }
  &:active {
  color: #888;
  }
}

produce el siguiente codigo en css:

a {
 color: #999;
}
a:hover {
 color: #777;
}
a:active {
 color: #888;
}

O en caso de que desemos extender las propiedades  del padre o quieramos modificarlas en una declaracion diferente tambien podemos hacer algo como:

.padre {
 float: right;
 width: 300px;
 .contenido &{
   width: 400px;
 }
}

Esto producira el siguiente codigo css:

.padre {
 float: right;
 width: 300px;
}
.contenido .padre {
 width: 400px;
}

Como utilizar variables en Scss Rails

$principal: #444;
body {
  background: $principal;
}

Tambien podemos guardar contenido como lo siguiente:

$title = 'Contenido deseado'
h2:before {
  content: $title;
}

Para el momento de utilizar las variables podemos utilizar la expresion “!default” la cual indica que si no ha sido declarada anteriormente dicha variable en alguna parte del archivo o en otro archivo diferente entonces que tome ese valor pero si ya fue declarada con anterioridad entonces no sobreescribira el valor original por ejemplo:

$mivariable: black;
body {
  color: $mivariable
}
/*more code css here*/
$mivariable: yellow !default;
h2{
  color: $mivariable;
}

El codigo css generado sera el siguiente:

body{
 color: black;
}
h2{
  color: black;
}

Tambien podemos utilizar las variables en scss rails como elementos, o nombres de propiedades de la siguiente manera:

$selector = top;
.header {
  position: relative;
  #{$selector}: 30px;
}
  .#{$side}-menu{
}
/*esto genera */
.header {
  position: relative;
  top: 30px;
}
  .top-menu{
}

Como utilizar mixins en scss rails?

Los mixins nos ayudan por ejemplo para evitar la repeticion de codigo a continuacion un ejemplo:

.clase-a{
font-size: 16px;
width: 200px;
margin: 0 0 0 10px;
color: white;
}

.clas-b{
font-size: 16px;
width: 200px;
margin: 0 0 0 10px;
color: yellow;
}

Entonces para evitar esta repeticion de codigo vamos a utilizar un mixin:

@mixin base{
  font-size: 16px;
width: 200px;
margin: 0 0 0 10px;
}
.clase-a{
@include base;
color: white;
}
.clase-b{
@include base;
color: yellow;
}

Tambien podemos utilizarlos pasandoles parametros y en caso de que no le pasemos un argumento podemos dejarlo con un valor predeterminado en caso de que algunas ocasiones queremos agregar argumentos y en otras ocasiones no:

@mixin box-size($x ) {
 -webkit-box-sizing: $x;
 -moz-box-sizing: $x;
 box-sizing: $x;
}

/* Y los podemos utilizar de la siguiente manera */

.content {
 @include box-size;
 border: 1px solid #ccc;
 padding: 20px;
}
.callout {
 @include box-size(content-box);
}

En caso de que requieramos agregar mas de un argumento podemos hacerlo utilizando comas por ejemplo

@mixin ejemplo($arg1, $arg2){}

Lo unico importante al utilizar multiples argumentos es que debemos de recordar que si queremos pasar menos argumentos debemos declarar por default uno o todos para que cuando lo utilizemos y no le pasemos todos los argumentos requeridos no marque error.
Otra forma interesante de utilizar parametros es de la siguiente manera

@mixin base($color, $padding){
color: $color;
padding-left: $padding;
}
.clase{
$params = black, 20px;
@include base($params...);
}

Lo anterior automaticamente va a tomar los valore que le correspondan en ese orden que los pasemos.

cuando declaremos nuestros mixins y vayamos a declarar argumentos con valor por default debemos de recordar que primero deben de ir los argumentos sin valor por default y despues los que si tienen valor por ejemplo:

@mixin assemble($side, $bg: #fff, $pad: 10px) {
 background: $bg;
 border-#{$side}: 1px solid #ccc;
 padding: $pad;
}

.factory {
 @include assemble(left);
}
.highrise {
 @include assemble($bg: #797979, $pad: 20px, $side: right);
}