CSS Preprocessors: LESS is more or look SASS-y trying

James Cryer
James CryerTech Lead, Principal Developer, Author and Public Speaker. BBC News: Travel & Weather um BBC
CSS preprocessor
LESS is more or look SASS-y trying
Intro
• Web Developer
• Mobile Developer
• .net magazine
• @jrcryer
Definition
CSS preprocessors extend CSS, allowing
designers and developers create dynamic, module
and re-usable CSS
So...
Benefits
• Reduces complexity
• Increase maintainability
• Frameworks
• Optimized CSS output
• Simplifies RWD implementation
Key Features
• Variables
• Mixins
• Nesting
• Operations
• Modular
LESS
• Inspired by original SASS
• Firstly written in Ruby, converted to JavaScript
• Client side (via less.js)
• Server side with NodeJs
<link rel="stylesheet/less" type="text/css" href="styles.less" />
<script src="less.js" type="text/javascript"></script>
npm install -g less
lessc styles.less
SASS / SCSS
• Implemented in Ruby
• Two Syntaxes
• SASS - Indent based, similar to HAML
• SCSS - CSS block
• Installation
gem install sass
sass --watch style.scss:style.css
Variables
/* style.scss */
$color: #4D926F;
#header {
color: $color;
}
h2 {
color: $color;
}
/* style.less */
@color: #4D926F;
#header {
color: @color;
}
h2 {
color: @color;
}
MIXINS
/** style.scss **/
@mixin rounded-corners ($radius: 5px) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-ms-border-radius: $radius;
-o-border-radius: $radius;
border-radius: $radius;
}
#header {
@include rounded-corners;
}
#footer {
@include rounded-corners(10px);
}
/** style.less **/
.rounded-corners (@radius: 5px) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
-ms-border-radius: @radius;
-o-border-radius: @radius;
border-radius: @radius;
}
#header {
.rounded-corners;
}
#footer {
.rounded-corners(10px);
}
Nesting
/** style.scss **/
#header {
h1 {
font-size: 26px;
font-weight: bold;
}
p { font-size: 12px;
a { text-decoration: none;
&:hover { border-width: 1px }
}
}
}
/** style.less **/
#header {
h1 {
font-size: 26px;
font-weight: bold;
}
p { font-size: 12px;
a { text-decoration: none;
&:hover { border-width: 1px }
}
}
}
Operations
/** style.scss **/
$the-border: 1px;
$base-color: #111;
$red: #842210;
#header {
color: ($base-color * 3);
border-left: $the-border;
border-right: ($the-border * 2);
}
#footer {
color: ($base-color + #003300);
border-color: desaturate($red, 10%);
}
/** style.less **/
@the-border: 1px;
@base-color: #111;
@red: #842210;
#header {
color: (@base-color * 3);
border-left: @the-border;
border-right: (@the-border * 2);
}
#footer {
color: (@base-color + #003300);
border-color: desaturate(@red, 10%);
}
Modules
/** _variables.scss **/
@base-color: #111;
/** style.scss **/
@import “variables”
#header {
color: @base-color;
}
/** variables.less **/
@base-color: #111;
/** style.less **/
@import-once ‘variables.less’
#header {
color: @base-color;
}
Responsive Pattern
modules/
header/
_base.scss
_responsive-320px-min.scss
_responsive-768px-min.scss
_responsive-1024px-min.scss
_variables.scss
_mixins.scss
_responsive.scss
app.scss
/** app.less **/
@import “variables”;
@import-once “mixins”;
@import-once “modules/header/base”;
@import-once “responsive”;
/** _responsive.less **/
@media (min-width:320px) {
@import-once “modules/header/responsive-
320px-min”;
}
modules/
header/
_base.less
_responsive-320px-min.less
_responsive-768px-min.less
_responsive-1024px-min.less
_variables.less
_mixins.less
_responsive.less
app.less
/** app.less **/
@import-once “_variables.less”;
@import-once “_mixins.less”;
@import-once “modules/header/_base.less”;
@import-once “_responsive.less”;
/** _responsive.less **/
@media (min-width:320px) {
@import-once
“modules/header/_responsive-320px-
min.less”;
}
CSS Frameworks
Other tools
Features Not Covered...
• GUARDED MIXINS
• NAMESPACES & SCOPE
• CONTROL DIRECTIVES
• DEBUGGING
• SOURCE MAPS
Demo Time!
Fin!
1 von 19

Recomendados

Write LESS. DO more. von
Write LESS. DO more.Write LESS. DO more.
Write LESS. DO more.Eugene Nor
658 views30 Folien
Syntactically awesome stylesheets (Sass) von
Syntactically awesome stylesheets (Sass)Syntactically awesome stylesheets (Sass)
Syntactically awesome stylesheets (Sass)Tahmina Khatoon
2.5K views47 Folien
Introduction to SASS von
Introduction to SASSIntroduction to SASS
Introduction to SASSJon Dean
13K views21 Folien
An Introduction to CSS Preprocessors (SASS & LESS) von
An Introduction to CSS Preprocessors (SASS & LESS)An Introduction to CSS Preprocessors (SASS & LESS)
An Introduction to CSS Preprocessors (SASS & LESS)Folio3 Software
1.6K views51 Folien
Less vs sass von
Less vs sassLess vs sass
Less vs sassAya Edamoto
12.7K views16 Folien
Less css von
Less cssLess css
Less cssBill Chea
2K views12 Folien

Más contenido relacionado

Was ist angesagt?

Bringing sexy back to CSS: SASS/SCSS, LESS and Compass von
Bringing sexy back to CSS: SASS/SCSS, LESS and CompassBringing sexy back to CSS: SASS/SCSS, LESS and Compass
Bringing sexy back to CSS: SASS/SCSS, LESS and CompassClaudina Sarahe
3K views28 Folien
Sass and compass workshop von
Sass and compass workshopSass and compass workshop
Sass and compass workshopShaho Toofani
982 views171 Folien
Compass/Sass von
Compass/SassCompass/Sass
Compass/Sassguest2409d3
817 views54 Folien
Sass presentation von
Sass presentationSass presentation
Sass presentationМарко Ковачевић
1.6K views11 Folien
LESS CSS von
LESS CSSLESS CSS
LESS CSSMathi Rajalingam
743 views24 Folien
Preprocessor presentation von
Preprocessor presentationPreprocessor presentation
Preprocessor presentationMario Noble
1.3K views44 Folien

Was ist angesagt?(20)

Bringing sexy back to CSS: SASS/SCSS, LESS and Compass von Claudina Sarahe
Bringing sexy back to CSS: SASS/SCSS, LESS and CompassBringing sexy back to CSS: SASS/SCSS, LESS and Compass
Bringing sexy back to CSS: SASS/SCSS, LESS and Compass
Claudina Sarahe3K views
Preprocessor presentation von Mario Noble
Preprocessor presentationPreprocessor presentation
Preprocessor presentation
Mario Noble1.3K views
Wrangling the CSS Beast with Sass von Rob Friesel
Wrangling the CSS Beast  with SassWrangling the CSS Beast  with Sass
Wrangling the CSS Beast with Sass
Rob Friesel1.4K views
HTML5, CSS, JavaScript Style guide and coding conventions von Knoldus Inc.
HTML5, CSS, JavaScript Style guide and coding conventionsHTML5, CSS, JavaScript Style guide and coding conventions
HTML5, CSS, JavaScript Style guide and coding conventions
Knoldus Inc.5.8K views
SASS is more than LESS von Itai Koren
SASS is more than LESSSASS is more than LESS
SASS is more than LESS
Itai Koren1.2K views
SASS - Syntactically Awesome Stylesheet von Neha Sharma
SASS - Syntactically Awesome StylesheetSASS - Syntactically Awesome Stylesheet
SASS - Syntactically Awesome Stylesheet
Neha Sharma1.2K views
Authoring Stylesheets with Compass & Sass von chriseppstein
Authoring Stylesheets with Compass & SassAuthoring Stylesheets with Compass & Sass
Authoring Stylesheets with Compass & Sass
chriseppstein5K views
LESS, the CSS Preprocessor von Andrea Tarr
LESS, the CSS PreprocessorLESS, the CSS Preprocessor
LESS, the CSS Preprocessor
Andrea Tarr3.3K views
CSS preprocessor: why and how von mirahman
CSS preprocessor: why and howCSS preprocessor: why and how
CSS preprocessor: why and how
mirahman1.9K views
Fasten RWD Development with Sass von Sven Wolfermann
Fasten RWD Development with SassFasten RWD Development with Sass
Fasten RWD Development with Sass
Sven Wolfermann5.2K views
CSS 開發加速指南-Sass & Compass von Lucien Lee
CSS 開發加速指南-Sass & CompassCSS 開發加速指南-Sass & Compass
CSS 開發加速指南-Sass & Compass
Lucien Lee2.5K views
Drupal & CSS Preprocessors von kdmarks
Drupal & CSS PreprocessorsDrupal & CSS Preprocessors
Drupal & CSS Preprocessors
kdmarks8.5K views
Doing More With Less von David Engel
Doing More With LessDoing More With Less
Doing More With Less
David Engel1.3K views
Breaking Free from Bootstrap: Custom Responsive Grids with Sass Susy von James Steinbach
Breaking Free from Bootstrap: Custom Responsive Grids with Sass SusyBreaking Free from Bootstrap: Custom Responsive Grids with Sass Susy
Breaking Free from Bootstrap: Custom Responsive Grids with Sass Susy
James Steinbach48.1K views
Using LESS, the CSS Preprocessor: J and Beyond 2013 von Andrea Tarr
Using LESS, the CSS Preprocessor: J and Beyond 2013Using LESS, the CSS Preprocessor: J and Beyond 2013
Using LESS, the CSS Preprocessor: J and Beyond 2013
Andrea Tarr2.1K views

Similar a CSS Preprocessors: LESS is more or look SASS-y trying

Css frameworks von
Css frameworksCss frameworks
Css frameworksDimitar Belchugov
648 views22 Folien
LESS : The dynamic stylesheet language von
LESS : The dynamic stylesheet languageLESS : The dynamic stylesheet language
LESS : The dynamic stylesheet languageKatsunori Tanaka
3.3K views68 Folien
Why less? von
Why less?Why less?
Why less?Bunlong Van
506 views11 Folien
Css preprocessor-140606115334-phpapp01 von
Css preprocessor-140606115334-phpapp01Css preprocessor-140606115334-phpapp01
Css preprocessor-140606115334-phpapp01Anam Hossain
271 views22 Folien
Dallas Drupal Days 2012 - Introduction to less sass-compass von
Dallas Drupal Days 2012  - Introduction to less sass-compassDallas Drupal Days 2012  - Introduction to less sass-compass
Dallas Drupal Days 2012 - Introduction to less sass-compassChris Lee
2K views41 Folien
CSS Extenders von
CSS ExtendersCSS Extenders
CSS ExtendersIdan Gazit
4.6K views52 Folien

Similar a CSS Preprocessors: LESS is more or look SASS-y trying(20)

LESS : The dynamic stylesheet language von Katsunori Tanaka
LESS : The dynamic stylesheet languageLESS : The dynamic stylesheet language
LESS : The dynamic stylesheet language
Katsunori Tanaka3.3K views
Css preprocessor-140606115334-phpapp01 von Anam Hossain
Css preprocessor-140606115334-phpapp01Css preprocessor-140606115334-phpapp01
Css preprocessor-140606115334-phpapp01
Anam Hossain271 views
Dallas Drupal Days 2012 - Introduction to less sass-compass von Chris Lee
Dallas Drupal Days 2012  - Introduction to less sass-compassDallas Drupal Days 2012  - Introduction to less sass-compass
Dallas Drupal Days 2012 - Introduction to less sass-compass
Chris Lee2K views
CSS Extenders von Idan Gazit
CSS ExtendersCSS Extenders
CSS Extenders
Idan Gazit4.6K views
SASS, Compass, Gulp, Greensock von Marco Pinheiro
SASS, Compass, Gulp, GreensockSASS, Compass, Gulp, Greensock
SASS, Compass, Gulp, Greensock
Marco Pinheiro1.3K views
Using Sass - Building on CSS von Sayanee Basu
Using Sass - Building on CSSUsing Sass - Building on CSS
Using Sass - Building on CSS
Sayanee Basu1K views
Getting Started with Sass & Compass von Rob Davarnia
Getting Started with Sass & CompassGetting Started with Sass & Compass
Getting Started with Sass & Compass
Rob Davarnia1.8K views
Pacific Northwest Drupal Summit: Basic & SASS von Steve Krueger
Pacific Northwest Drupal Summit: Basic & SASSPacific Northwest Drupal Summit: Basic & SASS
Pacific Northwest Drupal Summit: Basic & SASS
Steve Krueger1.5K views
Sass & Compass (Barcamp Stuttgart 2012) von emrox
Sass & Compass (Barcamp Stuttgart 2012)Sass & Compass (Barcamp Stuttgart 2012)
Sass & Compass (Barcamp Stuttgart 2012)
emrox3.3K views
Sass and Compass - Getting Started von edgincvg
Sass and Compass - Getting StartedSass and Compass - Getting Started
Sass and Compass - Getting Started
edgincvg1.7K views
Create SASSy web parts in SPFx von Stefan Bauer
Create SASSy web parts in SPFxCreate SASSy web parts in SPFx
Create SASSy web parts in SPFx
Stefan Bauer402 views
LESS(CSS Pre Processor) introduction von rushi7567
LESS(CSS Pre Processor) introductionLESS(CSS Pre Processor) introduction
LESS(CSS Pre Processor) introduction
rushi7567242 views

Último

Cocktail of Environments. How to Mix Test and Development Environments and St... von
Cocktail of Environments. How to Mix Test and Development Environments and St...Cocktail of Environments. How to Mix Test and Development Environments and St...
Cocktail of Environments. How to Mix Test and Development Environments and St...Aleksandr Tarasov
23 views135 Folien
Business Analyst Series 2023 - Week 4 Session 8 von
Business Analyst Series 2023 -  Week 4 Session 8Business Analyst Series 2023 -  Week 4 Session 8
Business Analyst Series 2023 - Week 4 Session 8DianaGray10
145 views13 Folien
Measuring User on the web with the core web vitals - by @theafolayan.pptx von
Measuring User on the web with the core web vitals - by @theafolayan.pptxMeasuring User on the web with the core web vitals - by @theafolayan.pptx
Measuring User on the web with the core web vitals - by @theafolayan.pptxOluwaseun Raphael Afolayan
14 views13 Folien
CryptoBotsAI von
CryptoBotsAICryptoBotsAI
CryptoBotsAIchandureddyvadala199
42 views5 Folien
"Running students' code in isolation. The hard way", Yurii Holiuk von
"Running students' code in isolation. The hard way", Yurii Holiuk "Running students' code in isolation. The hard way", Yurii Holiuk
"Running students' code in isolation. The hard way", Yurii Holiuk Fwdays
36 views34 Folien
"Node.js Development in 2024: trends and tools", Nikita Galkin von
"Node.js Development in 2024: trends and tools", Nikita Galkin "Node.js Development in 2024: trends and tools", Nikita Galkin
"Node.js Development in 2024: trends and tools", Nikita Galkin Fwdays
33 views38 Folien

Último(20)

Cocktail of Environments. How to Mix Test and Development Environments and St... von Aleksandr Tarasov
Cocktail of Environments. How to Mix Test and Development Environments and St...Cocktail of Environments. How to Mix Test and Development Environments and St...
Cocktail of Environments. How to Mix Test and Development Environments and St...
Business Analyst Series 2023 - Week 4 Session 8 von DianaGray10
Business Analyst Series 2023 -  Week 4 Session 8Business Analyst Series 2023 -  Week 4 Session 8
Business Analyst Series 2023 - Week 4 Session 8
DianaGray10145 views
"Running students' code in isolation. The hard way", Yurii Holiuk von Fwdays
"Running students' code in isolation. The hard way", Yurii Holiuk "Running students' code in isolation. The hard way", Yurii Holiuk
"Running students' code in isolation. The hard way", Yurii Holiuk
Fwdays36 views
"Node.js Development in 2024: trends and tools", Nikita Galkin von Fwdays
"Node.js Development in 2024: trends and tools", Nikita Galkin "Node.js Development in 2024: trends and tools", Nikita Galkin
"Node.js Development in 2024: trends and tools", Nikita Galkin
Fwdays33 views
Initiating and Advancing Your Strategic GIS Governance Strategy von Safe Software
Initiating and Advancing Your Strategic GIS Governance StrategyInitiating and Advancing Your Strategic GIS Governance Strategy
Initiating and Advancing Your Strategic GIS Governance Strategy
Safe Software184 views
"Package management in monorepos", Zoltan Kochan von Fwdays
"Package management in monorepos", Zoltan Kochan"Package management in monorepos", Zoltan Kochan
"Package management in monorepos", Zoltan Kochan
Fwdays34 views
The Power of Generative AI in Accelerating No Code Adoption.pdf von Saeed Al Dhaheri
The Power of Generative AI in Accelerating No Code Adoption.pdfThe Power of Generative AI in Accelerating No Code Adoption.pdf
The Power of Generative AI in Accelerating No Code Adoption.pdf
Saeed Al Dhaheri39 views
PCCC23:日本AMD株式会社 テーマ1「AMD Instinct™ アクセラレーターの概要」 von PC Cluster Consortium
PCCC23:日本AMD株式会社 テーマ1「AMD Instinct™ アクセラレーターの概要」PCCC23:日本AMD株式会社 テーマ1「AMD Instinct™ アクセラレーターの概要」
PCCC23:日本AMD株式会社 テーマ1「AMD Instinct™ アクセラレーターの概要」
Enabling DPU Hardware Accelerators in XCP-ng Cloud Platform Environment - And... von ShapeBlue
Enabling DPU Hardware Accelerators in XCP-ng Cloud Platform Environment - And...Enabling DPU Hardware Accelerators in XCP-ng Cloud Platform Environment - And...
Enabling DPU Hardware Accelerators in XCP-ng Cloud Platform Environment - And...
ShapeBlue108 views
LLMs in Production: Tooling, Process, and Team Structure von Aggregage
LLMs in Production: Tooling, Process, and Team StructureLLMs in Production: Tooling, Process, and Team Structure
LLMs in Production: Tooling, Process, and Team Structure
Aggregage57 views
Transcript: Redefining the book supply chain: A glimpse into the future - Tec... von BookNet Canada
Transcript: Redefining the book supply chain: A glimpse into the future - Tec...Transcript: Redefining the book supply chain: A glimpse into the future - Tec...
Transcript: Redefining the book supply chain: A glimpse into the future - Tec...
BookNet Canada41 views
This talk was not generated with ChatGPT: how AI is changing science von Elena Simperl
This talk was not generated with ChatGPT: how AI is changing scienceThis talk was not generated with ChatGPT: how AI is changing science
This talk was not generated with ChatGPT: how AI is changing science
Elena Simperl32 views
The Power of Heat Decarbonisation Plans in the Built Environment von IES VE
The Power of Heat Decarbonisation Plans in the Built EnvironmentThe Power of Heat Decarbonisation Plans in the Built Environment
The Power of Heat Decarbonisation Plans in the Built Environment
IES VE84 views

CSS Preprocessors: LESS is more or look SASS-y trying

  • 1. CSS preprocessor LESS is more or look SASS-y trying
  • 2. Intro • Web Developer • Mobile Developer • .net magazine • @jrcryer
  • 3. Definition CSS preprocessors extend CSS, allowing designers and developers create dynamic, module and re-usable CSS
  • 5. Benefits • Reduces complexity • Increase maintainability • Frameworks • Optimized CSS output • Simplifies RWD implementation
  • 6. Key Features • Variables • Mixins • Nesting • Operations • Modular
  • 7. LESS • Inspired by original SASS • Firstly written in Ruby, converted to JavaScript • Client side (via less.js) • Server side with NodeJs <link rel="stylesheet/less" type="text/css" href="styles.less" /> <script src="less.js" type="text/javascript"></script> npm install -g less lessc styles.less
  • 8. SASS / SCSS • Implemented in Ruby • Two Syntaxes • SASS - Indent based, similar to HAML • SCSS - CSS block • Installation gem install sass sass --watch style.scss:style.css
  • 9. Variables /* style.scss */ $color: #4D926F; #header { color: $color; } h2 { color: $color; } /* style.less */ @color: #4D926F; #header { color: @color; } h2 { color: @color; }
  • 10. MIXINS /** style.scss **/ @mixin rounded-corners ($radius: 5px) { -webkit-border-radius: $radius; -moz-border-radius: $radius; -ms-border-radius: $radius; -o-border-radius: $radius; border-radius: $radius; } #header { @include rounded-corners; } #footer { @include rounded-corners(10px); } /** style.less **/ .rounded-corners (@radius: 5px) { -webkit-border-radius: @radius; -moz-border-radius: @radius; -ms-border-radius: @radius; -o-border-radius: @radius; border-radius: @radius; } #header { .rounded-corners; } #footer { .rounded-corners(10px); }
  • 11. Nesting /** style.scss **/ #header { h1 { font-size: 26px; font-weight: bold; } p { font-size: 12px; a { text-decoration: none; &:hover { border-width: 1px } } } } /** style.less **/ #header { h1 { font-size: 26px; font-weight: bold; } p { font-size: 12px; a { text-decoration: none; &:hover { border-width: 1px } } } }
  • 12. Operations /** style.scss **/ $the-border: 1px; $base-color: #111; $red: #842210; #header { color: ($base-color * 3); border-left: $the-border; border-right: ($the-border * 2); } #footer { color: ($base-color + #003300); border-color: desaturate($red, 10%); } /** style.less **/ @the-border: 1px; @base-color: #111; @red: #842210; #header { color: (@base-color * 3); border-left: @the-border; border-right: (@the-border * 2); } #footer { color: (@base-color + #003300); border-color: desaturate(@red, 10%); }
  • 13. Modules /** _variables.scss **/ @base-color: #111; /** style.scss **/ @import “variables” #header { color: @base-color; } /** variables.less **/ @base-color: #111; /** style.less **/ @import-once ‘variables.less’ #header { color: @base-color; }
  • 14. Responsive Pattern modules/ header/ _base.scss _responsive-320px-min.scss _responsive-768px-min.scss _responsive-1024px-min.scss _variables.scss _mixins.scss _responsive.scss app.scss /** app.less **/ @import “variables”; @import-once “mixins”; @import-once “modules/header/base”; @import-once “responsive”; /** _responsive.less **/ @media (min-width:320px) { @import-once “modules/header/responsive- 320px-min”; } modules/ header/ _base.less _responsive-320px-min.less _responsive-768px-min.less _responsive-1024px-min.less _variables.less _mixins.less _responsive.less app.less /** app.less **/ @import-once “_variables.less”; @import-once “_mixins.less”; @import-once “modules/header/_base.less”; @import-once “_responsive.less”; /** _responsive.less **/ @media (min-width:320px) { @import-once “modules/header/_responsive-320px- min.less”; }
  • 17. Features Not Covered... • GUARDED MIXINS • NAMESPACES & SCOPE • CONTROL DIRECTIVES • DEBUGGING • SOURCE MAPS
  • 19. Fin!