Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
2 views

Stylus CSS Preprocessor, template engine

Uploaded by

nagulagunta.tejaswi23
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
2 views

Stylus CSS Preprocessor, template engine

Uploaded by

nagulagunta.tejaswi23
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

MEAN Stack Development Unit-3 Express JS

Stylus CSS Preprocessor


Stylus is a CSS preprocessor that allows you to write CSS in a more concise and flexible way by
using indentation-based syntax instead of brackets and semicolons. It offers features like
variables, mixins, functions, and nested selectors, making CSS code more maintainable and
readable.

To use Stylus in your project, follow these steps:


1. Installation: Install Stylus globally using npm:
npm install -g stylus
2. Create Stylus Files: Create .styl files for your stylesheets.
3. Write Stylus Code: Write your styles using Stylus syntax.
// styles.styl
$primary-color = #007bff

body
font-family Arial, sans-serif
color $primary-color

.container
width 100%
max-width 1200px
margin 0 auto

button
padding 10px 20px
background-color $primary-color
color #fff
border none
border-radius 5px

&:hover
background-color darken($primary-color, 10%)
4. Compile Stylus Files: Compile your Stylus files into regular CSS using the stylus
command:
stylus styles.styl -o dist
5. Link Compiled CSS: Link the compiled CSS file (styles.css) in your HTML file:
<link rel="stylesheet" href="dist/styles.css">
Now your Stylus styles are compiled into regular CSS and ready to use in your project.
You can also integrate Stylus into your build process using task runners like Gulp or Grunt, or
bundlers like Webpack. This allows you to automatically compile Stylus files when changes are
made, among other things. Additionally, there are plugins available for various text editors and
IDEs that provide syntax highlighting and other helpful features for working with Stylus.

VLITS, Vadlamudi. Page 1


MEAN Stack Development Unit-3 Express JS

Stylus Watcher
To set up a watcher with Stylus, you can use the -w or --watch flag along with the stylus
command. This flag tells Stylus to watch for changes in the specified Stylus file(s) and recompile
them automatically whenever changes are detected.

1. Set up your project directory:


Create a directory for your Stylus files and CSS output. For example:
project/
├── src/
│ └── styles.styl
└── dist/
2. Watch and compile Stylus files:
Open your terminal and navigate to the root of your project. Then run the following command:
stylus src/styles.styl -o dist -w
-o dist specifies the output directory for the compiled CSS files.
-w or --watch flag watches for changes in the Stylus files and recompiles them automatically.
Stylus Compress
Compressing your CSS files will render them difficult to read for humans but reduces the sizes
of them. This is useful for when you are working on a website that you plan to make public for
others to use. The smaller the files, the less data that needs to be transmitted.
 -c or --compress flag compresses the output CSS files.
 To compile this Stylus file and compress the output CSS, you can run the following
command:
stylus styles.styl -o dist –c
 By compressing it, your styles.css would look like this:
body{font-family:Arial,sans-serif;color:#007bff}.container{width:100%;max-
width:1200px;margin:0 auto}button{padding:10px 20px;background-
color:#007bff;color:#fff;border:none;border-radius:5px}button:hover{background-
color:#0056b3}

Using template engines with Express


Template engine middleware in Express.js is used to render dynamic content to HTML files by
injecting data into predefined templates. There are several popular template engines available for
Express.js, such as Handlebars, EJS (Embedded JavaScript), Pug (formerly known as Jade), and
Mustache.

To use a template engine middleware in Express.js, you first need to install the desired template
engine package. Let's take EJS as an example:

Install EJS:
npm install ejs
Set Up Express with EJS:
const express = require('express');

VLITS, Vadlamudi. Page 2


MEAN Stack Development Unit-3 Express JS

const app = express();

// Set EJS as the view engine


app.set('view engine', 'ejs');

// Define a route to render an EJS template


app.get('/', (req, res) => {
// Render the 'index.ejs' template
res.render('index', { title: 'Express with EJS' });
});

// Start the server


const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
console.log(`Server is running on port ${PORT}`);
});
Create EJS Templates:
Create EJS templates in a directory named views. For example, create a file named index.ejs in
the views directory:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><%= title %></title>
</head>
<body>
<h1>Welcome to <%= title %></h1>
</body>
</html>
Start the Server: Run your Express.js server:
node app.js
Now, when you navigate to http://localhost:3000/, you should see the rendered HTML page
with the dynamic content injected from the Express route.
You can replace EJS with any other template engine by installing the respective package and
configuring it similarly. The key is to set the template engine using app.set('view engine',
'engine-name') and use res.render() to render templates with dynamic data.

Example2: using ‘pug’ engine:


Install pug:
npm install pug --save
Set Up Express with pug:

VLITS, Vadlamudi. Page 3


MEAN Stack Development Unit-3 Express JS

const express = require('express');


const app = express();

// Set EJS as the view engine


app.set('view engine', 'pug');

// Define a route to render an EJS template


app.get('/', (req, res) => {
res.render('index', { title: 'Hey', message: 'Hello there!' })
})

// Start the server


const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
console.log(`Server is running on port ${PORT}`);
});

Create pug Templates:


Create pug templates in a directory named views. For example, create a file named index.pug in
the views directory:

html
head
title= title
body
h1= message

Start the Server: Run your Express.js server:


node app.js

VLITS, Vadlamudi. Page 4

You might also like