SlideShare a Scribd company logo
1 of 7
Why Are We Using Sass To Create
Grid Frameworks ?
TeamSplus H
People used to write CSS for their web
design in the past days.
This had various issues, specifically:
•To reduce bandwidth, CSS needs to be minified.
•Browser compatibility causes duplication.
TeamSplus H
First of all, What is SASS?
SASSis anewframeworkforthedesigners. Andeverydesignerwants
todesignedagridorcleanresponsivewebdesignwithSASS.
Sass :
• Syntactically AwesomeStylesheets.
• designed by Hampton Catlin and developed by Nathan Weizenbaum.
• an extension of CSS3.
• adding nested rules
• variables, mixinsand selector inheritance.
TeamSplus
SASS is translated to well-formatted CSS utilizing the command
line tool. It is utilized to depict the style of a document cleanly
and structurally with more powerthan flat CSS allows.
The transition from CSS to SASS is easy - you don’t have to change any
old files you already have in your system. Just rename your files from
.css to .scss include a compiler (Compass) from then on simply begin
using Sass’s capabilities whenever you require them. This is a true
smooth transition and most likely the reason why the .scss syntax beat
the old indented syntax. With Sass you can effectively manage a system
of plugins and shared library "code" between different parts of your site
and even between sites in a manner which plain css can never do.
TeamSplus
With Sass & Compass you can have better Cross browser support especially if
you’re planning on using all the new "CSS3" properties.
Also thegreater part of all, Sassgivesyou achanceto treat your stylesheetsaspart
of your codebase, with therespect they deserveand with thepower that you need.
So go begin using Sassand enjoy thepower!
•Sass has two syntaxes:
• Most commonly used syntax is known as SCSS (superset of CSS3).SCSS files use
the extension .scss.
• Second syntax is known as the .sass.
• SASS is a Cascading Style Sheets or CSS metalanguage.
• SASS is intended for people who prefer conciseness over similarity to CSS.
• It uses the space of lines to specify blocks instead of brackets and semicolons.
TeamSplus
Why do we use SASS Grid Frameworks?
SASS, the ideal fit for creating CSS frameworks
Frameworks like Blueprint, 960 Grid System, Grid Coordinates and
Susy have created ways for designers to skip the repetitive, everyday
and generally importantly the math.
With a CSS framework, front-end devs and designers can get a site laid
out generally quick with a minimal number of bugs, on highest point of
an intensely tested code base.
Chris Eppstein has also created Compass, essentially a collection of
awesome mixins that supplement SASS - meaning that you can dive
straight in to a new world where CSS is fun again.
Why do we use SASS Grid Frameworks?
SASS, the ideal fit for creating CSS frameworks
Frameworks like Blueprint, 960 Grid System, Grid Coordinates and
Susy have created ways for designers to skip the repetitive, everyday
and generally importantly the math.
With a CSS framework, front-end devs and designers can get a site laid
out generally quick with a minimal number of bugs, on highest point of
an intensely tested code base.
Chris Eppstein has also created Compass, essentially a collection of
awesome mixins that supplement SASS - meaning that you can dive
straight in to a new world where CSS is fun again.

More Related Content

What's hot

What's hot (6)

CSS Framework + Progressive Enhacements
CSS Framework + Progressive EnhacementsCSS Framework + Progressive Enhacements
CSS Framework + Progressive Enhacements
 
Cloud training
Cloud trainingCloud training
Cloud training
 
An Introduction to CSS Frameworks
An Introduction to CSS FrameworksAn Introduction to CSS Frameworks
An Introduction to CSS Frameworks
 
Why azure
Why azureWhy azure
Why azure
 
Css sprite
Css spriteCss sprite
Css sprite
 
Twitter Bootstrap Presentation
Twitter Bootstrap PresentationTwitter Bootstrap Presentation
Twitter Bootstrap Presentation
 

Viewers also liked

Viewers also liked (15)

U2 drive2
U2 drive2U2 drive2
U2 drive2
 
Sherlock!
Sherlock!Sherlock!
Sherlock!
 
Inolvidable antes de tiempo
Inolvidable antes de tiempoInolvidable antes de tiempo
Inolvidable antes de tiempo
 
Exposicion magdalena
Exposicion magdalenaExposicion magdalena
Exposicion magdalena
 
Tema 9
Tema 9Tema 9
Tema 9
 
Flowers
FlowersFlowers
Flowers
 
Brochure 55030067
Brochure   55030067Brochure   55030067
Brochure 55030067
 
ο ναός της αθηνάς ή «απτέρου νίκης
ο ναός της αθηνάς ή «απτέρου νίκηςο ναός της αθηνάς ή «απτέρου νίκης
ο ναός της αθηνάς ή «απτέρου νίκης
 
Mule esb made system integration easy
Mule esb made system integration easy Mule esb made system integration easy
Mule esb made system integration easy
 
Happy birthday albert
Happy birthday albertHappy birthday albert
Happy birthday albert
 
Trabajo de martín
Trabajo de martínTrabajo de martín
Trabajo de martín
 
interesting
interestinginteresting
interesting
 
Sahi bukhari urdu (jild 8)
Sahi bukhari urdu (jild 8)Sahi bukhari urdu (jild 8)
Sahi bukhari urdu (jild 8)
 
tugas 2
tugas 2tugas 2
tugas 2
 
สรุปกาเรียนรู้ Meditation พี่ปุ้ย
สรุปกาเรียนรู้ Meditation พี่ปุ้ยสรุปกาเรียนรู้ Meditation พี่ปุ้ย
สรุปกาเรียนรู้ Meditation พี่ปุ้ย
 

Similar to Why are we using Sass to create Grid Frameworks?

SCSS Implementation
SCSS ImplementationSCSS Implementation
SCSS ImplementationAmey Parab
 
Sass:-Syntactically Awesome Stylesheet by Shafeeq
Sass:-Syntactically Awesome Stylesheet by ShafeeqSass:-Syntactically Awesome Stylesheet by Shafeeq
Sass:-Syntactically Awesome Stylesheet by ShafeeqDignitasDigital1
 
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
 
Authoring Stylesheets with Compass & Sass
Authoring Stylesheets with Compass & SassAuthoring Stylesheets with Compass & Sass
Authoring Stylesheets with Compass & Sasschriseppstein
 
Bliblidotcom - SASS Introduction
Bliblidotcom - SASS IntroductionBliblidotcom - SASS Introduction
Bliblidotcom - SASS IntroductionIrfan Maulana
 
The sass way - Yatendra Bhardwaj
The sass way - Yatendra BhardwajThe sass way - Yatendra Bhardwaj
The sass way - Yatendra BhardwajYatendra Bhardwaj
 
Yahoo7 Tech Night - SASS
Yahoo7 Tech Night - SASSYahoo7 Tech Night - SASS
Yahoo7 Tech Night - SASSAndy Sharman
 
Intro to Sass for WordPress Developers
Intro to Sass for WordPress DevelopersIntro to Sass for WordPress Developers
Intro to Sass for WordPress DevelopersSuzette Franck
 
CSS Frameworks: Faster Layout, Consistent Results
CSS Frameworks: Faster Layout, Consistent ResultsCSS Frameworks: Faster Layout, Consistent Results
CSS Frameworks: Faster Layout, Consistent ResultsSteve Hong
 
European SharePoint Webinar - Make SharePoint Sassy
European SharePoint Webinar - Make SharePoint SassyEuropean SharePoint Webinar - Make SharePoint Sassy
European SharePoint Webinar - Make SharePoint SassyStefan Bauer
 
The World of Stylesheet Languages
The World of Stylesheet LanguagesThe World of Stylesheet Languages
The World of Stylesheet LanguagesAndrea Tino
 
Getting Sassy with CSS
Getting Sassy with CSSGetting Sassy with CSS
Getting Sassy with CSSJulie Cameron
 
Beautifying Sencha Touch
Beautifying Sencha TouchBeautifying Sencha Touch
Beautifying Sencha TouchNeha Upadhyay
 

Similar to Why are we using Sass to create Grid Frameworks? (20)

SCSS Implementation
SCSS ImplementationSCSS Implementation
SCSS Implementation
 
Sass:-Syntactically Awesome Stylesheet by Shafeeq
Sass:-Syntactically Awesome Stylesheet by ShafeeqSass:-Syntactically Awesome Stylesheet by Shafeeq
Sass:-Syntactically Awesome Stylesheet by Shafeeq
 
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!
 
Authoring Stylesheets with Compass & Sass
Authoring Stylesheets with Compass & SassAuthoring Stylesheets with Compass & Sass
Authoring Stylesheets with Compass & Sass
 
Make your CSS beautiful again
Make your CSS beautiful againMake your CSS beautiful again
Make your CSS beautiful again
 
Bliblidotcom - SASS Introduction
Bliblidotcom - SASS IntroductionBliblidotcom - SASS Introduction
Bliblidotcom - SASS Introduction
 
The sass way - Yatendra Bhardwaj
The sass way - Yatendra BhardwajThe sass way - Yatendra Bhardwaj
The sass way - Yatendra Bhardwaj
 
Yahoo7 Tech Night - SASS
Yahoo7 Tech Night - SASSYahoo7 Tech Night - SASS
Yahoo7 Tech Night - SASS
 
Roadmap 01
Roadmap 01Roadmap 01
Roadmap 01
 
Intro to Sass for WordPress Developers
Intro to Sass for WordPress DevelopersIntro to Sass for WordPress Developers
Intro to Sass for WordPress Developers
 
SASS - CSS with Superpower
SASS - CSS with SuperpowerSASS - CSS with Superpower
SASS - CSS with Superpower
 
Introduction to sass
Introduction to sassIntroduction to sass
Introduction to sass
 
CSS Frameworks: Faster Layout, Consistent Results
CSS Frameworks: Faster Layout, Consistent ResultsCSS Frameworks: Faster Layout, Consistent Results
CSS Frameworks: Faster Layout, Consistent Results
 
UNIT 3.ppt
UNIT 3.pptUNIT 3.ppt
UNIT 3.ppt
 
European SharePoint Webinar - Make SharePoint Sassy
European SharePoint Webinar - Make SharePoint SassyEuropean SharePoint Webinar - Make SharePoint Sassy
European SharePoint Webinar - Make SharePoint Sassy
 
The World of Stylesheet Languages
The World of Stylesheet LanguagesThe World of Stylesheet Languages
The World of Stylesheet Languages
 
Getting Sassy with CSS
Getting Sassy with CSSGetting Sassy with CSS
Getting Sassy with CSS
 
Beautifying senc
Beautifying sencBeautifying senc
Beautifying senc
 
Css Systems
Css SystemsCss Systems
Css Systems
 
Beautifying Sencha Touch
Beautifying Sencha TouchBeautifying Sencha Touch
Beautifying Sencha Touch
 

Recently uploaded

AI+A11Y 11MAY2024 HYDERBAD GAAD 2024 - HelloA11Y (11 May 2024)
AI+A11Y 11MAY2024 HYDERBAD GAAD 2024 - HelloA11Y (11 May 2024)AI+A11Y 11MAY2024 HYDERBAD GAAD 2024 - HelloA11Y (11 May 2024)
AI+A11Y 11MAY2024 HYDERBAD GAAD 2024 - HelloA11Y (11 May 2024)Samir Dash
 
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot TakeoffStrategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoffsammart93
 
MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MIND CTI
 
[BuildWithAI] Introduction to Gemini.pdf
[BuildWithAI] Introduction to Gemini.pdf[BuildWithAI] Introduction to Gemini.pdf
[BuildWithAI] Introduction to Gemini.pdfSandro Moreira
 
Quantum Leap in Next-Generation Computing
Quantum Leap in Next-Generation ComputingQuantum Leap in Next-Generation Computing
Quantum Leap in Next-Generation ComputingWSO2
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerThousandEyes
 
Introduction to use of FHIR Documents in ABDM
Introduction to use of FHIR Documents in ABDMIntroduction to use of FHIR Documents in ABDM
Introduction to use of FHIR Documents in ABDMKumar Satyam
 
API Governance and Monetization - The evolution of API governance
API Governance and Monetization -  The evolution of API governanceAPI Governance and Monetization -  The evolution of API governance
API Governance and Monetization - The evolution of API governanceWSO2
 
Exploring Multimodal Embeddings with Milvus
Exploring Multimodal Embeddings with MilvusExploring Multimodal Embeddings with Milvus
Exploring Multimodal Embeddings with MilvusZilliz
 
Introduction to Multilingual Retrieval Augmented Generation (RAG)
Introduction to Multilingual Retrieval Augmented Generation (RAG)Introduction to Multilingual Retrieval Augmented Generation (RAG)
Introduction to Multilingual Retrieval Augmented Generation (RAG)Zilliz
 
AWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of TerraformAWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of TerraformAndrey Devyatkin
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FMESafe Software
 
Platformless Horizons for Digital Adaptability
Platformless Horizons for Digital AdaptabilityPlatformless Horizons for Digital Adaptability
Platformless Horizons for Digital AdaptabilityWSO2
 
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...Orbitshub
 
DBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor PresentationDBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor PresentationDropbox
 
Vector Search -An Introduction in Oracle Database 23ai.pptx
Vector Search -An Introduction in Oracle Database 23ai.pptxVector Search -An Introduction in Oracle Database 23ai.pptx
Vector Search -An Introduction in Oracle Database 23ai.pptxRemote DBA Services
 
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdfRising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdfOrbitshub
 
Stronger Together: Developing an Organizational Strategy for Accessible Desig...
Stronger Together: Developing an Organizational Strategy for Accessible Desig...Stronger Together: Developing an Organizational Strategy for Accessible Desig...
Stronger Together: Developing an Organizational Strategy for Accessible Desig...caitlingebhard1
 

Recently uploaded (20)

AI+A11Y 11MAY2024 HYDERBAD GAAD 2024 - HelloA11Y (11 May 2024)
AI+A11Y 11MAY2024 HYDERBAD GAAD 2024 - HelloA11Y (11 May 2024)AI+A11Y 11MAY2024 HYDERBAD GAAD 2024 - HelloA11Y (11 May 2024)
AI+A11Y 11MAY2024 HYDERBAD GAAD 2024 - HelloA11Y (11 May 2024)
 
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot TakeoffStrategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
 
MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024
 
[BuildWithAI] Introduction to Gemini.pdf
[BuildWithAI] Introduction to Gemini.pdf[BuildWithAI] Introduction to Gemini.pdf
[BuildWithAI] Introduction to Gemini.pdf
 
Quantum Leap in Next-Generation Computing
Quantum Leap in Next-Generation ComputingQuantum Leap in Next-Generation Computing
Quantum Leap in Next-Generation Computing
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
Introduction to use of FHIR Documents in ABDM
Introduction to use of FHIR Documents in ABDMIntroduction to use of FHIR Documents in ABDM
Introduction to use of FHIR Documents in ABDM
 
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
 
API Governance and Monetization - The evolution of API governance
API Governance and Monetization -  The evolution of API governanceAPI Governance and Monetization -  The evolution of API governance
API Governance and Monetization - The evolution of API governance
 
Exploring Multimodal Embeddings with Milvus
Exploring Multimodal Embeddings with MilvusExploring Multimodal Embeddings with Milvus
Exploring Multimodal Embeddings with Milvus
 
Introduction to Multilingual Retrieval Augmented Generation (RAG)
Introduction to Multilingual Retrieval Augmented Generation (RAG)Introduction to Multilingual Retrieval Augmented Generation (RAG)
Introduction to Multilingual Retrieval Augmented Generation (RAG)
 
Understanding the FAA Part 107 License ..
Understanding the FAA Part 107 License ..Understanding the FAA Part 107 License ..
Understanding the FAA Part 107 License ..
 
AWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of TerraformAWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of Terraform
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
 
Platformless Horizons for Digital Adaptability
Platformless Horizons for Digital AdaptabilityPlatformless Horizons for Digital Adaptability
Platformless Horizons for Digital Adaptability
 
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
 
DBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor PresentationDBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor Presentation
 
Vector Search -An Introduction in Oracle Database 23ai.pptx
Vector Search -An Introduction in Oracle Database 23ai.pptxVector Search -An Introduction in Oracle Database 23ai.pptx
Vector Search -An Introduction in Oracle Database 23ai.pptx
 
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdfRising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
 
Stronger Together: Developing an Organizational Strategy for Accessible Desig...
Stronger Together: Developing an Organizational Strategy for Accessible Desig...Stronger Together: Developing an Organizational Strategy for Accessible Desig...
Stronger Together: Developing an Organizational Strategy for Accessible Desig...
 

Why are we using Sass to create Grid Frameworks?

  • 1. Why Are We Using Sass To Create Grid Frameworks ? TeamSplus H
  • 2. People used to write CSS for their web design in the past days. This had various issues, specifically: •To reduce bandwidth, CSS needs to be minified. •Browser compatibility causes duplication. TeamSplus H
  • 3. First of all, What is SASS? SASSis anewframeworkforthedesigners. Andeverydesignerwants todesignedagridorcleanresponsivewebdesignwithSASS. Sass : • Syntactically AwesomeStylesheets. • designed by Hampton Catlin and developed by Nathan Weizenbaum. • an extension of CSS3. • adding nested rules • variables, mixinsand selector inheritance. TeamSplus
  • 4. SASS is translated to well-formatted CSS utilizing the command line tool. It is utilized to depict the style of a document cleanly and structurally with more powerthan flat CSS allows. The transition from CSS to SASS is easy - you don’t have to change any old files you already have in your system. Just rename your files from .css to .scss include a compiler (Compass) from then on simply begin using Sass’s capabilities whenever you require them. This is a true smooth transition and most likely the reason why the .scss syntax beat the old indented syntax. With Sass you can effectively manage a system of plugins and shared library "code" between different parts of your site and even between sites in a manner which plain css can never do. TeamSplus
  • 5. With Sass & Compass you can have better Cross browser support especially if you’re planning on using all the new "CSS3" properties. Also thegreater part of all, Sassgivesyou achanceto treat your stylesheetsaspart of your codebase, with therespect they deserveand with thepower that you need. So go begin using Sassand enjoy thepower! •Sass has two syntaxes: • Most commonly used syntax is known as SCSS (superset of CSS3).SCSS files use the extension .scss. • Second syntax is known as the .sass. • SASS is a Cascading Style Sheets or CSS metalanguage. • SASS is intended for people who prefer conciseness over similarity to CSS. • It uses the space of lines to specify blocks instead of brackets and semicolons. TeamSplus
  • 6. Why do we use SASS Grid Frameworks? SASS, the ideal fit for creating CSS frameworks Frameworks like Blueprint, 960 Grid System, Grid Coordinates and Susy have created ways for designers to skip the repetitive, everyday and generally importantly the math. With a CSS framework, front-end devs and designers can get a site laid out generally quick with a minimal number of bugs, on highest point of an intensely tested code base. Chris Eppstein has also created Compass, essentially a collection of awesome mixins that supplement SASS - meaning that you can dive straight in to a new world where CSS is fun again.
  • 7. Why do we use SASS Grid Frameworks? SASS, the ideal fit for creating CSS frameworks Frameworks like Blueprint, 960 Grid System, Grid Coordinates and Susy have created ways for designers to skip the repetitive, everyday and generally importantly the math. With a CSS framework, front-end devs and designers can get a site laid out generally quick with a minimal number of bugs, on highest point of an intensely tested code base. Chris Eppstein has also created Compass, essentially a collection of awesome mixins that supplement SASS - meaning that you can dive straight in to a new world where CSS is fun again.