SASS

sass.md

SASS

SASS é um pré processador de CSS escrito em Ruby. Com ele podemos desenvolver lógicas de programação no código css.

Veja a metodologia BEM

Instalação node-sass

npm install node-sass --save-dev
npm install concat --save-dev
npm install autoprefixer --save-dev
npm install postcss-cli --save-dev
npm install npm-run-all --save-dev

npm install live-server -g

O autoprefixer precisa do postcss-cli

Para compilar:

No package,json

{
  "scripts": { 
    "watch:sass": "node-sass sass/main.scss css/style.css -w",
    "devserver": "live-server",
    "start": "npm-run-all --parallel devserver watch:sass",
    
    "compile:sass": "node-sass sass/main.scss css/style.comp.css",
    "concat:css": "concat -o ./css/style.concat.css ./css/icon-font.css ./css/style.comp.css ",
    "prefix:css": "postcss --use autoprefixer -b 'last 10 versions' ./css/style.concat.css -o ./css/style.prefix.css",
    "compress:css": "node-sass ./css/style.prefix.css ./css/style.css  --output-style compressed",
    "build:css": "npm-run-all compile:sass concat:css prefix:css compress:css"
  },
  "devDependencies": {
    "autoprefixer": "^10.4.7",
    "concat": "^1.0.3",
    "node-sass": "^7.0.1",
    "npm-run-all": "^4.1.5",
    "postcss-cli": "^9.1.0"
  }
}

Syntaxe do SASS

Podemos ter duas syntax de sass: SASS Original e SCSS

SASS Original

.navigation
  list-style: none
  float: left
  
  & li
    display: inline-block
    margin-left: 30px

SCSS ou CSS Sassy

.navigation {
  list-style: none;
  float: left;
  
  & li {
    display: inline-block;
    margin-left: 30px;
  }
}

Principais Features

• Import
• Nesting
• Variáveis
• Mixins
• Expressions
• Funções
• Condicionais
• Loop

Import

Vamos criar um arquivo main.scss e este recebere por import todos os outros arquivos.

Criando os arquivos: _footer.scss, _header.scss. Usamos o underline na frente do arquivo para o compilador não gerar outro arquivo .css desses arquivos, pois queremos somente o arquivo main.scss compilado para .css.

main.scss

@import "layout/footer";
@import "layout/header";

A precedência dos arquivos é importante e não precisamos colocar o prefix underline e nem a extensão .scss

Nesting ( aninhamento )

nav {
  ul {
    li {
      list-style: none;
      display: inline-block;
      a {
        text-decoration: none;
        padding: 10px;

        &:hover {
          background-color: aqua;
        }
      }
    }
  }
}

Variaveis

No css

:root {
  --primary-color: green; 
 }
 
 background-color: var(--primary-color);

sass

$bgcolor: red;

background-color: $bgcolor;

Mixins

É parecido com uma função que aplica varias propriedades em um local.

Declarando o mixin

@mixin card($pcolor) {
 background-color: $pcolor;
 font-size: 20em;
}

Usando

 li {
      list-style: none;
      display: inline-block;
     
      @include card(green);
}

Vai gerar

 li {
     list-style: none;
     display: inline-block;     
     background-color: green;
     font-size: 20em;
}

Mixin com @content

Declarando o mixin

@mixin responsive($breakpoint) {
 @if $breakpoint == phone {
     @media only screen and (max-width: 37.5em) { @content };    //600px
 }
 @if $breakpoint == tab-port {
     @media only screen and (max-width: 56.25em) { @content };     //900px
 }
 @if $breakpoint == tab-land {
     @media only screen and (max-width: 75em) { @content };    //1200px
 }
 @if $breakpoint == big-desktop {
     @media only screen and (min-width: 112.5em) { @content };    //1800
 }
}

Usando

@include respond(tab-port) {
    float: left;
    position: relative;
    width: 33.33333333%;
    box-shadow: 0 1.5rem 3rem rgba($color-black, .2);
}

Vai gerar

  @media only screen and (max-width: 75em) { 
     float: left;
     position: relative;
     width: 33.33333333%;
     box-shadow: 0 1.5rem 3rem rgba($color-black, .2);
  };

Funções

Uma função precisa ser declaranda antes de ser usada.

Declarando uma função

@function changeColor($type, $color) {
  @if $type == light {
    @return  lighten($color, 10%);
  } @else if $type == dark {
    @return darken($color, 10%);
  }
  @return  $color;
}

Usando

background-color: changeColor(light, red);

Loops

$network: youtube, twitter, facebook, linkedin;

@each $icon in $network {
  .icon-#{$icon} {
    background-image: url('img/#{$icon}.svg');
  }
}

Gera

.icon-youtube {
  background-image: url("img/youtube.svg"); }

.icon-twitter {
  background-image: url("img/twitter.svg"); }

.icon-facebook {
  background-image: url("img/facebook.svg"); }

.icon-linkedin {
  background-image: url("img/linkedin.svg"); }

Declarando for

@for $item from 1 through 3 {
  li:nth-child(#{$item}){background-color: 10000 * $item;}
}

Gera

li:nth-child(1) {
  background-color: 10000; }

li:nth-child(2) {
  background-color: 20000; }

li:nth-child(3) {
  background-color: 30000; }

Links

CSS

Metodologia BEM

CSS Flexbox

CSS Grid