SASS WEBPACK

SASS - Pré Processador de CSS

É transformado pelo SASS e reescrito para css.

KOALA-app.com

Instalando o SASS

O Sass Pode ser instalado por aplicação ou linha de comando.

npm install -g sass

Testar se estiver instalado.
C:\xampp74\htdocs\Jquery>sass --version
1.36.0 compiled with dart2js 2.13.4

Usando o SASS

compilando sass assets/sass/base.sass /assets/css/style.css
sass assets/sass/base.sass /assets/css/style.css --no-source-map
sass assets/sass/base.sass /assets/css/style.css --no-source-map --style compressd (Por padrão é o comprimido)

Usando o Watch no Sass ( Autocompile via linha de comando)

sass assets/sass/base.sass /assets/css/style.css --no-source-map --style compressd --watch
Comando watch fica monitorando.

Variáveis SASS

$cor-fundo:#EEEEE;
$cor-fonte:#3333;


Sass: Importando outros arquivos

Importação de arquivos sass.
@import 'meuestilo'; 

Sass: Mixin

Utilizado principalmente quando sistemas crescem, ou são grandes.

O SASS é uma linguagem que extende o CSS que facilita o dia-a-dia do programador web e é essencial hoje em dia no desenvolvimento front-end .

Ele possuí duas funcionalidades muito legais que evitam que não repitamos o código, elas são o @mixin e %placeholders.

Ambas são muito úteis quando você tem uma série de regras css que se repetem em diversos seletores, porém os meandros das duas são bem diferentes.

Sass: Expandindo propriedades

Utilizado para Reaproveitar código.

 %fundamento-msg{

     padding: 10px;

     font-size: 24px;

     border: 2px solid #CCC;

 }

 .msg-info{

     @extend %fundamento-msg;

     border-color:#0000FF;

     color:#0000FF;

 }

Sass: Operações Matemáticas

Pode ser utilizado operações.

 %fundamento-msg{

     padding: 10px;

     font-size: 24px;

     border: 2px solid #CCC;

 }

 $item-width : 250px;

 .msg-info{

     @extend %fundamento-msg;

     width: $item-width * 2;

     border-color:#0000FF;

     color:#0000FF;

 }




Sass: Condicionais e Loops

$base-color: #036

@for $i from 1 through 3
  ul:nth-child(3n + #{$i})
    background-color: lighten($base-color, $i * 5%)

SASS: hover

WEBPACK

O webpack é um empacotador de módulos estáticos para aplicações JavaScript modernas. Ao processar a aplicação o webpack gera um gráfico que mapeia cada módulo e suas dependências e gera um ou mais pacotes.

Recomenda-se a utilização do NPM.
npm install webpack webpack-cli --save-dev 

Como rodar o WEBPACK
npx webpack

 

WEBPACK Arquivo de Configuração
A partir da versão 4 não é mais obrigatório o arquivo de configuração.
npx webpack --config webpack.config.js
Definimos basicamente as entradas e saídas da compilação ex: 

const path = require('path');

module.exports = {

    entry:'./src/index.js',

    outupt:{

        filename:'script.js',

        path:path.resolve(__dirname,'dist')

    }

}