SlideShare une entreprise Scribd logo
1  sur  6
Télécharger pour lire hors ligne
SASS & CSS Arquitecture
CSS para adultos
Que hay que saber de SASS?
.sass
.scss
.css
.map
● --watch sass:css
● variables $
● nesting
● @mixins
● @extend
Algo mas?
sass vs scss, sassmaister, the sass way, css2sass
● @if,@while
● %placeholders
● _partials
● source maps
● comments
Que hay que saber de SASS?
Sass Basics
Nuevos poderes, mas responsabilidad
http://css-tricks.com/crazy-town-selectors/
http://thesassway.com/beginner/the-inception-rule
http://css-tricks.com/sass-style-guide/
http://csswizardry.com/2013/04/shame-css/
Arquitecturas y metodologías
Buenas Prácticas
Arquitecturas y
metodologías
● OOCSS, SMACSS, BEM, etc.
● Naming Convention
● Manifest, Globals, Sections, partials
● Break Into As Many Small Files As Makes Sense
Cursos en Treehouse
http://teamtreehouse.com/library/sass-basics
http://teamtreehouse.com/library/advanced-sass
http://teamtreehouse.com/library/modular-css-with-sass

Contenu connexe

En vedette

LESS vs. SASS - CSS Precompiler Showdown
LESS vs. SASS - CSS Precompiler ShowdownLESS vs. SASS - CSS Precompiler Showdown
LESS vs. SASS - CSS Precompiler ShowdownKevin Powell
 
Poverty - its meaning, definitions, alleviation methods
Poverty - its meaning, definitions, alleviation methodsPoverty - its meaning, definitions, alleviation methods
Poverty - its meaning, definitions, alleviation methodsKhathiravan Chandrasekaran
 
Manchester city
Manchester cityManchester city
Manchester cityofrancis
 
French Property Market 2014
French Property Market 2014French Property Market 2014
French Property Market 2014David Bourla
 
In memory computing
In memory computingIn memory computing
In memory computingGagan Reddy
 
French Property market 2015 - Cushman & Wakefield
French Property market 2015 - Cushman & WakefieldFrench Property market 2015 - Cushman & Wakefield
French Property market 2015 - Cushman & WakefieldDavid Bourla
 
Waldorf Education
Waldorf EducationWaldorf Education
Waldorf EducationxMerodi
 
Simo Ahava - Tag Management Solutions – Best. Data. Ever. MKTFEST 2014
Simo Ahava - Tag Management Solutions – Best. Data. Ever. MKTFEST 2014Simo Ahava - Tag Management Solutions – Best. Data. Ever. MKTFEST 2014
Simo Ahava - Tag Management Solutions – Best. Data. Ever. MKTFEST 2014Marketing Festival
 
Reverse Engineering
Reverse EngineeringReverse Engineering
Reverse Engineeringdswanson
 

En vedette (20)

Less vs sass
Less vs sassLess vs sass
Less vs sass
 
LESS vs. SASS - CSS Precompiler Showdown
LESS vs. SASS - CSS Precompiler ShowdownLESS vs. SASS - CSS Precompiler Showdown
LESS vs. SASS - CSS Precompiler Showdown
 
Poverty - its meaning, definitions, alleviation methods
Poverty - its meaning, definitions, alleviation methodsPoverty - its meaning, definitions, alleviation methods
Poverty - its meaning, definitions, alleviation methods
 
Datomic
DatomicDatomic
Datomic
 
Manchester city
Manchester cityManchester city
Manchester city
 
Datomic
DatomicDatomic
Datomic
 
Backbone.js
Backbone.jsBackbone.js
Backbone.js
 
Datomic
DatomicDatomic
Datomic
 
French Property Market 2014
French Property Market 2014French Property Market 2014
French Property Market 2014
 
intel core i7
intel core i7intel core i7
intel core i7
 
Clojure
ClojureClojure
Clojure
 
In memory computing
In memory computingIn memory computing
In memory computing
 
French Property market 2015 - Cushman & Wakefield
French Property market 2015 - Cushman & WakefieldFrench Property market 2015 - Cushman & Wakefield
French Property market 2015 - Cushman & Wakefield
 
Medical devices
Medical devicesMedical devices
Medical devices
 
ReactJs
ReactJsReactJs
ReactJs
 
Waldorf Education
Waldorf EducationWaldorf Education
Waldorf Education
 
Simo Ahava - Tag Management Solutions – Best. Data. Ever. MKTFEST 2014
Simo Ahava - Tag Management Solutions – Best. Data. Ever. MKTFEST 2014Simo Ahava - Tag Management Solutions – Best. Data. Ever. MKTFEST 2014
Simo Ahava - Tag Management Solutions – Best. Data. Ever. MKTFEST 2014
 
Oprah Winfrey
Oprah WinfreyOprah Winfrey
Oprah Winfrey
 
Sap fiori
Sap fioriSap fiori
Sap fiori
 
Reverse Engineering
Reverse EngineeringReverse Engineering
Reverse Engineering
 

Similaire à SASS & CSS Arquitecture

ADUG - May 2014 - Theming in Drupal using Sass
ADUG - May 2014 - Theming in Drupal using SassADUG - May 2014 - Theming in Drupal using Sass
ADUG - May 2014 - Theming in Drupal using SassEric Sembrat
 
SPS Oslo - Stop your SharePoint CSS becoming a di-sass-ter today!
SPS Oslo - Stop your SharePoint CSS becoming a di-sass-ter today!SPS Oslo - Stop your SharePoint CSS becoming a di-sass-ter today!
SPS Oslo - Stop your SharePoint CSS becoming a di-sass-ter today!Stefan Bauer
 
Styling your projects! leveraging css and r sass in r projects
Styling your projects! leveraging css and r sass in r projectsStyling your projects! leveraging css and r sass in r projects
Styling your projects! leveraging css and r sass in r projectsAppsilon Data Science
 
CSS Workflow. Pre & Post
CSS Workflow. Pre & PostCSS Workflow. Pre & Post
CSS Workflow. Pre & PostAnton Dosov
 
SASS is more than LESS
SASS is more than LESSSASS is more than LESS
SASS is more than LESSItai Koren
 
The sass way - Yatendra Bhardwaj
The sass way - Yatendra BhardwajThe sass way - Yatendra Bhardwaj
The sass way - Yatendra BhardwajYatendra Bhardwaj
 
Stop your share point css become a di-sass-ter today - SPS Munich
Stop your share point css become a di-sass-ter today - SPS MunichStop your share point css become a di-sass-ter today - SPS Munich
Stop your share point css become a di-sass-ter today - SPS MunichStefan Bauer
 
Bliblidotcom - SASS Introduction
Bliblidotcom - SASS IntroductionBliblidotcom - SASS Introduction
Bliblidotcom - SASS IntroductionIrfan Maulana
 
The World of Stylesheet Languages
The World of Stylesheet LanguagesThe World of Stylesheet Languages
The World of Stylesheet LanguagesAndrea Tino
 
Intro to Sass for WordPress Developers
Intro to Sass for WordPress DevelopersIntro to Sass for WordPress Developers
Intro to Sass for WordPress DevelopersSuzette Franck
 
Structuring your CSS for maintainability: rules and guile lines to write CSS
Structuring your CSS for maintainability: rules and guile lines to write CSSStructuring your CSS for maintainability: rules and guile lines to write CSS
Structuring your CSS for maintainability: rules and guile lines to write CSSSanjoy Kr. Paul
 
Why are we using Sass to create Grid Frameworks?
Why are we using Sass to create Grid Frameworks?Why are we using Sass to create Grid Frameworks?
Why are we using Sass to create Grid Frameworks?sharjeet
 
Sass:-Syntactically Awesome Stylesheet by Shafeeq
Sass:-Syntactically Awesome Stylesheet by ShafeeqSass:-Syntactically Awesome Stylesheet by Shafeeq
Sass:-Syntactically Awesome Stylesheet by ShafeeqDignitasDigital1
 
CSS pattern libraries
CSS pattern librariesCSS pattern libraries
CSS pattern librariesRuss Weakley
 
Dallas Drupal Days 2012 - Introduction to less sass-compass
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
 
The New UI - Staying Strong with Flexbox, SASS, and {{Mustache.js}}
The New UI - Staying Strong with Flexbox, SASS, and {{Mustache.js}}The New UI - Staying Strong with Flexbox, SASS, and {{Mustache.js}}
The New UI - Staying Strong with Flexbox, SASS, and {{Mustache.js}}Eric Carlisle
 
70 Expert Ideas For Better Css
70 Expert Ideas For Better Css70 Expert Ideas For Better Css
70 Expert Ideas For Better Cssfherz
 
Css masterclass book
Css masterclass bookCss masterclass book
Css masterclass bookPhoenix
 

Similaire à SASS & CSS Arquitecture (20)

ADUG - May 2014 - Theming in Drupal using Sass
ADUG - May 2014 - Theming in Drupal using SassADUG - May 2014 - Theming in Drupal using Sass
ADUG - May 2014 - Theming in Drupal using Sass
 
SPS Oslo - Stop your SharePoint CSS becoming a di-sass-ter today!
SPS Oslo - Stop your SharePoint CSS becoming a di-sass-ter today!SPS Oslo - Stop your SharePoint CSS becoming a di-sass-ter today!
SPS Oslo - Stop your SharePoint CSS becoming a di-sass-ter today!
 
Styling your projects! leveraging css and r sass in r projects
Styling your projects! leveraging css and r sass in r projectsStyling your projects! leveraging css and r sass in r projects
Styling your projects! leveraging css and r sass in r projects
 
CSS Workflow. Pre & Post
CSS Workflow. Pre & PostCSS Workflow. Pre & Post
CSS Workflow. Pre & Post
 
Roadmap 01
Roadmap 01Roadmap 01
Roadmap 01
 
SASS is more than LESS
SASS is more than LESSSASS is more than LESS
SASS is more than LESS
 
The sass way - Yatendra Bhardwaj
The sass way - Yatendra BhardwajThe sass way - Yatendra Bhardwaj
The sass way - Yatendra Bhardwaj
 
Stop your share point css become a di-sass-ter today - SPS Munich
Stop your share point css become a di-sass-ter today - SPS MunichStop your share point css become a di-sass-ter today - SPS Munich
Stop your share point css become a di-sass-ter today - SPS Munich
 
Bliblidotcom - SASS Introduction
Bliblidotcom - SASS IntroductionBliblidotcom - SASS Introduction
Bliblidotcom - SASS Introduction
 
The World of Stylesheet Languages
The World of Stylesheet LanguagesThe World of Stylesheet Languages
The World of Stylesheet Languages
 
Intro to Sass for WordPress Developers
Intro to Sass for WordPress DevelopersIntro to Sass for WordPress Developers
Intro to Sass for WordPress Developers
 
Structuring your CSS for maintainability: rules and guile lines to write CSS
Structuring your CSS for maintainability: rules and guile lines to write CSSStructuring your CSS for maintainability: rules and guile lines to write CSS
Structuring your CSS for maintainability: rules and guile lines to write CSS
 
Why are we using Sass to create Grid Frameworks?
Why are we using Sass to create Grid Frameworks?Why are we using Sass to create Grid Frameworks?
Why are we using Sass to create Grid Frameworks?
 
Sass:-Syntactically Awesome Stylesheet by Shafeeq
Sass:-Syntactically Awesome Stylesheet by ShafeeqSass:-Syntactically Awesome Stylesheet by Shafeeq
Sass:-Syntactically Awesome Stylesheet by Shafeeq
 
CSS pattern libraries
CSS pattern librariesCSS pattern libraries
CSS pattern libraries
 
Dallas Drupal Days 2012 - Introduction to less sass-compass
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
 
The New UI - Staying Strong with Flexbox, SASS, and {{Mustache.js}}
The New UI - Staying Strong with Flexbox, SASS, and {{Mustache.js}}The New UI - Staying Strong with Flexbox, SASS, and {{Mustache.js}}
The New UI - Staying Strong with Flexbox, SASS, and {{Mustache.js}}
 
70 Expert Ideas For Better Css
70 Expert Ideas For Better Css70 Expert Ideas For Better Css
70 Expert Ideas For Better Css
 
Understanding sass
Understanding sassUnderstanding sass
Understanding sass
 
Css masterclass book
Css masterclass bookCss masterclass book
Css masterclass book
 

Dernier

Bio Medical Waste Management Guideliness 2023 ppt.pptx
Bio Medical Waste Management Guideliness 2023 ppt.pptxBio Medical Waste Management Guideliness 2023 ppt.pptx
Bio Medical Waste Management Guideliness 2023 ppt.pptxnaveenithkrishnan
 
TYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDS
TYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDSTYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDS
TYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDSedrianrheine
 
WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024
WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024
WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024Jan Löffler
 
Computer 10 Lesson 8: Building a Website
Computer 10 Lesson 8: Building a WebsiteComputer 10 Lesson 8: Building a Website
Computer 10 Lesson 8: Building a WebsiteMavein
 
Benefits of doing Internet peering and running an Internet Exchange (IX) pres...
Benefits of doing Internet peering and running an Internet Exchange (IX) pres...Benefits of doing Internet peering and running an Internet Exchange (IX) pres...
Benefits of doing Internet peering and running an Internet Exchange (IX) pres...APNIC
 
Presentation2.pptx - JoyPress Wordpress
Presentation2.pptx -  JoyPress WordpressPresentation2.pptx -  JoyPress Wordpress
Presentation2.pptx - JoyPress Wordpressssuser166378
 
LESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdf
LESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdfLESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdf
LESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdfmchristianalwyn
 
LESSON 10/ GROUP 10/ ST. THOMAS AQUINASS
LESSON 10/ GROUP 10/ ST. THOMAS AQUINASSLESSON 10/ GROUP 10/ ST. THOMAS AQUINASS
LESSON 10/ GROUP 10/ ST. THOMAS AQUINASSlesteraporado16
 
Introduction to ICANN and Fellowship program by Shreedeep Rayamajhi.pdf
Introduction to ICANN and Fellowship program  by Shreedeep Rayamajhi.pdfIntroduction to ICANN and Fellowship program  by Shreedeep Rayamajhi.pdf
Introduction to ICANN and Fellowship program by Shreedeep Rayamajhi.pdfShreedeep Rayamajhi
 
Vision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced Horizons
Vision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced HorizonsVision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced Horizons
Vision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced HorizonsRoxana Stingu
 
Check out the Free Landing Page Hosting in 2024
Check out the Free Landing Page Hosting in 2024Check out the Free Landing Page Hosting in 2024
Check out the Free Landing Page Hosting in 2024Shubham Pant
 
Zero-day Vulnerabilities
Zero-day VulnerabilitiesZero-day Vulnerabilities
Zero-day Vulnerabilitiesalihassaah1994
 

Dernier (12)

Bio Medical Waste Management Guideliness 2023 ppt.pptx
Bio Medical Waste Management Guideliness 2023 ppt.pptxBio Medical Waste Management Guideliness 2023 ppt.pptx
Bio Medical Waste Management Guideliness 2023 ppt.pptx
 
TYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDS
TYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDSTYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDS
TYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDS
 
WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024
WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024
WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024
 
Computer 10 Lesson 8: Building a Website
Computer 10 Lesson 8: Building a WebsiteComputer 10 Lesson 8: Building a Website
Computer 10 Lesson 8: Building a Website
 
Benefits of doing Internet peering and running an Internet Exchange (IX) pres...
Benefits of doing Internet peering and running an Internet Exchange (IX) pres...Benefits of doing Internet peering and running an Internet Exchange (IX) pres...
Benefits of doing Internet peering and running an Internet Exchange (IX) pres...
 
Presentation2.pptx - JoyPress Wordpress
Presentation2.pptx -  JoyPress WordpressPresentation2.pptx -  JoyPress Wordpress
Presentation2.pptx - JoyPress Wordpress
 
LESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdf
LESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdfLESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdf
LESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdf
 
LESSON 10/ GROUP 10/ ST. THOMAS AQUINASS
LESSON 10/ GROUP 10/ ST. THOMAS AQUINASSLESSON 10/ GROUP 10/ ST. THOMAS AQUINASS
LESSON 10/ GROUP 10/ ST. THOMAS AQUINASS
 
Introduction to ICANN and Fellowship program by Shreedeep Rayamajhi.pdf
Introduction to ICANN and Fellowship program  by Shreedeep Rayamajhi.pdfIntroduction to ICANN and Fellowship program  by Shreedeep Rayamajhi.pdf
Introduction to ICANN and Fellowship program by Shreedeep Rayamajhi.pdf
 
Vision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced Horizons
Vision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced HorizonsVision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced Horizons
Vision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced Horizons
 
Check out the Free Landing Page Hosting in 2024
Check out the Free Landing Page Hosting in 2024Check out the Free Landing Page Hosting in 2024
Check out the Free Landing Page Hosting in 2024
 
Zero-day Vulnerabilities
Zero-day VulnerabilitiesZero-day Vulnerabilities
Zero-day Vulnerabilities
 

SASS & CSS Arquitecture