Soumettre la recherche
Mettre en ligne
Sass
•
6 j'aime
•
907 vues
Bram Verdyck
Suivre
This is a brief presentation about SASS and Compass, and their basic functionality.
Lire moins
Lire la suite
Technologie
Signaler
Partager
Signaler
Partager
1 sur 52
Télécharger maintenant
Télécharger pour lire hors ligne
Recommandé
CSS
CSS
Mallikarjuna G D
Html Expression Web
Html Expression Web
Mark Frydenberg
Wrangling the CSS Beast with Sass
Wrangling the CSS Beast with Sass
Rob Friesel
Intro to SASS CSS
Intro to SASS CSS
Kianosh Pourian
Advanced sass/compass
Advanced sass/compass
Nick Cooley
CSS Extenders
CSS Extenders
Idan Gazit
Introduction to SASS
Introduction to SASS
Jon Dean
Css introduction
Css introduction
Nicha Jutasirivongse
Recommandé
CSS
CSS
Mallikarjuna G D
Html Expression Web
Html Expression Web
Mark Frydenberg
Wrangling the CSS Beast with Sass
Wrangling the CSS Beast with Sass
Rob Friesel
Intro to SASS CSS
Intro to SASS CSS
Kianosh Pourian
Advanced sass/compass
Advanced sass/compass
Nick Cooley
CSS Extenders
CSS Extenders
Idan Gazit
Introduction to SASS
Introduction to SASS
Jon Dean
Css introduction
Css introduction
Nicha Jutasirivongse
Authoring Stylesheets with Compass & Sass
Authoring Stylesheets with Compass & Sass
chriseppstein
Deep dive into sass
Deep dive into sass
Knoldus Inc.
SASS - Syntactically Awesome Stylesheet
SASS - Syntactically Awesome Stylesheet
Neha Sharma
Introduction to sass
Introduction to sass
Anoop Raveendran
Less css
Less css
Bill Chea
Intro to css & sass
Intro to css & sass
Sean Wolfe
CSS Reset
CSS Reset
Russ Weakley
An Introduction to CSS Preprocessors (SASS & LESS)
An Introduction to CSS Preprocessors (SASS & LESS)
Folio3 Software
Css frameworks
Css frameworks
Dimitar Belchugov
CSS Preprocessors: LESS is more or look SASS-y trying
CSS Preprocessors: LESS is more or look SASS-y trying
James Cryer
Fundamental CSS3
Fundamental CSS3
Achmad Solichin
CSS preprocessor: why and how
CSS preprocessor: why and how
mirahman
Intro to CSS
Intro to CSS
Randy Oest II
CSS, CSS Selectors, CSS Box Model
CSS, CSS Selectors, CSS Box Model
jamiecavanaugh
CSS
CSS
Mallikarjuna G D
[Worskhop Summits] CSS3 Workshop
[Worskhop Summits] CSS3 Workshop
Christopher Schmitt
Web 102 INtro to CSS
Web 102 INtro to CSS
Hawkman Academy
Syntactically awesome stylesheets (Sass)
Syntactically awesome stylesheets (Sass)
Tahmina Khatoon
ARTDM 171, Week 5: CSS
ARTDM 171, Week 5: CSS
Gilbert Guerrero
CSS3
CSS3
Chathuranga Jayanath
reveal.js 3.0.0
reveal.js 3.0.0
Hakim El Hattab
The Minimum Loveable Product
The Minimum Loveable Product
The Happy Startup School
Contenu connexe
Tendances
Authoring Stylesheets with Compass & Sass
Authoring Stylesheets with Compass & Sass
chriseppstein
Deep dive into sass
Deep dive into sass
Knoldus Inc.
SASS - Syntactically Awesome Stylesheet
SASS - Syntactically Awesome Stylesheet
Neha Sharma
Introduction to sass
Introduction to sass
Anoop Raveendran
Less css
Less css
Bill Chea
Intro to css & sass
Intro to css & sass
Sean Wolfe
CSS Reset
CSS Reset
Russ Weakley
An Introduction to CSS Preprocessors (SASS & LESS)
An Introduction to CSS Preprocessors (SASS & LESS)
Folio3 Software
Css frameworks
Css frameworks
Dimitar Belchugov
CSS Preprocessors: LESS is more or look SASS-y trying
CSS Preprocessors: LESS is more or look SASS-y trying
James Cryer
Fundamental CSS3
Fundamental CSS3
Achmad Solichin
CSS preprocessor: why and how
CSS preprocessor: why and how
mirahman
Intro to CSS
Intro to CSS
Randy Oest II
CSS, CSS Selectors, CSS Box Model
CSS, CSS Selectors, CSS Box Model
jamiecavanaugh
CSS
CSS
Mallikarjuna G D
[Worskhop Summits] CSS3 Workshop
[Worskhop Summits] CSS3 Workshop
Christopher Schmitt
Web 102 INtro to CSS
Web 102 INtro to CSS
Hawkman Academy
Syntactically awesome stylesheets (Sass)
Syntactically awesome stylesheets (Sass)
Tahmina Khatoon
ARTDM 171, Week 5: CSS
ARTDM 171, Week 5: CSS
Gilbert Guerrero
CSS3
CSS3
Chathuranga Jayanath
Tendances
(20)
Authoring Stylesheets with Compass & Sass
Authoring Stylesheets with Compass & Sass
Deep dive into sass
Deep dive into sass
SASS - Syntactically Awesome Stylesheet
SASS - Syntactically Awesome Stylesheet
Introduction to sass
Introduction to sass
Less css
Less css
Intro to css & sass
Intro to css & sass
CSS Reset
CSS Reset
An Introduction to CSS Preprocessors (SASS & LESS)
An Introduction to CSS Preprocessors (SASS & LESS)
Css frameworks
Css frameworks
CSS Preprocessors: LESS is more or look SASS-y trying
CSS Preprocessors: LESS is more or look SASS-y trying
Fundamental CSS3
Fundamental CSS3
CSS preprocessor: why and how
CSS preprocessor: why and how
Intro to CSS
Intro to CSS
CSS, CSS Selectors, CSS Box Model
CSS, CSS Selectors, CSS Box Model
CSS
CSS
[Worskhop Summits] CSS3 Workshop
[Worskhop Summits] CSS3 Workshop
Web 102 INtro to CSS
Web 102 INtro to CSS
Syntactically awesome stylesheets (Sass)
Syntactically awesome stylesheets (Sass)
ARTDM 171, Week 5: CSS
ARTDM 171, Week 5: CSS
CSS3
CSS3
En vedette
reveal.js 3.0.0
reveal.js 3.0.0
Hakim El Hattab
The Minimum Loveable Product
The Minimum Loveable Product
The Happy Startup School
How People Really Hold and Touch (their Phones)
How People Really Hold and Touch (their Phones)
Steven Hoober
Five Killer Ways to Design The Same Slide
Five Killer Ways to Design The Same Slide
Crispy Presentations
Displaying Data
Displaying Data
Bipul Deb Nath
The Seven Deadly Social Media Sins
The Seven Deadly Social Media Sins
XPLAIN
The History of SEO
The History of SEO
HubSpot
Upworthy: 10 Ways To Win The Internets
Upworthy: 10 Ways To Win The Internets
Upworthy
The What If Technique presented by Motivate Design
The What If Technique presented by Motivate Design
Motivate Design
How I got 2.5 Million views on Slideshare (by @nickdemey - Board of Innovation)
How I got 2.5 Million views on Slideshare (by @nickdemey - Board of Innovation)
Board of Innovation
What 33 Successful Entrepreneurs Learned From Failure
What 33 Successful Entrepreneurs Learned From Failure
ReferralCandy
How To (Really) Get Into Marketing
How To (Really) Get Into Marketing
Ed Fry
Design Your Career 2018
Design Your Career 2018
Slides That Rock
Crap. The Content Marketing Deluge.
Crap. The Content Marketing Deluge.
Velocity Partners
Why Content Marketing Fails
Why Content Marketing Fails
Rand Fishkin
10 Powerful Body Language Tips for your next Presentation
10 Powerful Body Language Tips for your next Presentation
SOAP Presentations
Digital Strategy 101
Digital Strategy 101
Bud Caddell
What Would Steve Do? 10 Lessons from the World's Most Captivating Presenters
What Would Steve Do? 10 Lessons from the World's Most Captivating Presenters
HubSpot
The Search for Meaning in B2B Marketing
The Search for Meaning in B2B Marketing
Velocity Partners
How Google Works
How Google Works
Eric Schmidt
En vedette
(20)
reveal.js 3.0.0
reveal.js 3.0.0
The Minimum Loveable Product
The Minimum Loveable Product
How People Really Hold and Touch (their Phones)
How People Really Hold and Touch (their Phones)
Five Killer Ways to Design The Same Slide
Five Killer Ways to Design The Same Slide
Displaying Data
Displaying Data
The Seven Deadly Social Media Sins
The Seven Deadly Social Media Sins
The History of SEO
The History of SEO
Upworthy: 10 Ways To Win The Internets
Upworthy: 10 Ways To Win The Internets
The What If Technique presented by Motivate Design
The What If Technique presented by Motivate Design
How I got 2.5 Million views on Slideshare (by @nickdemey - Board of Innovation)
How I got 2.5 Million views on Slideshare (by @nickdemey - Board of Innovation)
What 33 Successful Entrepreneurs Learned From Failure
What 33 Successful Entrepreneurs Learned From Failure
How To (Really) Get Into Marketing
How To (Really) Get Into Marketing
Design Your Career 2018
Design Your Career 2018
Crap. The Content Marketing Deluge.
Crap. The Content Marketing Deluge.
Why Content Marketing Fails
Why Content Marketing Fails
10 Powerful Body Language Tips for your next Presentation
10 Powerful Body Language Tips for your next Presentation
Digital Strategy 101
Digital Strategy 101
What Would Steve Do? 10 Lessons from the World's Most Captivating Presenters
What Would Steve Do? 10 Lessons from the World's Most Captivating Presenters
The Search for Meaning in B2B Marketing
The Search for Meaning in B2B Marketing
How Google Works
How Google Works
Similaire à Sass
Mobile-first OOCSS, Sass & Compass at BBC Responsive News
Mobile-first OOCSS, Sass & Compass at BBC Responsive News
Kaelig Deloumeau-Prigent
Using Sass - Building on CSS
Using Sass - Building on CSS
Sayanee Basu
Getting Started with Sass & Compass
Getting Started with Sass & Compass
Rob Davarnia
Sass & Compass (Barcamp Stuttgart 2012)
Sass & Compass (Barcamp Stuttgart 2012)
emrox
Accelerated Stylesheets
Accelerated Stylesheets
Wynn Netherland
Bringing sexy back to CSS: SASS/SCSS, LESS and Compass
Bringing sexy back to CSS: SASS/SCSS, LESS and Compass
Claudina Sarahe
Big Design Conference: CSS3
Big Design Conference: CSS3
Wynn Netherland
Joan Leon | Houdini, programando en CSS | Codemotion Madrid 2018
Joan Leon | Houdini, programando en CSS | Codemotion Madrid 2018
Codemotion
SASS is more than LESS
SASS is more than LESS
Itai Koren
Theming and Sass
Theming and Sass
James Pearce
Managing responsive websites with css preprocessors.
Managing responsive websites with css preprocessors.
The University of Akron
Doing More With Less
Doing More With Less
David Engel
Sass and Compass - Getting Started
Sass and Compass - Getting Started
edgincvg
CSS3 is Not Magic Pixie Dust
CSS3 is Not Magic Pixie Dust
Kyle Adams
SASS, Compass, Gulp, Greensock
SASS, Compass, Gulp, Greensock
Marco Pinheiro
FCIP SASS Talk
FCIP SASS Talk
Chris Schneider
Work and play with SASS & Compass
Work and play with SASS & Compass
Andreas Dantz
CSS: A Slippery Slope to the Backend
CSS: A Slippery Slope to the Backend
FITC
Learn Sass and Compass quick
Learn Sass and Compass quick
Billy Shih
Css preprocessor-140606115334-phpapp01
Css preprocessor-140606115334-phpapp01
Anam Hossain
Similaire à Sass
(20)
Mobile-first OOCSS, Sass & Compass at BBC Responsive News
Mobile-first OOCSS, Sass & Compass at BBC Responsive News
Using Sass - Building on CSS
Using Sass - Building on CSS
Getting Started with Sass & Compass
Getting Started with Sass & Compass
Sass & Compass (Barcamp Stuttgart 2012)
Sass & Compass (Barcamp Stuttgart 2012)
Accelerated Stylesheets
Accelerated Stylesheets
Bringing sexy back to CSS: SASS/SCSS, LESS and Compass
Bringing sexy back to CSS: SASS/SCSS, LESS and Compass
Big Design Conference: CSS3
Big Design Conference: CSS3
Joan Leon | Houdini, programando en CSS | Codemotion Madrid 2018
Joan Leon | Houdini, programando en CSS | Codemotion Madrid 2018
SASS is more than LESS
SASS is more than LESS
Theming and Sass
Theming and Sass
Managing responsive websites with css preprocessors.
Managing responsive websites with css preprocessors.
Doing More With Less
Doing More With Less
Sass and Compass - Getting Started
Sass and Compass - Getting Started
CSS3 is Not Magic Pixie Dust
CSS3 is Not Magic Pixie Dust
SASS, Compass, Gulp, Greensock
SASS, Compass, Gulp, Greensock
FCIP SASS Talk
FCIP SASS Talk
Work and play with SASS & Compass
Work and play with SASS & Compass
CSS: A Slippery Slope to the Backend
CSS: A Slippery Slope to the Backend
Learn Sass and Compass quick
Learn Sass and Compass quick
Css preprocessor-140606115334-phpapp01
Css preprocessor-140606115334-phpapp01
Dernier
AWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of Terraform
Andrey Devyatkin
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
ThousandEyes
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
MadyBayot
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
apidays
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Edi Saputra
Ransomware_Q4_2023. The report. [EN].pdf
Ransomware_Q4_2023. The report. [EN].pdf
Overkill Security
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
Product Anonymous
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
apidays
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
sammart93
presentation ICT roal in 21st century education
presentation ICT roal in 21st century education
jfdjdjcjdnsjd
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Safe Software
Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...
apidays
AXA XL - Insurer Innovation Award Americas 2024
AXA XL - Insurer Innovation Award Americas 2024
The Digital Insurer
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...
Martijn de Jong
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc
Cyberprint. Dark Pink Apt Group [EN].pdf
Cyberprint. Dark Pink Apt Group [EN].pdf
Overkill Security
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
apidays
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
DianaGray10
DBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor Presentation
Dropbox
[BuildWithAI] Introduction to Gemini.pdf
[BuildWithAI] Introduction to Gemini.pdf
Sandro Moreira
Dernier
(20)
AWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of Terraform
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Ransomware_Q4_2023. The report. [EN].pdf
Ransomware_Q4_2023. The report. [EN].pdf
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
presentation ICT roal in 21st century education
presentation ICT roal in 21st century education
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...
AXA XL - Insurer Innovation Award Americas 2024
AXA XL - Insurer Innovation Award Americas 2024
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
Cyberprint. Dark Pink Apt Group [EN].pdf
Cyberprint. Dark Pink Apt Group [EN].pdf
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
DBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor Presentation
[BuildWithAI] Introduction to Gemini.pdf
[BuildWithAI] Introduction to Gemini.pdf
Sass
1.
SASS Super awesome stylesheets
2.
Who am I?
3.
#me {
name: ‘Bram Verdyck’; &:active { job: ‘Web ninja @ These Days’; interests: ‘HTML5, CSS3, JS, Fast cars’; social: ‘@TroTi13’; } &:before { school:’MCT @ KDG’; } } Who am I?
4.
What’s this about?
Image source: http://thekingofthevikings.deviantart.com/art/8-Bit- Question-Box-170241434
5.
S.A.S.S Syntactically awesome style
sheets Super awesome style sheets What’s this about? Image source: http://sass-lang.com/
6.
What’s wrong with
normal style sheets? Image source: http://webwox.wordpress.com/2011/08/31/history-of- cascading-style-sheetscss/
7.
Nothing really…
8.
CSS is awesome!
Image source: http://www.zazzle.com/ css_is_awesome_with_scroll_mug-168224268218561554
9.
CSS let’s you
make pretty things Image source: http://www.onlymotivational.com/pictures/ i_feel_pretty.htm
10.
Without it, all
websites would look the same Image source: http://kill.devc.at/node/284
11.
But…
12.
Developing CSS is
slow Image source: http://www.tensionnot.com/pictures/Car/Horse-Cart-Car
13.
CSS
is repetitive Image source: http://www.123rf.com/photo_5880238_windows-shaped-like- space-invaders-on-building-canada-tower-london-exterior.html
14.
CSS is messy Image source:
http://vickybeeching.com/blog/why-are-we-musicians- often-so-messy/messy-office-03/
15.
CSS needs external
tools for optimization
16.
CSS isn’t really
reusable
17.
WHAT CAN SASS
DO FOR US? Most important stuff
18.
Nesting
19.
Be gone repetition
Overview Better readability #nav { #nav { float:left; float:left; width:100px; width:100px; } a { text-decoration:none; #nav a { } text-decoration:none; } }
20.
Variables - $
21.
Wh00t?
Variables in CSS? That’s just awesome! $link-color:#000; #nav { #nav { float:left; float:left; width:100px; width:100px; } a { #nav a { color:$link-color; color:#000; text-decoration:none; text-decoration:none; } } }
22.
Maths, calculations
23.
A+B
$width:100px; #nav { height:100px – 2*15; A–B padding:10px 15px; width:$width – 2*10; } A*B #nav { height:70px; A/B padding:10px 15px; width:80px; }
24.
$color:#000;
a { a { color:#000; color:$color; &:hover { &:hover { color:#1a1a1a; color:lighten($color, 10); } } } } Lighten($color, amount) darken($color, amount) $color1 + $color2 $color1 - $color2
25.
Mixins - @mixin
26.
Reusable ++ Readability ++ @mixin
hover-link($color) { & { color:$color; } &:hover { color:$lighten($color,10); } } a { @include hover-link(#000); }
27.
Import - @import
28.
Multiple files Compiled into
1 Only uses what you want @import ‘path/to/file.scss’;
29.
WHAT CAN SASS
DO MORE? There’s more?!
30.
@for $i from
1 through 3 {} @each $el in h1, h2, h3, h4 {} $i:0; @while $i < 6 { $i: $i + 1 } Loops
31.
.link {
color:$link-color; &:hover { color:$lighten($color,10); } } a { @extend .link; } Extend - @extend
32.
No more double
code Less writing
33.
SASS also auto
minifies & checks for errors :nested – default :expanded - normal :compact - every selector on 1 line :compressed - no more whitespaces
34.
Awesome right?
35.
HOW TO INSTALL
/ USE
36.
All you need is
ruby Easy as pie! Image source: http://www.sw.it.aoyama.ac.jp/2009/pub/IUC33-ruby1.9/
37.
Mmm pie…. Image source:
http://www.motivationals.org/demotivational-posters-1/ demotivational-poster-44122.jpg
38.
$ gem install
sass $ cd path/to/css $ sass watch style.scss:style.css Or $ cd path/to/css $ sass watch css:css And 2 lines in terminal…
39.
STOP, HAMMER RECAP
TIME!
40.
•
Nesting • Variables - $ • Maths & color functions • Mixins - @mixin • Import - @import Recap
41.
AND STILL… THERE’S
MORE
42.
COMPASS
43.
Compass
<3 CSS 3 Image source: http://desandro.com/work/zui-site-riot/html5css3.png
44.
Loads of predefined & tested
mixins Image source: http://compass-style.org
45.
Blueprint grid system built
in & ready to use Image source: http://www.blueprintcss.org/
46.
pi() sin($number) cos($number) tan($number) Extended maths
47.
Advanced sprite control
48.
STILL NOT CONVINCED?
49.
• http://sass-lang.com/ • http://compass-style.org/ •
http://rubyinstaller.org/ (windows needs ruby installer) • https://github.com/thesedays/scss- mixins Check these links!
50.
• http://www.thesedays.com • http://labs.thesedays.com And
these links!
51.
THAT’S ABOUT IT…
52.
DEMO PLZ?!
Télécharger maintenant