React + sass

SassNurielly Caroline Brizola
http://sass-lang.com/guidenurycaroline@gmail.com
@nurycaroline

Sass
● Pré-processadores CSS3 são linguagens criadas com
um único propósito de adicionar funcionalidades legais
e criativas para o CSS sem quebrar a compatibilidade
entre browsers.
● Ajuda a manter grandes planilhas de estilo organizadas.

Variáveis
$width: 5px;
$red: #f4425c;
#sidebar {
width: $width;
color: $red;
}
#sidebar {
width: 5px;
color: #f4425c;
}
Resultado

Nesting / Aninhamento
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li {
display: inline-block;
}
}

Nesting / Aninhamento - Resultado
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
}

Operações
article[role="main"] {
float: left;
width:
600px/960px*100%;
}
article[role="main"]{
float: left;
width: 62.5%;
}
Resultado

Mixin
$red: 'red';
@mixin input-color($color) {
border: 2px solid $color;
color: $color;
}
.input.red buttom{
background-color: #FFF;
@include input-color($red);
}

Mixin - Resultado
.input.red buttom {
border: 2px solid "red";
color: "red";
}

Condicionais
$colors: (red: $red, blue: $blue);
@each $type, $color in $colors {
.#{$type}{
color: $color;
}
.b-#{$type}{
background-color: $color;
}
}

Condicionais - Resultado
.red {
color: #C43D27;
}
.b-red {
background-color: #C43D27;
}
.blue {
color: #07BED6;
}
.b-blue {
background-color: #07BED6;
}

Mixin Each
$red: 'red'; $blue: 'blue';
$colors: (red: $red, blue: $blue);
@mixin input-color($color) {
border: 2px solid $color;
color: $color;
}
@each $chave, $color in $colors {
.configs.#{$chave} input{
@include input-color($color);
}
}

Mixin Each - Resultado
.configs.red input {
border: 2px solid "red";
color: "red";
}
.configs.blue input {
border: 2px solid "blue";
color: "blue";
}

React + SASS
import './App.sass';
export default class App extends
React.Component {
render() {
return (
<div className=”red”><div>
);
}
}

React + sass

Mais conteúdo relacionado

Semelhante a React + sass (20)

Último (12)

React + sass

Notas do Editor