SCSS: Started with static website

Nguyễn Công Dũng — Sat, 18 Jun 2022 18:19:05 +0000

SASS: What, why, and how?

SASS is a CSS preprocessor that is designed to be used as a standalone preprocessor, or as part of a framework called Compass.

SASS for CSS is very similar to CSS, for creating CSS files that are more easily readable and maintainable than traditional CSS files.

In the next chapper, we will learn how to use SASS to create a simple CSS file.

Setup Project

npm init -y

You can make directory structure follow me

.
├─ node_modules/
├─ public/
│  ├─ styles/
│  ├─ index.html
├─ src/
│  ├─ scss/
package.json

Why don't we put all files into one folder? Because source code file from src/ will get compile and placed automatically into public/ folder. When keeping this separation of folders, you can be sure that everything you need to take your application to production on a web server sits in the public/ folder and everything to implement your application sits in the src/ folder.

Install SCSS

First, we’ll install sass, the library executable to compile .sass and .scss files to .css files.

npm install -D sass

In your package.json file, we will add a script to compile our SCSS.

"scripts": {
  ...
  "sass": "sass src/scss:public"
  ...
}

The format of the script is sass <inputPath>:<outputPath>, so we’re telling sass to compile whatever .scss files that it finds (except for ones starting with underscores) in src/scss and write the output to public/.

Development

Now that we have our SCSS installed, we can start working on our application. We’ll start by creating a .scss file in src/scss.

I create a _base.scss file in src/scss and add it to src/scss/main.scss.

// main.scss
@import '_base';

h1 {
    color: tomato;
    font-family: system-ui, -apple-system, Roboto, sans-serif;
}

_base.scss is a file that contains all the base styles for the application. It’s a good place to put global styles like colors, fonts, and other styles that are used throughout the application.

Some of the base styles are:

// _base.scss
*, *:before, *:after {
  box-sizing: border-box;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
}

html, body, ul, ol, li, figure, blockquote, dl, dd {
  margin: 0;
  padding: 0;
}

Add SCSS to HTML

Browser can't understand SCSS. So we need to add SCSS compiled file (CSS) to HTML. We can do this by adding <style> tag to <head> tag.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="styles/main.css">
</head>
<body>
  <h1>Hello World</h1>
</body>
</html>

Now we can run npm run sass to compile our SCSS to CSS.

Development and Production

Have some diffrent styles for development and production. If an development, you need a keep real code, and source-map for debugging and easier to find what is wrong, wrong at where. If you want to use production, you need to minify your code, remove source-map for web performance.

Now that we have a working script for building our CSS, let’s incorporate that into our development and production build processes.

We probably want to treat our development and production builds differently. So let's make some options to enhance our build process.

"scripts": {
    ...
    "sass:dev": "sass --watch --embed-source-map src/scss:public/styles",
    "sass:prod": "sass --no-source-map --style compressed src/scss:public/styles"
    ...
}

In dev script: --watch tells sass to watch for changes in the src/scss directory and recompile whenever a change is detected. --embed-source-map tells sass to embed the source map in the compiled CSS.

In prod script: --no-source-map tells sass to not generate a source map. --style compressed tells sass to compress and remove any unnecessary whitespace from the compiled CSS. Both of these options which will keep file size down and improve performance.

Conclusion

SCSS is a help you write clean, easy and less CSS in a program construct.
Browser can't understand SCSS. So we need tranfer SCSS to CSS.
In development, using source-map for browser reconstruct the original source and present the reconstructed original in the debugger.
In production, remove source-map and minify file size for load faster and better performance.

Checkout the code example here:
Code Sandbox

Disable inspect element - DevTools in your Website

Nguyễn Công Dũng — Mon, 14 Mar 2022 16:44:44 +0000

A Website can build with simple HTML / CSS / Javascript. When you published, all source code can see with DevTools of Browser.

What is DevTools?

DevTools is a great tool in the hands of developers and designers for the need to making the development process more productive and debugging easy.

With the Inspect Element on Chrome, you have more power than the traditional web users:

View and change the DOM
View and style CSS
Debug Javascript
Watch network activity
Show Local Storage, Session Storage,...
Optimize website performance
etc...

You can discover that the DevTools can be a serious boost to your productivity. But...

With great power comes great responsibility
— Tom Precious

Why need disable Devtools?

DevTools is powerful for Development, but is dangerous on production environment.
Anyone can see your source code, which means it's not secure. With DevTools, hacker easily inspect, edit, modify your code.

I was access to admin of website by change is_admin variable to true

Besides, he can see when your website get API (Application Programming Interface) and steal API_KEY or exploit information.

Solution

DevTools can't closed completely. But you can make it inaccessible. Launching DevTools in the following ways:

Right-click -> Inspect
Ctrl + Shift + I (DevTools shortcut)
F12 (DevTools shortcut)
Ctrl + Shift + J (Open the Console panel)
Ctrl + Shift + C (Open the Elements panel)
Ctrl + U (View Source-code)

// Disable right-click
document.addEventListener('contextmenu', (e) => e.preventDefault());

function ctrlShiftKey(e, keyCode) {
  return e.ctrlKey && e.shiftKey && e.keyCode === keyCode.charCodeAt(0);
}

document.onkeydown = (e) => {
  // Disable F12, Ctrl + Shift + I, Ctrl + Shift + J, Ctrl + U
  if (
    event.keyCode === 123 ||
    ctrlShiftKey(e, 'I') ||
    ctrlShiftKey(e, 'J') ||
    ctrlShiftKey(e, 'C') ||
    (e.ctrlKey && e.keyCode === 'U'.charCodeAt(0))
  )
    return false;
};

Check out from this Github code.

DEV Community: Nguyễn Công Dũng