Category: CSS

Install Sass in local environment

Create a folder called sass and a file within that called main.scss

(You can use terminal commands (mkdir, touch))

Configuring package.json

Determine how to compile sass by setting scripts in package.json

"scripts": {
 "compile:sass": "node-sass sass/main.scss css/style.css -w"
},

To compile Sass, open terminal and type:  npm run compile:sass

The -w tag will watch for changes within the source file and auto compile.

Live Server

Install using npm

npm install live-server -save

or install globally

sudo npm install live-server -g

type live-server in command prompt and cmd will auto launch

NPM & the Node Ecosytem

node.js

An open source JavaScript runtime, allows developers write and run JS app on the server. Can also be used to write tools to help with local web development.

NPM

Node Package Manager. Command line interface to allow installation and management of packages on local systems.

Make sure the latest version of node.js is installed (download from node.js website).

node -v on the command line will inform you what version of node.js is on the system.

package.json

First thing to create when creating a new project. Will contain the definitions of the project and where NPM will install the tools and packages its required.

npm init will help you create a package.json file.

You can use pakage.json file to install all the dependencies if you need to work on the project elsewhere, just type npm install

Install Sass

$ npm install node-sass --save-dev

Use NPM to install other dependencies such as jquery (include –save)

npm install jquery --save

This will show in the dependencies (not the devdependencies.

When setting up GIT, make sure to ignore all node_modules so as not to include all the dependencies

Features

• Variables: for reusable values such as colours, font-sizes, spacing, etc;
• Nesting: To nest selectors inside of one another, allowing us to write less code;
• Operators: For mathematical operations right inside of CSS;
• Partials & Imports: To write CSS in different files and importing them all into one single file;
• Mixins: To write reusable pieces of CSS code;
• Functions: similar to mixins, with the difference that they produce a value that can then be used; ie darken(color, i%)
• Extends: To make different selectors inherit declarations that are common to all of them;
• Control Directives: for writing complex code using conditionals and loops;

Sass syntax vs SCSS syntax

Sass: no requirement for brackets or semi-colons

SCSS similar to traditional CSS, clearer to follow and easier to convert old CSS projects.

Mixins, Functions & Extends

Mixins

ie Clearfix mixin:

@mixin clearfix {
 &::after {
  content: "";
  clear: both;
  display: table;
 }
}

nav {
 @include clearfix;
}

Mixins are groups of CSS that can be reused. Use @include to insert the mixin.

You can also pass arguments through mixins:

@mixin style-link-text($colour) {
 text-decoration: none;
 text-transform: uppercase;
 color: $colour;
}

@include style-link-text(#FFF);

Functions

Functions are like mixins but you can perform mathematical action using arguments passed in parenthesis:

@function divide($a, $b) {
 return $a / $b;
}

Sass has a number of built in functions such as darken() and lighten().

Extends

%btn-placeholder {
 styling
}

extend %btn-placeholder

Like mixins, this allows you to reuse code, however instead of copying the code to each element, when compiled it will group all the elements together and apply the style. Use instead of mixins when the elements are related to each other.

Seven different folders for partial SASS files, and One main SASS file to import all other files into a compiled CSS stylesheet

• base/
• components/
• layout/
• pages/
• themes/
• abstracts/ (variables and mixins)
• vendors/