SlideShare a Scribd company logo

專業前端 都如何管理 CSS

Chih-cheng Wang, profile picture
Chih-cheng Wang

1. The document describes the file structure and organization for a Sass-based CSS framework. 2. It outlines folders for base styles, components, helpers, layouts, pages, themes, and third-party vendors. 3. Individual files are created for specific elements or sections (e.g. buttons, navigation, header) and include comments explaining their purpose.

Education
1 of 45
Downloaded 93 times
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
專業前端 都如何管理 CSS


專業前端 都如何管理 CSS


專業前端 都如何管理 CSS
專業前端 都如何管理 CSS
專業前端 都如何管理 CSS
專業前端 都如何管理 CSS

 http://www.slideshare.net/stubbornella/object-oriented-css/26-Build_HTML_from_the_component_library
.btn { display: inline-block; padding: .375rem 1rem; font-size: 1rem; font-weight: 400; line-height: 1.5; text-align: center; white-space: nowrap; vertical-align: middle; cursor: pointer; user-select: none; border: 1px solid transparent; border-radius: .25rem; } .btn-primary { color: #fff; background-color: #0275d8; border-color: #0275d8; }
1. 2. 3. ) 4. 5.
專業前端 都如何管理 CSS
專業前端 都如何管理 CSS
專業前端 都如何管理 CSS


專業前端 都如何管理 CSS
專業前端 都如何管理 CSS
card + list-group + heading card + grid + button
.card { … } .card .btn { … } X


.text-primary { color: blue; } .text-accent { color: red; } .text-blue{ color: blue; } .text-red { color: red; } > 1. ....
.menu { // 4 } .article { // 8 }
.side { // 4 } .content { // 8 }
.side { // 4 } .content { // 8 } .ad { // 4 }
.col-4 { // 4 } .col-8 { // 8 }
專業前端 都如何管理 CSS
專業前端 都如何管理 CSS
專業前端 都如何管理 CSS

 
 

專業前端 都如何管理 CSS
專業前端 都如何管理 CSS
1. 2. sass Framework 3. Framwork 4. @mixin 5. 6. uitilities CSS 

1. 2. 3. mixin 4. ...




專業前端 都如何管理 CSS
sass/ | |– base/ | |– _reset.scss # Reset/normalize | |– _typography.scss # Typography rules | ... # Etc… | |– components/ | |– _buttons.scss # Buttons | |– _carousel.scss # Carousel | |– _cover.scss # Cover | |– _dropdown.scss # Dropdown | |– _navigation.scss # Navigation | ... # Etc… | |– helpers/ | |– _variables.scss # Sass Variables | |– _functions.scss # Sass Functions | |– _mixins.scss # Sass Mixins | |– _helpers.scss # Class & placeholders helpers | ... # Etc… | |– layout/ | |– _grid.scss # Grid system | |– _header.scss # Header | |– _footer.scss # Footer | |– _sidebar.scss # Sidebar | |– _forms.scss # Forms | ... # Etc… | |– pages/ | |– _home.scss # Home specific styles | |– _contact.scss # Contact specific styles | ... # Etc… | |– themes/ | |– _theme.scss # Default theme | |– _admin.scss # Admin theme | ... # Etc… | |– vendors/ | |– _bootstrap.scss # Bootstrap | |– _jquery-ui.scss # jQuery UI | ... # Etc… 
 

sass/ | |– base/ | |– _reset.scss # Reset/normalize | |– _typography.scss # Typography rules | ... # Etc… | |– components/ | |– _buttons.scss # Buttons | |– _carousel.scss # Carousel | |– _cover.scss # Cover | |– _dropdown.scss # Dropdown | |– _navigation.scss # Navigation | ... # Etc… | |– helpers/ | |– _variables.scss # Sass Variables | |– _functions.scss # Sass Functions | |– _mixins.scss # Sass Mixins | |– _helpers.scss # Class & placeholders helpers | ... # Etc… | |– layout/ | |– _grid.scss # Grid system | |– _header.scss # Header | |– _footer.scss # Footer | |– _sidebar.scss # Sidebar | |– _forms.scss # Forms | ... # Etc… | |– pages/ | |– _home.scss # Home specific styles | |– _contact.scss # Contact specific styles | ... # Etc… | |– themes/ | |– _theme.scss # Default theme | |– _admin.scss # Admin theme | ... # Etc… | |– vendors/ | |– _bootstrap.scss # Bootstrap | |– _jquery-ui.scss # jQuery UI | ... # Etc… 
 
 
 
 

sass/ | |– base/ | |– _reset.scss # Reset/normalize | |– _typography.scss # Typography rules | ... # Etc… | |– components/ | |– _buttons.scss # Buttons | |– _carousel.scss # Carousel | |– _cover.scss # Cover | |– _dropdown.scss # Dropdown | |– _navigation.scss # Navigation | ... # Etc… | |– helpers/ | |– _variables.scss # Sass Variables | |– _functions.scss # Sass Functions | |– _mixins.scss # Sass Mixins | |– _helpers.scss # Class & placeholders helpers | ... # Etc… | |– layout/ | |– _grid.scss # Grid system | |– _header.scss # Header | |– _footer.scss # Footer | |– _sidebar.scss # Sidebar | |– _forms.scss # Forms | ... # Etc… | |– pages/ | |– _home.scss # Home specific styles | |– _contact.scss # Contact specific styles | ... # Etc… | |– themes/ | |– _theme.scss # Default theme | |– _admin.scss # Admin theme | ... # Etc… | |– vendors/ | |– _bootstrap.scss # Bootstrap | |– _jquery-ui.scss # jQuery UI | ... # Etc…
sass/ | |– base/ | |– _reset.scss # Reset/normalize | |– _typography.scss # Typography rules | ... # Etc… | |– components/ | |– _buttons.scss # Buttons | |– _carousel.scss # Carousel | |– _cover.scss # Cover | |– _dropdown.scss # Dropdown | |– _navigation.scss # Navigation | ... # Etc… | |– helpers/ | |– _variables.scss # Sass Variables | |– _functions.scss # Sass Functions | |– _mixins.scss # Sass Mixins | |– _helpers.scss # Class & placeholders helpers | ... # Etc… | |– layout/ | |– _grid.scss # Grid system | |– _header.scss # Header | |– _footer.scss # Footer | |– _sidebar.scss # Sidebar | |– _forms.scss # Forms | ... # Etc… | |– pages/ | |– _home.scss # Home specific styles | |– _contact.scss # Contact specific styles | ... # Etc… | |– themes/ | |– _theme.scss # Default theme | |– _admin.scss # Admin theme | ... # Etc… | |– vendors/ | |– _bootstrap.scss # Bootstrap | |– _jquery-ui.scss # jQuery UI | ... # Etc…
sass/ | |– base/ | |– _reset.scss # Reset/normalize | |– _typography.scss # Typography rules | ... # Etc… | |– components/ | |– _buttons.scss # Buttons | |– _carousel.scss # Carousel | |– _cover.scss # Cover | |– _dropdown.scss # Dropdown | |– _navigation.scss # Navigation | ... # Etc… | |– helpers/ | |– _variables.scss # Sass Variables | |– _functions.scss # Sass Functions | |– _mixins.scss # Sass Mixins | |– _helpers.scss # Class & placeholders helpers | ... # Etc… | |– layout/ | |– _grid.scss # Grid system | |– _header.scss # Header | |– _footer.scss # Footer | |– _sidebar.scss # Sidebar | |– _forms.scss # Forms | ... # Etc… | |– pages/ | |– _home.scss # Home specific styles | |– _contact.scss # Contact specific styles | ... # Etc… | |– themes/ | |– _theme.scss # Default theme | |– _admin.scss # Admin theme | ... # Etc… | |– vendors/ | |– _bootstrap.scss # Bootstrap | |– _jquery-ui.scss # jQuery UI | ... # Etc…
sass/ | |– base/ | |– _reset.scss # Reset/normalize | |– _typography.scss # Typography rules | ... # Etc… | |– components/ | |– _buttons.scss # Buttons | |– _carousel.scss # Carousel | |– _cover.scss # Cover | |– _dropdown.scss # Dropdown | |– _navigation.scss # Navigation | ... # Etc… | |– helpers/ | |– _variables.scss # Sass Variables | |– _functions.scss # Sass Functions | |– _mixins.scss # Sass Mixins | |– _helpers.scss # Class & placeholders helpers | ... # Etc… | |– layout/ | |– _grid.scss # Grid system | |– _header.scss # Header | |– _footer.scss # Footer | |– _sidebar.scss # Sidebar | |– _forms.scss # Forms | ... # Etc… | |– pages/ | |– _home.scss # Home specific styles | |– _contact.scss # Contact specific styles | ... # Etc… | |– themes/ | |– _theme.scss # Default theme | |– _admin.scss # Admin theme | ... # Etc… | |– vendors/ | |– _bootstrap.scss # Bootstrap | |– _jquery-ui.scss # jQuery UI | ... # Etc…
sass/ | |– base/ | |– _reset.scss # Reset/normalize | |– _typography.scss # Typography rules | ... # Etc… | |– components/ | |– _buttons.scss # Buttons | |– _carousel.scss # Carousel | |– _cover.scss # Cover | |– _dropdown.scss # Dropdown | |– _navigation.scss # Navigation | ... # Etc… | |– helpers/ | |– _variables.scss # Sass Variables | |– _functions.scss # Sass Functions | |– _mixins.scss # Sass Mixins | |– _helpers.scss # Class & placeholders helpers | ... # Etc… | |– layout/ | |– _grid.scss # Grid system | |– _header.scss # Header | |– _footer.scss # Footer | |– _sidebar.scss # Sidebar | |– _forms.scss # Forms | ... # Etc… | |– pages/ | |– _home.scss # Home specific styles | |– _contact.scss # Contact specific styles | ... # Etc… | |– themes/ | |– _theme.scss # Default theme | |– _admin.scss # Admin theme | ... # Etc… | |– vendors/ | |– _bootstrap.scss # Bootstrap | |– _jquery-ui.scss # jQuery UI | ... # Etc…
sass/ | |– all.scss | |– base/ | |– components/ | |– helpers/ | |– layout/ | |– pages/ | |– themes/ | |– vendors/ 
 Bootstrap _variable _utilities _header _index _admin _jqueryUi
專業前端 都如何管理 CSS

More Related Content

TXT
Yeni metin belgesi (2)
makarnalar
 
PDF
響應式網頁實作坊
Chih-cheng Wang
 
PDF
Sass 基礎教學 - 高雄前端社群(CSS 讀書會)
Chih-cheng Wang
 
PDF
[Modern Web] CSS3 Grid Layout
Chih-cheng Wang
 
PDF
Bootstrap4 與他的好搭檔
Chih-cheng Wang
 
PDF
Bootstrap 4 超詳盡解析
Chih-cheng Wang
 
PDF
ZURB Foundation 5: Clean + Organized
James Stone
 
PDF
Workshop 6: Designer tools
Visual Engineering
 
Yeni metin belgesi (2)
makarnalar
 
響應式網頁實作坊
Chih-cheng Wang
 
Sass 基礎教學 - 高雄前端社群(CSS 讀書會)
Chih-cheng Wang
 
[Modern Web] CSS3 Grid Layout
Chih-cheng Wang
 
Bootstrap4 與他的好搭檔
Chih-cheng Wang
 
Bootstrap 4 超詳盡解析
Chih-cheng Wang
 
ZURB Foundation 5: Clean + Organized
James Stone
 
Workshop 6: Designer tools
Visual Engineering
 

Similar to 專業前端 都如何管理 CSS (20)

PDF
CSS Workflow. Pre & Post
Anton Dosov
 
PDF
Getting Started with Sass & Compass
Rob Davarnia
 
PDF
SASS, Compass, Gulp, Greensock
Marco Pinheiro
 
PDF
Fasten RWD Development with Sass
Sven Wolfermann
 
PPTX
Syntactically awesome stylesheets (Sass)
Tahmina Khatoon
 
PDF
Sass that CSS
Trish Ang
 
PDF
Atlanta Drupal User's Group - April 2015 - Sasstronauts: Advanced Sass Topics
Eric Sembrat
 
PDF
Compass, Sass, and the Enlightened CSS Developer
Wynn Netherland
 
PPTX
SASS Lecture
Adnan Arshad
 
PDF
Assembling Sass
Hossain Mohammad Samrat
 
PDF
Exam 70 480 CSS3 at Jinal Desai .NET
jinaldesailive
 
PDF
CSS Extenders
Idan Gazit
 
PDF
Css preprocessor-140606115334-phpapp01
Anam Hossain
 
PDF
CSS preprocessor: why and how
mirahman
 
PPTX
SASS is more than LESS
Itai Koren
 
PDF
A better CSS: Sass and Less - CC FE & UX
JWORKS powered by Ordina
 
PPTX
Joes sass presentation
JoeSeckelman
 
PPTX
Archetype
eonei002
 
KEY
Intro to SASS CSS
Kianosh Pourian
 
PPTX
Modularization css with sass
Huiyi Yan
 
CSS Workflow. Pre & Post
Anton Dosov
 
Getting Started with Sass & Compass
Rob Davarnia
 
SASS, Compass, Gulp, Greensock
Marco Pinheiro
 
Fasten RWD Development with Sass
Sven Wolfermann
 
Syntactically awesome stylesheets (Sass)
Tahmina Khatoon
 
Sass that CSS
Trish Ang
 
Atlanta Drupal User's Group - April 2015 - Sasstronauts: Advanced Sass Topics
Eric Sembrat
 
Compass, Sass, and the Enlightened CSS Developer
Wynn Netherland
 
SASS Lecture
Adnan Arshad
 
Assembling Sass
Hossain Mohammad Samrat
 
Exam 70 480 CSS3 at Jinal Desai .NET
jinaldesailive
 
CSS Extenders
Idan Gazit
 
Css preprocessor-140606115334-phpapp01
Anam Hossain
 
CSS preprocessor: why and how
mirahman
 
SASS is more than LESS
Itai Koren
 
A better CSS: Sass and Less - CC FE & UX
JWORKS powered by Ordina
 
Joes sass presentation
JoeSeckelman
 
Archetype
eonei002
 
Intro to SASS CSS
Kianosh Pourian
 
Modularization css with sass
Huiyi Yan
 
Ad

More from Chih-cheng Wang (7)

PDF
六角學院 - 從社群到公司
Chih-cheng Wang
 
PDF
網址管理與 DNS 託管全攻略
Chih-cheng Wang
 
PDF
高雄前端社群 Web 開發讀書會 - 網頁設計規劃
Chih-cheng Wang
 
PDF
建立 Sass 環境，透過 Node sass
Chih-cheng Wang
 
PDF
CSS 讀書會 - 1 (Grid system)
Chih-cheng Wang
 
PDF
Slack 基本功能介紹
Chih-cheng Wang
 
PDF
Google design
Chih-cheng Wang
 
六角學院 - 從社群到公司
Chih-cheng Wang
 
網址管理與 DNS 託管全攻略
Chih-cheng Wang
 
高雄前端社群 Web 開發讀書會 - 網頁設計規劃
Chih-cheng Wang
 
建立 Sass 環境，透過 Node sass
Chih-cheng Wang
 
CSS 讀書會 - 1 (Grid system)
Chih-cheng Wang
 
Slack 基本功能介紹
Chih-cheng Wang
 
Google design
Chih-cheng Wang
 
Ad

Recently uploaded (20)

PDF
Physiotherapy_for_Respiratory_and_Cardiac_Problems WEBBER.pdf
DrMONISHAphysio
 
PDF
The Lost Whites of Pakistan by Jahanzaib Mughal.pdf
jahanzaibmughal6
 
PPTX
Cell Types and Its function , kingdom of life
ClaireMangundayao1
 
PPTX
PPT- ENG7_QUARTER1_LESSON1_WEEK1. IMAGERY -DESCRIPTIONS pptx.pptx
KMDee
 
PDF
Microbial disease of the cardiovascular and lymphatic systems
KeyaSharma
 
PDF
FourierSeries-QuestionsWithAnswers(Part-A).pdf
Raji Murugan
 
PPTX
human mycosis Human fungal infections are called human mycosis..pptx
shilpa939953
 
PDF
Classroom Observation Tools for Teachers
Nicaramirez
 
PPTX
Renaissance Architecture: A Journey from Faith to Humanism
DrMonicaSharma
 
PDF
102 student loan defaulters named and shamed – Is someone you know on the list?
Kweku Zurek
 
PDF
Complications of Minimal Access Surgery at WLH
mohitsuren827
 
PDF
Insiders guide to clinical Medicine.pdf
AbhishekPatil315128
 
PDF
2.FourierTransform-ShortQuestionswithAnswers.pdf
Raji Murugan
 
PDF
TR - Agricultural Crops Production NC III.pdf
avgilmegino3
 
PDF
3rd Neelam Sanjeevareddy Memorial Lecture.pdf
Academy of Grassroots Studies and Research of India (AGRASRI)
 
PDF
Anesthesia in Laparoscopic Surgery in India
mohitsuren827
 
PDF
O5-L3 Freight Transport Ops (International) V1.pdf
labyankof
 
PDF
Supply Chain Operations Speaking Notes -ICLT Program
labyankof
 
PPTX
Pharma ospi slides which help in ospi learning
rameetkumar304
 
PDF
Chapter 2 Heredity, Prenatal Development, and Birth.pdf
MarjorieLopezTiu
 
Physiotherapy_for_Respiratory_and_Cardiac_Problems WEBBER.pdf
DrMONISHAphysio
 
The Lost Whites of Pakistan by Jahanzaib Mughal.pdf
jahanzaibmughal6
 
Cell Types and Its function , kingdom of life
ClaireMangundayao1
 
PPT- ENG7_QUARTER1_LESSON1_WEEK1. IMAGERY -DESCRIPTIONS pptx.pptx
KMDee
 
Microbial disease of the cardiovascular and lymphatic systems
KeyaSharma
 
FourierSeries-QuestionsWithAnswers(Part-A).pdf
Raji Murugan
 
human mycosis Human fungal infections are called human mycosis..pptx
shilpa939953
 
Classroom Observation Tools for Teachers
Nicaramirez
 
Renaissance Architecture: A Journey from Faith to Humanism
DrMonicaSharma
 
102 student loan defaulters named and shamed – Is someone you know on the list?
Kweku Zurek
 
Complications of Minimal Access Surgery at WLH
mohitsuren827
 
Insiders guide to clinical Medicine.pdf
AbhishekPatil315128
 
2.FourierTransform-ShortQuestionswithAnswers.pdf
Raji Murugan
 
TR - Agricultural Crops Production NC III.pdf
avgilmegino3
 
3rd Neelam Sanjeevareddy Memorial Lecture.pdf
Academy of Grassroots Studies and Research of India (AGRASRI)
 
Anesthesia in Laparoscopic Surgery in India
mohitsuren827
 
O5-L3 Freight Transport Ops (International) V1.pdf
labyankof
 
Supply Chain Operations Speaking Notes -ICLT Program
labyankof
 
Pharma ospi slides which help in ospi learning
rameetkumar304
 
Chapter 2 Heredity, Prenatal Development, and Birth.pdf
MarjorieLopezTiu
 

專業前端 都如何管理 CSS