PCSS - PREPROCESSOR OF CSS

A report submitted in partial fulfillment of the requirements for

the award of the degree of

B.Tech. in

Computer Science and Engineering

Submitted by:

Vidhi Jain

160110070

CSE CCV

COMPUTER SCIENCE AND ENGINEERING

DEPARTMENT

DIT UNIVERSITY, DEHRADUN

 CANDIDATE DECLARATION

I hereby certify that the work, which is being presented in the industrial training report,
entitled PCSS - PREPROCESSOR OF CSS, in partial fulfillment of the requirement for
the award of the Degree of Bachelor of Technology and submitted to the institution is
an authentic record of my own work carried out during the period 1st June-2019 to 15th
July-2019 under the supervision of Rajiv Dhyani. I have also cited the reference about
the text(s)/figure(s)/table(s) from where they have been taken.

Vidhi Jain

Date: 15/July/2019 Signature of the Candidate

This is to certify that the above statement made by the candidate is correct to the best of
my/our knowledge.

Date: Signature(s) of the Supervisor (s)

ii
 ACKNOWLEDGEMENT
Undergoing for industrial internship has become one of the curricular that college student compulsory
to attend. The motive of this action is to expose students and let them experience the environment of
the real world of working before graduating. It is also to prepare students to face the real challenge
and learn how to find solution when problem encountered besides completing the course. This
exposure not only will prepare the students but it is also a great opportunity to gain knowledge at
industry. Besides that, it can prepare students on how to polish more their soft skill especially on how
to communicate with others and learn to do work in a group.
It is my radiant sentiment to place on record my best regards, deepest sense of gratitude to my
Mentor, Rajiv dhyani who is the person in charge for training for his careful and precious guidance
and advice, for his constant encouragement and support, which were extremely helpful for my study
theoretically as well as practically and helped me to successfully complete my observatory internship.
I learned a lot of valuable things while working here. I realized that learning theoretical is never the
same when it comes to practice. There are a lot more to master than just learning from book. For
example, it is impossible to master the etiquette of communicating with others from the book unless
we put it in action. I also learned it is very important to know how to work as part of the team
especially when you are working in a big organization. To complete the task in given timing is also
another crucial thing to take care of. As is it known, the world of working is a completely different
phase compared to the time when we are studying; therefore, by going for an industrial training it is in
hope that the students are well prepared and have high confidence to serve the community. Students
have to carry a big responsibility when working at industry and carry it with honesty and sincerity.

Vidhi Jain 160110070

i
ii
iii
 TABLE OF CONTENTS
Title Page No.

CANDIDATE DECLARATION................................................................................. I
Table of Contents. .................................................................................................. II
ABSTRACT............................................................................................................. III

CHAPTER 1 INTRODUCTION

CSS ........................................................................................................................ 1
Advantages of CSS ............................................................................................. 2-3
Disadvantages of CSS……………………………………………………………………3
Purpose…………………………………………………………………………………..4-8

CHAPTER 2 FEATURES

Variable……………………………………………………………………………………….9
Nesting………………………………………………………………………………………10
Mixins………………………………………………………………………………………..11
Extends……………………………………………………………………………………...11
Color Operations……………………………………………………………………………12
If/Else Statements…………………………………………………………………………..12
Imports……………………………………………………………………………………….13
Functions…………………………………………………………………………………….13
Include…………………………………………………………………………………...14-15

CHAPTER 3 TOOLS/PLATFORM /LANGUAGE TO BE USED

System Requirements…………………………………………………………………………16
Hardware requirements………………………………………………………………………..16
Software requirements…………………………………………………………………………16
Language Used………………………………………………………………………………....17

iv
CHAPTER 4 USING PCSS……………………………………………………………..18-21

CHAPTER 5 CONCLUSION ……………………………………………………………22

CHAPTER 6 FUTURE WORK

Scope for Future Work………………………………………………………………….23

CHAPTER 7 BIBLIOGRAPHY…………………………………………………………..24

v
 ABSTRACT

CSS is primitive and incomplete. Building a function, reusing a definition or inheritance

are hard to achieve. For bigger projects, or complex systems, maintenance is a very big
problem. On the other hand, web is evolving, new specs are being introduced to HTML
as well as CSS. Browsers apply these specs while they are in proposal state with their
special vendor prefixes. In some cases (as in background gradient), coding with vendor
specific properties become a burden. You have to add all different vendor versions for a
single result.

In order to write better CSS, there were different approaches such as separating
definitions into smaller files and importing them into one main file. This approach helped
to deal with components but, did not solved code repetitions and maintainability
problems. Another approach was early implementations of object oriented CSS. In this
case, applying two or more class definition to an element. Each class adds one type of
style to the element. Having multiple classes increased re-usability but decreased the
maintainability.

Pre-processors, with their advanced features, helped to achieve writing reusable,

maintainable and extensible codes in CSS. By using a pre-processor, you can easily
increase your productivity, and decrease the amount of code you are writing in a project.

v
 ABOUT THE COMPANY

The Technical Solutions Dehradun established in 2000. Providing Industrial certifications in

(Java, Industrial SQL,PL,Web Component Developer) plus Java, Php , Javascript , Angular JS,
Node JS, JQuery, Dot net, PHP, Android, Python, C, C++, Data structure training in
Dehradun,Uttrakhand. We provide quality education as all our faculties is well qualified,
Internationally Certified and experienced. Technical Solutions is best institute in Dehradun which
provides 100 percent result in International Certifications. Our students are working many top
companies like Infosys, TCS , Congnizant , L&T, Wipro, Amazon, Flipcart etc. The Technical
Solutions also offers excellent placement and internship programs to every student. The Technical
Solutions provides a number of career oriented courses for different segments like student, job
seekers and professionals. The Technical Solutions is most trusted Industrial training company in
Dehradun in engineering domain. The Technical Solutions trainers who provide Industrial
training in Dehradun have 20 years experience. The Technical Solutions provides practical
training as well as theoretical classes to clear the basic fundamental concept. The Technical
Solutions provides exhaustive practice session to learn the concept effectively in Dehradun. The
Technical Solutions encourages students to use the labs to gain better technical viability and
experience. The Technical Solutions mission is to become most essential, respected and
professional development company in Dehradun. Industrial Training in Dehradun is provided by
The Technical Solutions with best training facilities.

The Technical Solutions is a training company which provides vocational training as well as
Industrial Training in Dehradun with emphasis on technical skills and knowledge for a particular job
function. The Technical Solutions also provides internship opportunities to fresh graduates and those
who want to pursue their career in development. The Technical Solutions provides vocational training
in Industrial design to help the student’s transition from academic learning to professional learning.
The Technical Solutions is the best Industrial training center in Dehradun which provides training in
every domain of engineering. The Technical Solutions conduct corporate trainings and open house
workshops on latest technologies for Engineering students and Professionals. The Curriculum of the
Industrial Trainings and Workshops in The Technical Solutions is set in such a manner that students
and professionals can gain more experience in the field they choose. The Technical Solutions is
expanding every day in terms of knowledge due to its expertise in the training field. This level of
knowledge is surely shown in the Industrial placement record of The Technical Solutions.

vi
 CHAPTER 1: INTRODUCTION

What is CSS (Cascading Style Sheets)?

An abbreviated form for ‘Cascading Style Sheet’, CSS is what goes into the website’s layout
formatting. It is a collection of formatting rules that helps website developers control the appearance
and display of the website they are working on. CSS lets them define the styling decisions such as the
position of the images, the font size, the color to the background, and everything else that has an
impact on how a website will display on your web browser. Besides, using the online editor you are
able to organize, tidy up your style sheets and easily compress the CSS. With CSS, the designer is
able to implement functions that were earlier not defined in a page’s HTML(used for the creation of
the web pages). With the new development, HTML and CSS work hand in hand to create a great
website. The best thing about CSS is its capability of introducing uniform changes on all the pages of
a website. Developers work to define a style in cascading style sheet and they can use the style
throughout several pages by just referencing to that particular CSS file. Hence, the amount of styling
work is saved and repetition is eliminated. CSS instructs the display of the HTML as to how the
website will display at the user’s end. For the role it plays, CSS does have its own both sides of being.
Separation of formatting and content also makes it feasible to present the same markup page in
different styles for different rendering methods, such as on-screen, in print, by voice (via speech-
based browser or screen reader), and on Braille-based tactile devices. CSS also has rules for alternate
formatting if the content is accessed on a mobile device.
The name cascading comes from the specified priority scheme to determine which style rule applies if
more than one rule matches a particular element. This cascading priority scheme is predictable.
The CSS specifications are maintained by the World Wide Web Consortium (W3C). Internet media
type (MIME type) text/css is registered for use with CSS by RFC 2318 (March 1998). The W3C
operates a free CSS validation service for CSS documents.
In addition to HTML, other markup languages support the use of CSS including XHTML, plain
XML, SVG, and XUL.

1
Advantages of Cascading Style Sheet (CSS)
 Saves Time :
Let’s consider an example. You run a website that has 40 pages or more. Due to the need
for some strategic changes in the content of the website, you now need to change the text
size from 14pt to 12pt or vice-versa. How much time do you think will it take for manually
making the size changes to all those 40 pages? A lot! This is where CSS comes into the
scenario as a savior. You can then define the changes in a single CSS file and reference all
those 40 pages to that same file and your work will be done. Your entire website will start
reflecting the size changes.

 Help to Make Spontaneous and Consistent Changes :

Considering our very own example from the first advantage above, imagine that you have
to make more fluid changes to your content. Again, with a single style sheet, you will be
able to ensure that the changes look uniform on all the pages and not botched up. If it were
not for CSS, you would have to take notes of changes made to one page and reference it
while you make changes to another page, always going back and forth. Imagine the
amount of exhaustion and brain activity that would be required to justify the consistency of
these changes throughout. However, with CSS, your changes are well applied consistently.

 Improves Page Loading Speed:

Code density on your website contributes to its speed. The more the code, the slower the
website gets. FYI, visitors are quick to abandon a website if it takes more than 2-3 seconds
to load.

Just a few lines of code is all that is required to make changes to a large number of pages
on the website with CSS. Since there is minimal code, the website database remains
uncluttered, thus, eliminating any website loading issues. Implementing CSS along with
the choice of best website builders is a great way to keep visitors hooked on to your
website as they won’t have to wait up for your website to load.

 Device Compatibility:
CSS changes are device friendly. With people using a whole lot of different range of smart
devices to access websites over the internet, there is a need for responsive web design.
CSS serves the purpose here by making your web pages more responsive so that they end
up displaying in the same manner on all devices.

2
  Ability to Re-Position :
CSS lets you define changes in the position of web elements present on a page. With its
implementation, developers can position HTML elements at the place they like in order to
align with the aesthetic appeal of the page or other similar considerations.

 Makes the Search Engine Better Crawl Your Web Pages:

CSS is secretly an SEO enabler for your site. The truth is that the search engine bots yield
inaccurate details when they crawl through cumbersome heaps of HTML code. However,
with CSS in place, the website design attributes are defined and there is less code on the
site, making the website SEO friendly.

Disadvantages of Cascading Style Sheet (CSS)

Cross-Browser Issues :
Implementing initial CSS changes on a website is easy on the developer’s end. However,
after the changes have been made, you will have to confirm the compatibility if the CSS is
displaying similar change effects on all the browsers. This is simply due to the fact that
CSS works differently on different browsers.

Confusion Due to Its Many Levels:

The programming language world in itself is crazily complicated for non-developers and
beginners. To add to that, different levels of CSS i.e. CSS; CSS 2; CSS 3 can be quite
confusing for the mentioned lot.

Vulnerable :
If you have worked with CSS, you probably know that it is easily accessible because of its
open text-based system. An accident or a mere act of mischief with the files can end up
disrupting the display and formatting of your entire website. It would only require a
read/write access to the intended website to override the changes.

3
PURPOSE

Writing direct CSS on style sheets is good for small web applications, but when you are developing a
large user interface which requires heavy style sheets CSS preprocessor is the best solution. CSS
preprocessors are special CSS files which contain variables, functions, mixins and other
functionalities which are not possible with basic style sheets. They offer an easy solution which
enables scalability with efficiency. Now let us look at various advantages of using CSS Preprocessors.

PCSS is an extension of CSS that adds power and elegance to the basic language. It allows you to
use variables, mixins, inline imports, and more, all with a fully CSS compatible syntax. PCSS helps
keep large stylesheets well-organized, and get small stylesheets up and running quickly,
particularly with the help of the Compass style library.

A CSS preprocessor is a program that lets you generate CSS from the preprocessor's own
unique syntax. There are many CSS preprocessors to choose from, however most CSS preprocessors
will add some features that don't exist in pure CSS, such as mixin, nesting selector, inheritance
selector, and so on. These features make the CSS structure more readable and easier to maintain.

1. Ability to add variables, mixins, functions, etc

Basic CSS is direct and offers the least flexibility. The ability to add variables and functions brings a
new dimension and scope to CSS which facilitates easier and efficient development. It also makes
your code more organized and clean.

2. Join Multiple Files

CSS Preprocessors offers a special functionality of joining multiple stylesheets into one. You can
create different files for each screen or pages and then import them all in the main CSS file. Now,
only the main file needs to be imported on the website and internal files will be read from the server.

3. Avoid Repetitions
4
One of the biggest drawbacks of basic CSS is that you need to write everything multiple times for
each object. This is totally against the principle of programming languages. This is where CSS
Preprocessors are a time saver. You can write common styles once that can be imported instead of re-
writing. Here is an example.

Basic CSS

.maindiv{
Margin:5px;
Padding:2px;
border:1pxdouble;
}

.subdiv1{
Margin:5px;
Padding:2px;
border:2pxdouble;
}
.subdiv2{
Margin:5px;
Padding:2px;
border:3pxdouble;
}

Now the same code using a CSS Preprocessor

.maindiv{
Margin:5px;
Padding:2px;
border:1pxdouble;
}
.subdiv1{
.maindiv;
border:2px;
5
}
.subdiv2{
.maindiv;
Border:3px;
}

As you can see, instead of re-writing the same code thrice, we are just calling the main style and
adding new changes. This will save you a lot of time and space.

4. Nested Syntax

Nesting of classes in CSS makes it easy to target DOM elements and saves you time. Nesting also
makes it tremendously easy to edit CSS files. Here is an example of nested CSS.

body {
.header {
h1{
font-size: 28px;
}

h2 {
font-size: 21px;
}

This will translate into the following CSS

body .header h1 {

font-size: 28px;

6
body .header h2 {

font-size: 21px;
}

Now if you want to change the class name “header” to something else, it has to be done only once.
The same in basic CSS would require changes in multiple places.

5. Less Time to Code

You can avoid repetitions while using CSS preprocessors and also it makes your code more
organized. The combination of these two will save you a lot of time in coding. You will be able to
write the same amount of styles in a much lesser time which will be easier to scale too.

6. Darken & Lighten functionality

CSS Preprocessor has many built in functions and one among them is Darken and Lighten functions.
You can just mention darkening with the color code and also the percentage. This was not possible
with basic CSS. Here is an example

h1 {
color: rgb(230, 140, 230); // color: #e68ce6;
color: darken(#123456, 10%); // color: #091a2c;
color: fade(#123456, 50%); // color: rgba(18, 52, 86, 0.5);
}

Now that we have understood the benefits of CSS preprocessors, let us look at some of the most
popular ones available today.

7
SaSS

SaSS is an 8-year-old open source CSS project which is the most used CSS preprocessor today. It
offers 2 different syntaxes to write the CSS namely, Sass or SCSS. Sass requires Ruby to compile.

Less.js

It is easily the best competitor for Sass and it runs on Node. Getting started with Less is quite easy,
just download the Less.js JavaScript file and integrate with your HTML or use a public CDN for
importing. With Less, one can use variables, mixins , functions, etc and it also offers a unique way to
use looping. Some of the other popular CSS Preprocessors are Stylus, CSS-Crush, Myth and Rework.

8
 CHAPTER 2: FEATURES

VARIABLES

Variables were all time wanted feature for CSS. Every developer, wanted to define a base color
and use it all over the CSS file, instead of writing the hex or named color in a property each time.
Same as "color", variables needed for "width", "font-size", "font-family", "borders" etc.

Variables in PCSS start with $ sign, values are assigned with colon (:)

Example:

Compiled as:

9
Nesting

CSS lacks visual hierarchy while working with child selectors. You have to write selectors and their
combinations in separate lines. Nesting provides a visual hierarchy as in the HTML and increases the
readability. In some cases, nesting causes oversizing the selectors and something like a "selector
train", so use it wisely.

Mixins
Mixins are set of definitions that compiles according to some parameters or static rules. With them
you can easily write cross-browser background gradients or CSS arrows etc.

10
Extends
Extends are useful for sharing a generic definition with selectors rather than copying it in. All
extended selectors are grouped in compiled CSS. SASS extends every instance of extended selector
that includes its child selectors and inherited properties. However, in LESS you can select every
instance of extended selector by adding "all" attribute to extend method or you can select only the
main instance. Extends are also chainable.

.block { margin: 10px 5px; }

p {
@extend .block;
border: 1px solid #eee;
}

ul, ol {
@extend .block;
color: #333;
text-transform: uppercase;
}

11
Color Operations

All three pre-processors have color functions to play with colors. You can lighten the base color or
saturate it, even you can mix two or more different colors. This feature is not very essential but nice to
have.

saturate($color, $amount)
desaturate($color, $amount)
lighten($color, $amount)
darken($color, $amount)
adjust-hue($color, $amount)
opacify($color, $amount)
transparentize($color, $amount)
mix($color1, $color2[, $amount])
grayscale($color)
complement($color)

If/Else Statements

Control directives and expressions help to build similar style definitions according to matched
conditions or variables. SASS and Stylus support normal if/else conditionals. But in LESS, you can
achieve this with CSS Guards.

@if lightness($color) > 30% {

background-color: black;
}

@else {
background-color: white;
}

IMPORTS

Rather than using a one large file, separating your codes in small pieces is helpful for expressing
your declarations and increasing maintainability and control over the codebase. You can group the
12
similar code chunks in similar folders and import them to main css file. Also with import
statement, frameworks can also be added to work packages.

FUNCTIONS

Functions are used to provide modularity in CSS program. These set of blocks can be reused in the
file again whenever needed.

Functions in PCSS
start with @functions signature,

13
INCLUDE

Includes are used to include functions within a functions.

Includes in PCSS start with @include signature,

Example:

14
Compiled as:

15
CHAPTER 3: TOOLS/PLATFORM /LANGUAGE TO BE USED

System Requirement Specification

1. Hardware Requirement:
a. Processor : Intel Pentium 4 CPU 1.5 GHz
b. RAM : 256 MB
c. Hard disk : 40 GB
d. Peripherals : Keyboard, Mouse, Color Monitor
e. Internet Card : 1 GB

2. Software Requirement :
a. Operation System: Windows XP/7/8/10.
b. IDE Used: Java Net Beans
c. Programming Environment
i. Front End: JAVA
ii. Back End: CSS

16
Language used

● JAVA
Java is a general-purpose computer programming language that is concurrent, class based,
object-oriented, and specifically designed to have as few implementation dependencies as
possible. It is intended to let application developers "write once, run anywhere" (WORA),
meaning that compiled Java code can run on all platforms that support Java without the need for
recompilation.
● CSS
An abbreviated form for ‘Cascading Style Sheet’, CSS is what goes into the website’s layout
formatting. It is a collection of formatting rules that helps website developers control the appearance
and display of the website they are working on. CSS lets them define the styling decisions such as the
position of the images, the font size, the color to the background, and everything else that has an
impact on how a website will display on your web browser. Besides, using the online editor you are
able to organize, tidy up your style sheets and easily compress the CSS. With CSS, the designer is
able to implement functions that were earlier not defined in a page’s HTML(used for the creation of
the web pages). With the new development, HTML and CSS work hand in hand to create a great
website. The best thing about CSS is its capability of introducing uniform changes on all the pages of
a website. Developers work to define a style in cascading style sheet and they can use the style
throughout several pages by just referencing to that particular CSS file. Hence, the amount of styling
work is saved and repetition is eliminated. CSS instructs the display of the HTML as to how the
website will display at the user’s end. For the role it plays, CSS does have its own both sides of being.

17
 CHAPTER 4 :USING PCSS

USING PCSS

PCSS is a stand alone application, developed using Java Swings and frames. To run
PCSS a desktop is need with pre-installed Java. To use PCSS a basic understanding of
CSS is required in addition to a introductory guide. To start using PCSS following steps
are needed:

Step 1: Open the PCSS (java runtime environment) file

18
Step 2: Load a PCSS file using file browser button provided in UI

Step 3: Load a CSS file that is needed to be mapped with the PCSS file for
preprocessing.

19
Step 4: Press Connect button provided in the UI box

Step 5: After successfully loading the document we can start using Pcss file from the left
dialog and simultaneously update CSS on the right hand side of the UI box.

20
Step 6: Press update button provided at the bottom of the UI box to update the changes
from PCSS to CSS.

Step 7: Disconnect all the files after updating the document and then close the UI box.

21
 CHAPTER 5: CONCLUSION

Conclusions

PCSS is an extension of CSS that adds power and elegance to the basic language. It allows you to
use variables, nested rules, mixins, inline imports, and more, all with a fully CSS-compatible
syntax. PCSS helps keep large style sheets well-organized, and get small stylesheets up and
running quickly, particularly with the help of the Compass style library.

Features
● Fully CSS-compatible
● Language extensions such as variables, nesting, and mixins
● Many useful functions for manipulating colors and other values
● Advanced features like control directives for libraries
● Well-formatted, customizable output

22
 CHAPTER 6:FUTURE WORK

Scope of future work

Various features can be added to the current pcss such as Future Work
● Nesting:
○ CSS lacks visual hierarchy while working with child selectors. You have to write
selectors and their combinations in separate lines. Nesting provides a visual
hierarchy as in the HTML and increases the readability.
● Extend:
○ Extends are useful for sharing a generic definition with selectors rather than
copying it in. All extended selectors are grouped in compiled CSS.
● Color Operations:
○ All three preprocessors have color functions to play with colors. You can lighten
the base color or saturate it, even you can mix two or more different colors.
● If/Else Statements
○ Control directives and expressions help to build similar style definitions
according to matched conditions or variables.
● Loops
○ Loops are useful when iterating through an array or creating a series of styles as in
grid widths. Like in the if/else case, LESS is using CSS Guards and recursive
mixins for looping.

23
 CHAPTER 7 :BIBLIOGRAPHY
https://htmlmag.com/article/an-introduction-to-css-preprocessors-sass-less-stylus

https://techaffinity.com/blog/advantages-of-css-preprocessors/

24