Gulp Workflow Overview

Gulp is a task runner used to automate processes like compiling SCSS to CSS. It involves setting up tasks to handle file transformations.

Introduction to Sass and SCSS

Sass is a CSS preprocessor that extends CSS with dynamic features. It comes in two syntaxes: Sass (indentation-based) and SCSS (brace-based). SCSS is preferred for its readability and compatibility with CSS.

CSS Compilation Modes

• Standard CSS: Basic styling.
• Sass/SCSS: Enhanced with variables, nesting, and more.
• Less: Another preprocessor with similar capabilities.

SCSS Syntax Basics

SCSS files use a syntax similar to CSS but allow for advanced features. For example, nesting selectors:

.container {
  color: blue;
  .item {
    font-size: 16px;
  }
}

This compiles to:

.container { color: blue; }
.container .item { font-size: 16px; }

Using SCSS with Gulp

To process SCSS files, install the necessary Gulp plugin and configure a task.

Installing the Sass Module

Run: npm install gulp-sass --save-dev

Configuring a Gulp Task for SCSS

Create a task to compile SCSS files into CSS, with options for concatenation and minification.

const gulp = require('gulp');
const sass = require('gulp-sass');
const concat = require('gulp-concat');
const minify = require('gulp-clean-css');
const rename = require('gulp-rename');

function compileStyles() {
  return gulp.src('src/scss/*.scss')
    .pipe(concat('styles.scss'))
    .pipe(sass().on('error', sass.logError))
    .pipe(gulp.dest('dist/css'))
    .pipe(minify())
    .pipe(rename({ suffix: '.min' }))
    .pipe(gulp.dest('dist/css'));
}

gulp.task('styles', compileStyles);
gulp.watch('src/scss/*.scss', compileStyles);

SCSS Syntax Deep Dive

Comments

• Single-line comments: Use //; these are not included in the compiled CSS.
• Multi-line comments: Use /* */; these are preserved in the output.

Variables

Variables in SCSS store values for reuse, making styles dynamic.

Single-Value Variables

Define a variable and use it in properties.

$primary: #3498db;
.element {
  background: $primary;
}

Arithmetic Operations

Perform calculations with variables.

$size: 100px;
.box {
  width: $size * 2;
  height: $size / 2;
}

Multi-Value Variables

Use lists or maps for multiple values.

$colors: red, blue, green;
.header {
  color: nth($colors, 1);
}

Looping with Variables

Iterate over lists or maps to generate styles.

$sizes: (small: 10px, medium: 20px, large: 30px);
@each $name, $value in $sizes {
  .btn-#{$name} {
    padding: $value;
  }
}

Nesting

Nest selectors to reflect HTML structure, improving readability.

.page {
  font-size: 14px;
  .content {
    margin: 20px;
    .title {
      font-weight: bold;
    }
  }
}

Mixins

Mixins allow reuse of code blocks, with or without parameters.

Basic Mixin

Define a mixin and include it where needed.

@mixin center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.widget {
  @include center;
}

Parameterized Mixin

Pass arguments to customize output.

@mixin spacing($top, $right, $bottom, $left) {
  margin: $top $right $bottom $left;
}

.section {
  @include spacing(10px, 20px, 10px, 20px);
}

Default Parameters

Set default values for mixin parameters.

@mixin border($width: 1px, $color: black) {
  border: $width solid $color;
}

.box {
  @include border;
}

Extend/Inheritance

Use @extend to share styles between selectors, reducing duplication.

.base-style {
  color: white;
  background: gray;
}

.modified {
  @extend .base-style;
  font-size: 18px;
}

Functions

Create custom functions for calculations or transformations.

@function adjustBrightness($color, $amount) {
  @return lighten($color, $amount);
}

.highlight {
  background: adjustBrightness(blue, 20%);
}

Conditional Statements

Use @if, @else for logic-based styling.

@mixin responsive($breakpoint) {
  @if $breakpoint == mobile {
    @media (max-width: 600px) { @content; }
  } @else {
    @media (min-width: 601px) { @content; }
  }
}

.container {
  @include responsive(mobile) {
    width: 100%;
  }
}

Importing Files

Split SCSS code into multiple files and import them as needed.

// _variables.scss
$theme-color: #2ecc71;

// main.scss
@import 'variables';

.body {
  color: $theme-color;
}