szit

Ez az oldal csak olvasható. Megtekintheted a forrását, de nem változtathatod meg. Ha úgy gondolod, hogy ez helytelen, kérdezd az Adminisztrátorokat!

[[oktatas:web:nodejs:gulp|< Gulp]]

====== Gulp - Sass ======

  * **Szerző:** Sallai András
  * Copyright (c) Sallai András, 2022
  * Licenc: [[https://creativecommons.org/licenses/by-sa/4.0/|CC Attribution-Share Alike 4.0 International]]
  * Web: https://szit.hu

===== Projekt készítése =====

  mkdir app01
  cd app01
  npm init -y
  npm install --save-dev gulp  
  npm install --save-dev gulp-sass
  npm install --save-dev sass

A sass csomag helyben is telepítve kell legyen.

===== Mini Sass fájl =====

<code sass style.scss>
$primary-color: #333;
$background: skyblue;
 
body {
    color: $primary-color;
    background-color: $background;
}

</code>

===== gulpfile.js =====


<code javascript gulpfile.js>
const { src, dest } = require('gulp');
const sass = require('gulp-sass')(require('sass'));


function buildStyles(cb) {
    src('src/sass/**/*.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(dest('src/css'));
    cb();
}

exports.build = buildStyles;
</code>

===== HTML =====

<code html src/index.html>
<!DOCTYPE html>
<html lang="hu">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sass</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>

    <h1>Sass teszt</h1>
    
</body>
</html>
</code>

===== Forrás =====

  * https://www.npmjs.com/package/gulp-sass

szit

Felhasználói eszközök

Eszközök a webhelyen

Eszközök az oldalon