Primero que nada para poder utilizar scss en rails necesitamos agregar nuestra gema en nuestro archivo Gemfile de la siguiente manera:
gem 'sass-rails', '~> 3.2.3'
Despues necesitamos ejecutar desde el directorio de nuestro proyecto en la linea de comandos (consola):
bundle install
Para realizar comentarios en nuestros archivos de estilos .scss en rails, podemos utilizar los comentarios que se reflejaran en el archivo .css o tambien hay los comentarios que solo los veran las personas que tengan el archivo fuente
Comentarios no publicos se utilizan de la siguiente manera:
//mis comentarios aqui
Si deseamos que todos vean estos comentarios realizamos lo siguiente:
/* Mis Comentarios aqui */
Si necesitamos importar archivos de estilo (cargarlos en un orden deseado) en el archivo:
app / assets / stylesheets / application.css.scss
Podemos escribir algo como lo siguiente:
@import 'botones'; @import './application/crossbrowser';
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);
}
No Comments