: I know about Sass and Gulp and their benefits, but I have no idea how to actually use them Obviously, I know they require git, but that's where my knowledge ends. Say I have a .scss file

@Sarah324

Install Node.js
Install Gulp globally with npm install gulp-cli --global
Make a new directory for your Gulp tasks and Sass files
Inside that folder initialize npm with npm init
Install Gulp and Sass with npm install gulp gulp-sass --save-dev
Create a gulpfile.js with the following content:


var gulp = require('gulp')

var sass = require('gulp-sass')

gulp.task('scss', function() {
gulp.src('scss/main.scss')
.pipe(sass())
.pipe(gulp.dest('./build/css'))
})

gulp.task('default', ['scss'])

gulp.task('watch', function() {
gulp.watch('scss/**/*.scss', ['scss'])
})


Create a folder called scss with a file called main.scss
Now you can build it with gulp and watch it with gulp watch




I recommend you to also use PostCSS with cssnext for autoprefixing and gulp-clean-css for minifying your CSS. For using that you have to do the following things:


Install them with npm install gulp-postcss postcss-cssnext gulp-clean-css --save-dev
Change your gulpfile.js to the following:


var gulp = require('gulp')

var cssnext = require('postcss-cssnext')
var cleancss = require('gulp-clean-css')
var postcss = require('gulp-postcss')
var sass = require('gulp-sass')

gulp.task('scss', function() {
gulp.src('scss/main.scss')
.pipe(sass())
.pipe(postcss([cssnext()]))
.pipe(cleancss())
.pipe(gulp.dest('./build/css'))
})

gulp.task('default', ['scss'])

gulp.task('watch', function() {
gulp.watch('scss/**/*.scss', ['scss'])
})



I also recommend you to read this to learn about the Sass bascis.

Vote Up Vote Down

@Rambettina238

There are some websites which have videos on how to use various web development components. Here is an alphabetized list of places, where one can watch a series of videos on various programming subjects:

www.codeschool.com https://www.lynda.com www.khanacademy.org https://www.youtube.com (Simply search for Git or Gulp, Web Development, etc...)


For Git, you'll want to go get one of these pieces of software as they have visual GUIs:


GitHub
SmartGit
Atlassian SourceTree


The CLI (Command Line Interface) is more for power users. At least you can start to learn how Git works, by looking at how branching & merging works. Here is the official page on how Git Branching works. The illustrations will help make sense of the labels / branch tags, which the software uses. It's not an easy process to learn about Git... but with some work & patience, you can pick it up as a skill for your skillset.

Vote Up Vote Down

@Berumen354

Saas is a flexible build system for CSS files. It allows you to add a little bit of logic to your CSS files as templates and make it easier to change certain values at build time. One example is where you want to change a font colour for a large number of elements, previous method was to go through the CSS file and change each CSS rule seperately and could take a long time, new method with Saas if you use it is to specify the value in the .scss file as a variable and to define it at the top of the document or through a configuration, then when you build the .scss files into .css files the variables are replaced with the value that they represent. (http://sass-lang.com/)

Gulp is just a build automation system. Gulp can be used from within a number of IDE's and a wide range of languages and is marketed as a toolkit to help automate time-consuming tasks in the development workflow. (http://gulpjs.com/)

Vote Up Vote Down