Scribd
Upload
61 views

Preprocessor For CSS: Prepared By-Vidhi Jain Cse CCV

CSS preprocessors are tools that allow CSS code to be written in another programming language that then compiles to CSS. They provide additional functionality like variables, nesting, mixins and imports to make CSS code more manageable, reusable, and compact. PCSS is an open source CSS preprocessor inspired by SASS that uses JavaScript to compile PCSS code into regular CSS dynamically. It supports features like variables, mixins, color operations, if/else statements, loops, math operations, and imports.

Uploaded by

Vidhi jain
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
61 views

Preprocessor For CSS: Prepared By-Vidhi Jain Cse CCV

CSS preprocessors are tools that allow CSS code to be written in another programming language that then compiles to CSS. They provide additional functionality like variables, nesting, mixins and imports to make CSS code more manageable, reusable, and compact. PCSS is an open source CSS preprocessor inspired by SASS that uses JavaScript to compile PCSS code into regular CSS dynamically. It supports features like variables, mixins, color operations, if/else statements, loops, math operations, and imports.

Uploaded by

Vidhi jain
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 12

PREPROCESSOR FOR CSS

Prepared by-
Vidhi Jain
CSE CCV
What are CSS Preprocessors
 Tools for development
 Language  compilation  CSS
 Gives more functionality to CSS
 Dynamic style sheets
 CSS properties as variables
 Fewer lines of code
Why use preprocessors?
 Developers turning to toolkits
 Create more manageable, reusable,
compact style sheets
 Faster development time
 Saves from monotony
 More time for creativity and back-end
development
 Programatic CSS features
PCSS
 Inspired by SASS
 Open source on GitHub
 Uses stylesheet.PCSSextension
 JavaScript compiles PCSS code into
regular CSS on the fly
 variables, mix ins, operations and
nested rules
 Nice debug feature
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,
in stead 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 SASS start with $ sign. In
SASS , values are assigned with colon (:).
 $font-size: 16px;
 div { font-size: $font-size; }
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.
 @mixin bordered($width) { border:
$width solid #ddd; &:hover { border-
color: #999; } } h1 { @include
bordered(5px); }
Extends
 Extends are useful for sharing a generic
definition with selectors rather than copying it in.
All extended selectors are grouped in compiled
CSS. PCSS extends every instance of
extended selector that includes its child
selectors and inherited properties. Extends are
also chainable.
 .block { margin: 10px 5px; }
 p { @extend .block; border: 1px solid #eee; }
 ul, ol { @extend .block; color: #333; text-
transform: uppercase; }
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. PCSS
support normal if/else conditionals. But in
other pre processors you can achieve this
with CSS Guards.
 @if lightness($color) > 30% { background-
color: black;
 }
 @else { background-color: white;}
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.
 @for $i from 1px to 3px { .border-#{i} {
border: $i solid blue; } }
Math
 Math operations can be used for
standard arithmetic or unit
conversions. PCSS support arithmetic
operations between different units. In
addition to simple math, pre-
processors also have complex math
support such as ceiling, rounding,
getting min or max value in a list etc.
(1cm / 1em) * 4em => 4cm
2in + 3cm + 2pc => 3.514in
Imports
 Instead of using one large file,
separating your code in small pieces
for expressing your declarations and
increasing maintainability over the
codebase,group the similar code
chunks in similar folders and import
them to main css file.
 @import "library";
 @import "mixins/mixin.scss";
 @import "reset.css";

You might also like