Less is a CSS pre-processor, meaning that it extends the CSS language, adding features that allow variables, mixins, functions and many other techniques that allow you to make CSS that is more maintainable, themeable and extendable.
Syntactically Awesome Stylesheet - A workshop by Citytech SoftwareRitwik Das
SASS (Syntactically Awesome Stylesheet) is a CSS pre-processor which helps to reduce repetition with CSS and saves time. It is more stable and powerful CSS extension language that describes style of document cleanly and structurally.
The document provides an overview of Less, a CSS preprocessor language that extends CSS to make it more readable and maintainable. Less adds features like variables, mixins, operations, and functions to allow variables, nested rules, and more. It compiles to plain CSS. Topics covered include Less syntax and features, installation and usage options, built-in functions, and alternatives like Stylus and SASS.
Sass and Less are CSS preprocessors that add features like variables, nesting, mixins, and inheritance to regular CSS. Sass was designed by Hampton Catlin and developed using SassScript, while Less was designed by Alexis Sellier and allows real-time compilation via Less.js. Both preprocessors provide mechanisms for variables, nesting, mixins, and more to make writing CSS more efficient.
LESS is a dynamic stylesheet language that extends CSS syntax. The LESS compiler converts LESS code into regular CSS. LESS adds features like variables, mixins, nested rules, and functions that allow things like setting variables to reuse colors and values, embedding selectors to reduce code, nesting rules to organize selectors, and performing operations to generate CSS properties mathematically.
This document discusses converting an existing CSS stylesheet to the preprocessors Sass and Compass to improve code organization, reusability, and maintenance. It recommends setting up a Sass folder structure with partial files for sections of CSS, refactoring code for nesting and variables. It also provides options for compiling Sass in WordPress themes using the command line with Compass or GUI apps, and suggests additional Sass tools and resources.
SASS is an extension of CSS that adds powerful features like variables, mixins, functions and more. It allows reusability through variables and mixins, reduces time through features like nesting. To use SASS, a compiler like Ruby or Koala must be installed. SASS has two syntax options, .sass and .scss. Key features include variables, mixins, extends, functions, operators, directives and nested properties.
Syntactically Awesome Stylesheet - A workshop by Citytech SoftwareRitwik Das
SASS (Syntactically Awesome Stylesheet) is a CSS pre-processor which helps to reduce repetition with CSS and saves time. It is more stable and powerful CSS extension language that describes style of document cleanly and structurally.
The document provides an overview of Less, a CSS preprocessor language that extends CSS to make it more readable and maintainable. Less adds features like variables, mixins, operations, and functions to allow variables, nested rules, and more. It compiles to plain CSS. Topics covered include Less syntax and features, installation and usage options, built-in functions, and alternatives like Stylus and SASS.
Sass and Less are CSS preprocessors that add features like variables, nesting, mixins, and inheritance to regular CSS. Sass was designed by Hampton Catlin and developed using SassScript, while Less was designed by Alexis Sellier and allows real-time compilation via Less.js. Both preprocessors provide mechanisms for variables, nesting, mixins, and more to make writing CSS more efficient.
LESS is a dynamic stylesheet language that extends CSS syntax. The LESS compiler converts LESS code into regular CSS. LESS adds features like variables, mixins, nested rules, and functions that allow things like setting variables to reuse colors and values, embedding selectors to reduce code, nesting rules to organize selectors, and performing operations to generate CSS properties mathematically.
This document discusses converting an existing CSS stylesheet to the preprocessors Sass and Compass to improve code organization, reusability, and maintenance. It recommends setting up a Sass folder structure with partial files for sections of CSS, refactoring code for nesting and variables. It also provides options for compiling Sass in WordPress themes using the command line with Compass or GUI apps, and suggests additional Sass tools and resources.
SASS is an extension of CSS that adds powerful features like variables, mixins, functions and more. It allows reusability through variables and mixins, reduces time through features like nesting. To use SASS, a compiler like Ruby or Koala must be installed. SASS has two syntax options, .sass and .scss. Key features include variables, mixins, extends, functions, operators, directives and nested properties.
Sass is a CSS preprocessor that allows nesting, variables, mixins and more. It can be written using either the indented Sass or SCSS syntax. Sass files are compiled into normal CSS files. Sass supports variables, nesting, mixins, inheritance and other features to help organize large CSS projects and make them more maintainable. Some key Sass directives include @import, @media, @mixin, @if, @for and @each which provide control structures for conditionally including styles and generating repetitive code.
This document summarizes a technical session on Syntactically Awesome Stylesheets (Sass). The session objectives are to introduce Sass and its advantages over regular CSS, demonstrate its features like variables, nesting, mixins and extends, and how to use Sass with Compass. The document provides examples of Sass code and the corresponding CSS output for these features. It also explains how to install Sass via command line or applications and set up a Compass project.
Sass is the most mature, stable, and powerful professional grade CSS extension language in the world.
Sass is a pre-processor and pre-processor is a program which used to change one type of data into another type of data
In other words, pre-processor take one type of data (sass data) and change into another type of data (css).
Ch7(publishing my sql data on the web)Chhom Karath
This document discusses how to use PHP and MySQL together to create a database-driven website. It explains that PHP scripts connect to a MySQL database, retrieve content, and use that content to dynamically generate web pages. It then provides examples of how to connect to a MySQL database from PHP, run queries like SELECT, INSERT, UPDATE and DELETE, and handle result sets from SELECT queries by retrieving rows and their associated data.
CSS preprocessors like Sass and LESS add powerful features to CSS like variables, nesting, mixins and more. They must be compiled into plain CSS for use on websites. Both can be compiled server-side or locally. Sass is generally considered more full-featured thanks to libraries like Compass. It has a larger user and developer community compared to LESS. The document recommends using a preprocessor like Sass for development only, compiling CSS locally, and sharing code through a team library.
SASS/SCSS Preprocessor can be a great help to create and manage complex css structures. It boosts css with pro features like defining and executing Variables, Functions and Mixins.
The document discusses Sass, a CSS extension language that adds powerful features like variables, nested rules, mixins, functions and more. It outlines problems with traditional CSS like repetition, maintenance issues and lack of abstraction capabilities. Sass aims to solve these through its additional features that allow for more modular, reusable and maintainable stylesheets. It also introduces Compass, a Sass extension framework and library, and discusses best practices like organization, sprites and separation of concerns.
WordPress Plugins are very elaborate and would require significant programming expertise to develop.
In this session details are shared on Files/Folder Structure, Naming Conventions/ Coding Practices,Improving Form,Database Interaction,Loading CSS, JavaScript, Image Files and Making Proper Ajax Calls etc.
LESS and Sass are CSS preprocessors that allow for variables, mixins, and nested rules to make CSS more maintainable. Some key differences are that LESS uses @variables while Sass uses $variables. Both support mixins but LESS calls them with .mixin() while Sass uses @include. Nesting rules in LESS and Sass avoids repetition by nesting selectors within parent elements. Both support math operations and functions to generate CSS values programmatically.
The document discusses two Ruby gems, Ashikawa::Core and Ashikawa::AR, that provide an interface to the ArangoDB database. Ashikawa::Core provides a low-level driver that abstracts ArangoDB's REST interface, while Ashikawa::AR implements an Active Record pattern for integrating ArangoDB with Rails applications. The document also briefly mentions plans to develop a DataMapper interface (Ashikawa::DataMapper) to support various data sources including ArangoDB.
CouchDB is a document-oriented NoSQL database that uses JavaScript for querying. It stores data as JSON documents without a predefined schema and uses MapReduce functions for queries. Documents can be inserted and queried via a REST API. Views allow querying documents by indexing them with keys generated by map functions. Queries run against views to search indexed keys in various ways.
Be Happy With Ruby on Rails - EcosystemLucas Renan
Ruby on Rails is a popular web application framework for building database-backed web applications. It uses the Ruby programming language along with gems, a Gemfile, and the asset pipeline to manage web application assets and dependencies. Rails emphasizes conventions over configuration, making it well-suited for rapid prototyping and development of web applications.
Advanced WordPress Development EnvironmentsBeau Lebens
This document provides tips for advanced WordPress development techniques. It recommends using a text editor like TextMate or Coda and hosting your development locally using MAMP or WAMP. It also discusses using tools like SVN, grep, and SSH tunneling. Finally, it emphasizes testing using tools like PHPUnit and browser testing with Firebug.
PostgreSQL - It's kind've a nifty databaseBarry Jones
This presentation was given to a company that makes software for churches that is considering a migration from SQL Server to PostgreSQL. It was designed to give a broad overview of features in PostgreSQL with an emphasis on full-text search, various datatypes like hstore, array, xml, json as well as custom datatypes, TOAST compression and a taste of other interesting features worth following up on.
As BOSH evolves, grows, and improves, it allows you to focus on making your deployments more secure. The addition of config server allows you to generate, store, and update credentials easily and securely for your deployments. It also allows you to share credentials between deployments, as it is possible to have hundreds for all components to talk to each other. It will also help prevent poor credential choices, which can create security breaches. This talk will go into details about how config server works, how credential generation and storage is handled, and how you can use the reference implementation to choose your own credential generation and storage strategy.
This document discusses concepts related to Sass (Syntactically Awesome Style Sheets), which is a CSS preprocessor. It describes how Sass allows for variables, nesting, mixins and other features to make CSS more powerful and maintainable. Key concepts covered include using variables to reduce repetition, creating reusable code with mixins, and how Sass files are compiled into normal CSS that browsers can understand.
- Less is a dynamic stylesheet language that allows for nesting, variables, mixins and other features not available in regular CSS. It can be compiled to CSS either on the client-side or server-side.
- Some key features of Less include variables, mixins, nesting rules to mimic DOM structure, string interpolation, importing other files, and loops. These allow for reducing repetition, increasing organization and making CSS more dynamic and readable.
- Less is similar in syntax to CSS but with additional features. It can be compiled to plain CSS for browser compatibility. While Less and Sass are both preprocessors, Less uses JavaScript and can run client-side while Sass uses Ruby and runs server-side.
Sass is a CSS preprocessor that allows nesting, variables, mixins and more. It can be written using either the indented Sass or SCSS syntax. Sass files are compiled into normal CSS files. Sass supports variables, nesting, mixins, inheritance and other features to help organize large CSS projects and make them more maintainable. Some key Sass directives include @import, @media, @mixin, @if, @for and @each which provide control structures for conditionally including styles and generating repetitive code.
This document summarizes a technical session on Syntactically Awesome Stylesheets (Sass). The session objectives are to introduce Sass and its advantages over regular CSS, demonstrate its features like variables, nesting, mixins and extends, and how to use Sass with Compass. The document provides examples of Sass code and the corresponding CSS output for these features. It also explains how to install Sass via command line or applications and set up a Compass project.
Sass is the most mature, stable, and powerful professional grade CSS extension language in the world.
Sass is a pre-processor and pre-processor is a program which used to change one type of data into another type of data
In other words, pre-processor take one type of data (sass data) and change into another type of data (css).
Ch7(publishing my sql data on the web)Chhom Karath
This document discusses how to use PHP and MySQL together to create a database-driven website. It explains that PHP scripts connect to a MySQL database, retrieve content, and use that content to dynamically generate web pages. It then provides examples of how to connect to a MySQL database from PHP, run queries like SELECT, INSERT, UPDATE and DELETE, and handle result sets from SELECT queries by retrieving rows and their associated data.
CSS preprocessors like Sass and LESS add powerful features to CSS like variables, nesting, mixins and more. They must be compiled into plain CSS for use on websites. Both can be compiled server-side or locally. Sass is generally considered more full-featured thanks to libraries like Compass. It has a larger user and developer community compared to LESS. The document recommends using a preprocessor like Sass for development only, compiling CSS locally, and sharing code through a team library.
SASS/SCSS Preprocessor can be a great help to create and manage complex css structures. It boosts css with pro features like defining and executing Variables, Functions and Mixins.
The document discusses Sass, a CSS extension language that adds powerful features like variables, nested rules, mixins, functions and more. It outlines problems with traditional CSS like repetition, maintenance issues and lack of abstraction capabilities. Sass aims to solve these through its additional features that allow for more modular, reusable and maintainable stylesheets. It also introduces Compass, a Sass extension framework and library, and discusses best practices like organization, sprites and separation of concerns.
WordPress Plugins are very elaborate and would require significant programming expertise to develop.
In this session details are shared on Files/Folder Structure, Naming Conventions/ Coding Practices,Improving Form,Database Interaction,Loading CSS, JavaScript, Image Files and Making Proper Ajax Calls etc.
LESS and Sass are CSS preprocessors that allow for variables, mixins, and nested rules to make CSS more maintainable. Some key differences are that LESS uses @variables while Sass uses $variables. Both support mixins but LESS calls them with .mixin() while Sass uses @include. Nesting rules in LESS and Sass avoids repetition by nesting selectors within parent elements. Both support math operations and functions to generate CSS values programmatically.
The document discusses two Ruby gems, Ashikawa::Core and Ashikawa::AR, that provide an interface to the ArangoDB database. Ashikawa::Core provides a low-level driver that abstracts ArangoDB's REST interface, while Ashikawa::AR implements an Active Record pattern for integrating ArangoDB with Rails applications. The document also briefly mentions plans to develop a DataMapper interface (Ashikawa::DataMapper) to support various data sources including ArangoDB.
CouchDB is a document-oriented NoSQL database that uses JavaScript for querying. It stores data as JSON documents without a predefined schema and uses MapReduce functions for queries. Documents can be inserted and queried via a REST API. Views allow querying documents by indexing them with keys generated by map functions. Queries run against views to search indexed keys in various ways.
Be Happy With Ruby on Rails - EcosystemLucas Renan
Ruby on Rails is a popular web application framework for building database-backed web applications. It uses the Ruby programming language along with gems, a Gemfile, and the asset pipeline to manage web application assets and dependencies. Rails emphasizes conventions over configuration, making it well-suited for rapid prototyping and development of web applications.
Advanced WordPress Development EnvironmentsBeau Lebens
This document provides tips for advanced WordPress development techniques. It recommends using a text editor like TextMate or Coda and hosting your development locally using MAMP or WAMP. It also discusses using tools like SVN, grep, and SSH tunneling. Finally, it emphasizes testing using tools like PHPUnit and browser testing with Firebug.
PostgreSQL - It's kind've a nifty databaseBarry Jones
This presentation was given to a company that makes software for churches that is considering a migration from SQL Server to PostgreSQL. It was designed to give a broad overview of features in PostgreSQL with an emphasis on full-text search, various datatypes like hstore, array, xml, json as well as custom datatypes, TOAST compression and a taste of other interesting features worth following up on.
As BOSH evolves, grows, and improves, it allows you to focus on making your deployments more secure. The addition of config server allows you to generate, store, and update credentials easily and securely for your deployments. It also allows you to share credentials between deployments, as it is possible to have hundreds for all components to talk to each other. It will also help prevent poor credential choices, which can create security breaches. This talk will go into details about how config server works, how credential generation and storage is handled, and how you can use the reference implementation to choose your own credential generation and storage strategy.
This document discusses concepts related to Sass (Syntactically Awesome Style Sheets), which is a CSS preprocessor. It describes how Sass allows for variables, nesting, mixins and other features to make CSS more powerful and maintainable. Key concepts covered include using variables to reduce repetition, creating reusable code with mixins, and how Sass files are compiled into normal CSS that browsers can understand.
- Less is a dynamic stylesheet language that allows for nesting, variables, mixins and other features not available in regular CSS. It can be compiled to CSS either on the client-side or server-side.
- Some key features of Less include variables, mixins, nesting rules to mimic DOM structure, string interpolation, importing other files, and loops. These allow for reducing repetition, increasing organization and making CSS more dynamic and readable.
- Less is similar in syntax to CSS but with additional features. It can be compiled to plain CSS for browser compatibility. While Less and Sass are both preprocessors, Less uses JavaScript and can run client-side while Sass uses Ruby and runs server-side.
LESS CSS is a dynamic stylesheet language that extends CSS by adding features like variables, mixins, operations, and functions. It allows CSS stylesheets to be more modular and reusable by adding parametric mixins, nesting rules, and importing files. Key features include using variables to store colors and values, defining mixins to group repeated CSS declarations, performing mathematical operations on values, and modifying colors with functions. LESS files are compiled into regular CSS files for browsers to use.
LESS is a dynamic stylesheet language that extends CSS syntax. It allows features like variables, mixins, nested rules, and functions to make CSS more powerful, flexible and maintainable. LESS code is compiled to regular CSS, allowing dynamic behavior and logic in stylesheets. Key features of LESS include variables to define constants, mixins to embed rule sets, nested rules to organize selectors, and operators to perform calculations for values.
This document introduces Sass, Grunt, and Node modules. Sass is a CSS extension that adds features like variables, nesting, mixins and more. Grunt is a JavaScript task runner that automates repetitive tasks like minification. Node.js and npm are used to manage JavaScript packages and dependencies. The document discusses Sass syntax and features, using Grunt plugins to compile Sass and minify files, and installing modules with npm.
CSS Less framework overview, Pros and Cons.
Less (Leaner Style Sheets) is a backward-compatible language extension for CSS.
We will go through a quick overview of features.
- Comments
- Importing
- Variables
- Mixins
- Nesting
- Nested At-Rules and Bubbling
- Operations
- Escaping
- Namespaces and Accessors
- Maps
- Scope and
- Installing, configuring and usages of Less Framework
The document discusses CSS pre-processing with SASS and LESS. It begins with an introduction and disclosure by the author. The agenda then covers what CSS preprocessors are, why they are used, possible issues, how they work with basic examples, a comparison of SASS and LESS, and whether preprocessors should be tried. SASS is argued to be more robust with features like conditional statements, loop statements, and the Compass toolkit, making it a better choice than LESS overall.
Attached is an understanding of how SCSS works and can be used for implementation in website frameworks. One can apply certain techniques of scss in their website frameworks.
SCSS is a an extension of CSS that adds power and elegance to the basic language.
It helps keep large stylesheets well organized and get small stylesheets up and running quickly.
This recipe provides a structured approach for using SCSS Pre-processor for your web applications.
Features covered :
• Pre-processing
• Variables
• Nesting
• Partials
• Imports
• Mixins
• Inheritance
• Operators
This document provides an introduction to Less, a dynamic stylesheet language that can make CSS authoring more efficient. Less allows for variables, mixins, nested rules and functions/operations. Variables allow values to be specified once and reused throughout stylesheets. Mixins can embed class properties into other classes. Nested rules specify inheritance clearly. Functions/operations allow mathematical operations on properties and colors. Less files can be linked from HTML and compiled to CSS on the client-side using the Less.js script. For Windows, WinLess is a GUI compiler that watches for changes to Less files and automatically recompiles the CSS.
SASS is a CSS preprocessor that extends CSS by allowing nested rules, variables, mixins, inheritance and more. It has advantages like uniform CSS, abstraction of common patterns with mixins and functions, and reuse of values with variables. The document discusses these features and provides examples of using variables, mixins and functions in SASS.
This is a presentation I gave on Sept. 25, 2012 for the Winnipeg PHP Group on some of the features in LESS I have started using in my own development environment.
I'm excited to announce that I've just released the stable version of Sass 3.5. This release focuses on compatibility with new CSS syntax, and helps lay the groundwork for the upcoming module system and compatibility with Dart Sass.
This document introduces Sass (Syntactically Awesome Style Sheets), which is a CSS preprocessor that adds powerful features like variables, nested rules, mixins, inheritance, and other useful tools that help make authoring CSS easier and more maintainable. It discusses some of the key benefits of using Sass like variables, nesting, mixins, functions, and operations that make styling more powerful and repetitive tasks easier. It also covers using Compass, a Sass extension framework, to gain access to useful CSS3 mixins and functions.
In this session, I explained the core concepts of SASS and how it can enhance your development workflow. Sketch Web Parts first in HTML move them to SPFx later...
[Stefan Bauer] For more than one decade no other SASS revolutionised the way we write CSS nowadays. In modern SharePoint development, this is the core ingredient to deliver optimised and well architecture.
SASS is also one of the core ingredients to develop new customisations for SharePoint through SPFX.
This session will give you an overview of the most useful concepts in SASS. Besides you will get to know some limitations in SPFX and how to handle those properly.
After this session you will be able to:
• Sketch and develop web parts faster
• Create your reusable CSS
• Apply themes to your web parts
• Handle external CSS properly in SPFX
Sass is a scripting language that is interpreted into Cascading Style Sheets (CSS). SassScript is the scripting language itself. Sass consists of two syntaxes. The original syntax, called "the indented syntax", uses a syntax similar to Haml.
If you are a theme developer, using Sass or Syntactically Awesome Stylesheets is a time saving way to write your code and it is easy to learn once you are familiar with CSS. In this session, you will learn how to harness the power of variables, nesting, and mixins to take advantage of everything that SASS has to offer to write awesome code. In order to get the most from this session, you must have a good understanding of HTML and CSS.
Semelhante a LESS(CSS Pre Processor) introduction (20)
Temple of Asclepius in Thrace. Excavation resultsKrassimira Luka
The temple and the sanctuary around were dedicated to Asklepios Zmidrenus. This name has been known since 1875 when an inscription dedicated to him was discovered in Rome. The inscription is dated in 227 AD and was left by soldiers originating from the city of Philippopolis (modern Plovdiv).
LAND USE LAND COVER AND NDVI OF MIRZAPUR DISTRICT, UPRAHUL
This Dissertation explores the particular circumstances of Mirzapur, a region located in the
core of India. Mirzapur, with its varied terrains and abundant biodiversity, offers an optimal
environment for investigating the changes in vegetation cover dynamics. Our study utilizes
advanced technologies such as GIS (Geographic Information Systems) and Remote sensing to
analyze the transformations that have taken place over the course of a decade.
The complex relationship between human activities and the environment has been the focus
of extensive research and worry. As the global community grapples with swift urbanization,
population expansion, and economic progress, the effects on natural ecosystems are becoming
more evident. A crucial element of this impact is the alteration of vegetation cover, which plays a
significant role in maintaining the ecological equilibrium of our planet.Land serves as the foundation for all human activities and provides the necessary materials for
these activities. As the most crucial natural resource, its utilization by humans results in different
'Land uses,' which are determined by both human activities and the physical characteristics of the
land.
The utilization of land is impacted by human needs and environmental factors. In countries
like India, rapid population growth and the emphasis on extensive resource exploitation can lead
to significant land degradation, adversely affecting the region's land cover.
Therefore, human intervention has significantly influenced land use patterns over many
centuries, evolving its structure over time and space. In the present era, these changes have
accelerated due to factors such as agriculture and urbanization. Information regarding land use and
cover is essential for various planning and management tasks related to the Earth's surface,
providing crucial environmental data for scientific, resource management, policy purposes, and
diverse human activities.
Accurate understanding of land use and cover is imperative for the development planning
of any area. Consequently, a wide range of professionals, including earth system scientists, land
and water managers, and urban planners, are interested in obtaining data on land use and cover
changes, conversion trends, and other related patterns. The spatial dimensions of land use and
cover support policymakers and scientists in making well-informed decisions, as alterations in
these patterns indicate shifts in economic and social conditions. Monitoring such changes with the
help of Advanced technologies like Remote Sensing and Geographic Information Systems is
crucial for coordinated efforts across different administrative levels. Advanced technologies like
Remote Sensing and Geographic Information Systems
9
Changes in vegetation cover refer to variations in the distribution, composition, and overall
structure of plant communities across different temporal and spatial scales. These changes can
occur natural.
Strategies for Effective Upskilling is a presentation by Chinwendu Peace in a Your Skill Boost Masterclass organisation by the Excellence Foundation for South Sudan on 08th and 09th June 2024 from 1 PM to 3 PM on each day.
हिंदी वर्णमाला पीपीटी, hindi alphabet PPT presentation, hindi varnamala PPT, Hindi Varnamala pdf, हिंदी स्वर, हिंदी व्यंजन, sikhiye hindi varnmala, dr. mulla adam ali, hindi language and literature, hindi alphabet with drawing, hindi alphabet pdf, hindi varnamala for childrens, hindi language, hindi varnamala practice for kids, https://www.drmullaadamali.com
Main Java[All of the Base Concepts}.docxadhitya5119
This is part 1 of my Java Learning Journey. This Contains Custom methods, classes, constructors, packages, multithreading , try- catch block, finally block and more.
Leveraging Generative AI to Drive Nonprofit InnovationTechSoup
In this webinar, participants learned how to utilize Generative AI to streamline operations and elevate member engagement. Amazon Web Service experts provided a customer specific use cases and dived into low/no-code tools that are quick and easy to deploy through Amazon Web Service (AWS.)
1. {less}
( C S S P R E P R O C E S S O R )
R U S H I R A J B R A H M B H AT T
2. What is less?
• Less is a CSS pre-processor, meaning that it extends the CSS language, adding
features that allow variables, mixins, functions and many other techniques that
allow you to make CSS that is more maintainable, themeable and extendable.
• Less can run client side as well as server side.
• Less can be pre-compiled into CSS.
• At first less was written in Ruby ,later it was replaced by JavaScript.
3. Digging LESS Features
1) VARIABLES
2) MIXINS
a)Parametric Mixins
3) NESTING
a) Nested Rules
b) Conditional Nesting
4) PATTERN MATCHING
5) GUARD EXPRESSIONS (i.e. if statement)
4. LESS Features Cont..
6) Operators
7) Importing & File Paths
8) Functions
a) Color Functions
b) Math functions
9) NAMESPACES
10)SCOPE
5. LESS Installation
• Install Node.js in your PC.
– https://nodejs.org/en/
• After installing node open command prompt to install LESS
– npm install -g less
• After installation you can invoke the less compiler from command line by using
“lessc”
– lessc your-file.less
– By this you can see the output of CSS code in your command prompt only.
• To generate .css file in your folder use
– lessc your-file.less your-file.css
– This will generate a CSS file in your folder containing LESS file.
6. Less Installation Cont..
– Every time you make changes in LESS file you have to run this command to make
changes in CSS too.
– This will generate CSS file in your folder with auto generated pure CSS syntax from
LESS syntax.
• To automatically watch over the LESS file and make changes accordingly in to
CSS file
i. Install less-watch-compiler https://github.com/jonycheung/deadsimple-less-
watch-compiler
ii. In command Prompt
• npm install -g less-watch-compiler
iii. Go into your directory containing less file folder
• less-watch-compiler [LESS-FILE-FOLDER] [CSS-FILE-FOLDER-YOU-WANT-TO-GENERATE]
7. Less Installation Cont..
• This will watch over the folder in which .less file is there and will generate a
folder containing .css file.
– Example:
• Less-watch-compiler LessFolder CSSFolder
• You can also install less-autocompiler package in any editor you are using.
– Add line of code //out: your-file.css on top of .less file, it will automatically generate
.css file in your folder and will auto update as you update .less file.
8. Less Installation Cont..
• Client-side is the easiest way to get started and good for developing with Less,
but in production, when performance and reliability is important, it is good to
pre-compile using node.js or one of the many third party tools available.
• To start off, link your .less stylesheets with the rel attribute set to "stylesheet/less"
– <link rel="stylesheet/less" type="text/css" href="styles.less" />
• Next, download less.js and include it in a <script></script> tag in the <head>
element of your page:
– <script src="less.js" type="text/javascript"></script>
NOTE :Using less.js in the browser is great for development, but it's not recommended
for production
14. Pattern Matching
Less Syntax CSS Syntax
When there are two mixins with same name and different parameter sets, Less will match
the parameter pattern and apply the mixin that matches.
17. Importing
• If your less file is growing, you can make different less files of different sections
and importing those less file into your main less file.
• I have two files button.less and banner.less I have imported these files into my
main.less file.
• It is not necessary to write .less extension while importing, LESS is smart enough it
will understand that imported files are less files.
19. Color Function
• LESS 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.
✓ saturate(@color, @amount)
✓ desaturate(@color, @amount)
✓ lighten(@color, @amount)
✓ darken(@color, @amount)
✓ fadein(@color, @amount)
✓ fadeout(@color, @amount)
✓ fade(@color, @amount)
✓ spin(@color, @amount)
✓ mix(@color1, @color2, @weight)
✓ grayscale(@color)
✓ contrast(@color)
20. Math Function
• Math operations can be used for standard arithmetic or unit conversions. 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.
• LESS provides a couple of math functions you can use on number values:
– round(1.67); // returns '2'
– ceil(2.4); // returns '3'
– floor(2.6); // returns '2'
• If you need to turn a value into a percentage, you can do so with the
percentage function:
– percentage(0.5); // returns '50%'
21. Namespaces
Less Syntax CSS Syntax
Very useful if you want to create your own CSS libraries or distribute CSS.
22. Less Syntax CSS Syntax
Scope is similar to other programming languages. Variables and mixins first looked
up locally and then if not found it looks for them in the parent.
Scopes