專業前端 都如何管理 CSS
-
Upload
chih-cheng-wang -
Category
Education
-
view
828 -
download
0
Transcript of 專業前端 都如何管理 CSS
![Page 1: 專業前端 都如何管理 CSS](https://reader030.fdocuments.net/reader030/viewer/2022021416/5871ab301a28abda6a8b57fd/html5/thumbnails/1.jpg)
![Page 2: 專業前端 都如何管理 CSS](https://reader030.fdocuments.net/reader030/viewer/2022021416/5871ab301a28abda6a8b57fd/html5/thumbnails/2.jpg)
![Page 3: 專業前端 都如何管理 CSS](https://reader030.fdocuments.net/reader030/viewer/2022021416/5871ab301a28abda6a8b57fd/html5/thumbnails/3.jpg)
![Page 5: 專業前端 都如何管理 CSS](https://reader030.fdocuments.net/reader030/viewer/2022021416/5871ab301a28abda6a8b57fd/html5/thumbnails/5.jpg)
![Page 6: 專業前端 都如何管理 CSS](https://reader030.fdocuments.net/reader030/viewer/2022021416/5871ab301a28abda6a8b57fd/html5/thumbnails/6.jpg)
![Page 7: 專業前端 都如何管理 CSS](https://reader030.fdocuments.net/reader030/viewer/2022021416/5871ab301a28abda6a8b57fd/html5/thumbnails/7.jpg)
![Page 8: 專業前端 都如何管理 CSS](https://reader030.fdocuments.net/reader030/viewer/2022021416/5871ab301a28abda6a8b57fd/html5/thumbnails/8.jpg)
![Page 9: 專業前端 都如何管理 CSS](https://reader030.fdocuments.net/reader030/viewer/2022021416/5871ab301a28abda6a8b57fd/html5/thumbnails/9.jpg)
http://www.slideshare.net/stubbornella/object-oriented-css/26-Build_HTML_from_the_component_library
![Page 10: 專業前端 都如何管理 CSS](https://reader030.fdocuments.net/reader030/viewer/2022021416/5871ab301a28abda6a8b57fd/html5/thumbnails/10.jpg)
.btn{display:inline-block;padding:.375rem1rem;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:1pxsolidtransparent;border-radius:.25rem;}
.btn-primary{color:#fff;background-color:#0275d8;border-color:#0275d8;}
![Page 12: 專業前端 都如何管理 CSS](https://reader030.fdocuments.net/reader030/viewer/2022021416/5871ab301a28abda6a8b57fd/html5/thumbnails/12.jpg)
![Page 13: 專業前端 都如何管理 CSS](https://reader030.fdocuments.net/reader030/viewer/2022021416/5871ab301a28abda6a8b57fd/html5/thumbnails/13.jpg)
![Page 15: 專業前端 都如何管理 CSS](https://reader030.fdocuments.net/reader030/viewer/2022021416/5871ab301a28abda6a8b57fd/html5/thumbnails/15.jpg)
![Page 17: 專業前端 都如何管理 CSS](https://reader030.fdocuments.net/reader030/viewer/2022021416/5871ab301a28abda6a8b57fd/html5/thumbnails/17.jpg)
![Page 18: 專業前端 都如何管理 CSS](https://reader030.fdocuments.net/reader030/viewer/2022021416/5871ab301a28abda6a8b57fd/html5/thumbnails/18.jpg)
card + list-group + heading
card + grid + button
![Page 19: 專業前端 都如何管理 CSS](https://reader030.fdocuments.net/reader030/viewer/2022021416/5871ab301a28abda6a8b57fd/html5/thumbnails/19.jpg)
.card{…}
.card.btn{…}
X
![Page 20: 專業前端 都如何管理 CSS](https://reader030.fdocuments.net/reader030/viewer/2022021416/5871ab301a28abda6a8b57fd/html5/thumbnails/20.jpg)
![Page 21: 專業前端 都如何管理 CSS](https://reader030.fdocuments.net/reader030/viewer/2022021416/5871ab301a28abda6a8b57fd/html5/thumbnails/21.jpg)
.text-primary{color:blue;}
.text-accent{color:red;}
.text-blue{color:blue;}
.text-red{color:red;}
>
1. ....
![Page 22: 專業前端 都如何管理 CSS](https://reader030.fdocuments.net/reader030/viewer/2022021416/5871ab301a28abda6a8b57fd/html5/thumbnails/22.jpg)
.menu{//4 }.article{//8 }
![Page 23: 專業前端 都如何管理 CSS](https://reader030.fdocuments.net/reader030/viewer/2022021416/5871ab301a28abda6a8b57fd/html5/thumbnails/23.jpg)
.side{//4 }.content{//8 }
![Page 24: 專業前端 都如何管理 CSS](https://reader030.fdocuments.net/reader030/viewer/2022021416/5871ab301a28abda6a8b57fd/html5/thumbnails/24.jpg)
.side{//4 }.content{//8 }.ad{//4 }
![Page 25: 專業前端 都如何管理 CSS](https://reader030.fdocuments.net/reader030/viewer/2022021416/5871ab301a28abda6a8b57fd/html5/thumbnails/25.jpg)
.col-4{//4 }
.col-8{//8 }
![Page 27: 專業前端 都如何管理 CSS](https://reader030.fdocuments.net/reader030/viewer/2022021416/5871ab301a28abda6a8b57fd/html5/thumbnails/27.jpg)
![Page 28: 專業前端 都如何管理 CSS](https://reader030.fdocuments.net/reader030/viewer/2022021416/5871ab301a28abda6a8b57fd/html5/thumbnails/28.jpg)
![Page 30: 專業前端 都如何管理 CSS](https://reader030.fdocuments.net/reader030/viewer/2022021416/5871ab301a28abda6a8b57fd/html5/thumbnails/30.jpg)
![Page 31: 專業前端 都如何管理 CSS](https://reader030.fdocuments.net/reader030/viewer/2022021416/5871ab301a28abda6a8b57fd/html5/thumbnails/31.jpg)
![Page 32: 專業前端 都如何管理 CSS](https://reader030.fdocuments.net/reader030/viewer/2022021416/5871ab301a28abda6a8b57fd/html5/thumbnails/32.jpg)
1. 2. sass Framework 3. Framwork 4. @mixin 5.
6. uitilities
CSS
![Page 34: 專業前端 都如何管理 CSS](https://reader030.fdocuments.net/reader030/viewer/2022021416/5871ab301a28abda6a8b57fd/html5/thumbnails/34.jpg)
![Page 35: 專業前端 都如何管理 CSS](https://reader030.fdocuments.net/reader030/viewer/2022021416/5871ab301a28abda6a8b57fd/html5/thumbnails/35.jpg)
![Page 36: 專業前端 都如何管理 CSS](https://reader030.fdocuments.net/reader030/viewer/2022021416/5871ab301a28abda6a8b57fd/html5/thumbnails/36.jpg)
![Page 37: 專業前端 都如何管理 CSS](https://reader030.fdocuments.net/reader030/viewer/2022021416/5871ab301a28abda6a8b57fd/html5/thumbnails/37.jpg)
sass/||–base/||–_reset.scss#Reset/normalize||–_typography.scss#Typographyrules|...#Etc…||–components/||–_buttons.scss#Buttons||–_carousel.scss#Carousel||–_cover.scss#Cover||–_dropdown.scss#Dropdown||–_navigation.scss#Navigation|...#Etc…||–helpers/||–_variables.scss#SassVariables||–_functions.scss#SassFunctions||–_mixins.scss#SassMixins||–_helpers.scss#Class&placeholdershelpers|...#Etc…||–layout/||–_grid.scss#Gridsystem||–_header.scss#Header||–_footer.scss#Footer||–_sidebar.scss#Sidebar||–_forms.scss#Forms|...#Etc…||–pages/||–_home.scss#Homespecificstyles||–_contact.scss#Contactspecificstyles|...#Etc…||–themes/||–_theme.scss#Defaulttheme||–_admin.scss#Admintheme|...#Etc…||–vendors/||–_bootstrap.scss#Bootstrap||–_jquery-ui.scss#jQueryUI|...#Etc…
![Page 38: 專業前端 都如何管理 CSS](https://reader030.fdocuments.net/reader030/viewer/2022021416/5871ab301a28abda6a8b57fd/html5/thumbnails/38.jpg)
sass/||–base/||–_reset.scss#Reset/normalize||–_typography.scss#Typographyrules|...#Etc…||–components/||–_buttons.scss#Buttons||–_carousel.scss#Carousel||–_cover.scss#Cover||–_dropdown.scss#Dropdown||–_navigation.scss#Navigation|...#Etc…||–helpers/||–_variables.scss#SassVariables||–_functions.scss#SassFunctions||–_mixins.scss#SassMixins||–_helpers.scss#Class&placeholdershelpers|...#Etc…||–layout/||–_grid.scss#Gridsystem||–_header.scss#Header||–_footer.scss#Footer||–_sidebar.scss#Sidebar||–_forms.scss#Forms|...#Etc…||–pages/||–_home.scss#Homespecificstyles||–_contact.scss#Contactspecificstyles|...#Etc…||–themes/||–_theme.scss#Defaulttheme||–_admin.scss#Admintheme|...#Etc…||–vendors/||–_bootstrap.scss#Bootstrap||–_jquery-ui.scss#jQueryUI|...#Etc…
![Page 39: 專業前端 都如何管理 CSS](https://reader030.fdocuments.net/reader030/viewer/2022021416/5871ab301a28abda6a8b57fd/html5/thumbnails/39.jpg)
sass/||–base/||–_reset.scss#Reset/normalize||–_typography.scss#Typographyrules|...#Etc…||–components/||–_buttons.scss#Buttons||–_carousel.scss#Carousel||–_cover.scss#Cover||–_dropdown.scss#Dropdown||–_navigation.scss#Navigation|...#Etc…||–helpers/||–_variables.scss#SassVariables||–_functions.scss#SassFunctions||–_mixins.scss#SassMixins||–_helpers.scss#Class&placeholdershelpers|...#Etc…||–layout/||–_grid.scss#Gridsystem||–_header.scss#Header||–_footer.scss#Footer||–_sidebar.scss#Sidebar||–_forms.scss#Forms|...#Etc…||–pages/||–_home.scss#Homespecificstyles||–_contact.scss#Contactspecificstyles|...#Etc…||–themes/||–_theme.scss#Defaulttheme||–_admin.scss#Admintheme|...#Etc…||–vendors/||–_bootstrap.scss#Bootstrap||–_jquery-ui.scss#jQueryUI|...#Etc…
![Page 40: 專業前端 都如何管理 CSS](https://reader030.fdocuments.net/reader030/viewer/2022021416/5871ab301a28abda6a8b57fd/html5/thumbnails/40.jpg)
sass/||–base/||–_reset.scss#Reset/normalize||–_typography.scss#Typographyrules|...#Etc…||–components/||–_buttons.scss#Buttons||–_carousel.scss#Carousel||–_cover.scss#Cover||–_dropdown.scss#Dropdown||–_navigation.scss#Navigation|...#Etc…||–helpers/||–_variables.scss#SassVariables||–_functions.scss#SassFunctions||–_mixins.scss#SassMixins||–_helpers.scss#Class&placeholdershelpers|...#Etc…||–layout/||–_grid.scss#Gridsystem||–_header.scss#Header||–_footer.scss#Footer||–_sidebar.scss#Sidebar||–_forms.scss#Forms|...#Etc…||–pages/||–_home.scss#Homespecificstyles||–_contact.scss#Contactspecificstyles|...#Etc…||–themes/||–_theme.scss#Defaulttheme||–_admin.scss#Admintheme|...#Etc…||–vendors/||–_bootstrap.scss#Bootstrap||–_jquery-ui.scss#jQueryUI|...#Etc…
![Page 41: 專業前端 都如何管理 CSS](https://reader030.fdocuments.net/reader030/viewer/2022021416/5871ab301a28abda6a8b57fd/html5/thumbnails/41.jpg)
sass/||–base/||–_reset.scss#Reset/normalize||–_typography.scss#Typographyrules|...#Etc…||–components/||–_buttons.scss#Buttons||–_carousel.scss#Carousel||–_cover.scss#Cover||–_dropdown.scss#Dropdown||–_navigation.scss#Navigation|...#Etc…||–helpers/||–_variables.scss#SassVariables||–_functions.scss#SassFunctions||–_mixins.scss#SassMixins||–_helpers.scss#Class&placeholdershelpers|...#Etc…||–layout/||–_grid.scss#Gridsystem||–_header.scss#Header||–_footer.scss#Footer||–_sidebar.scss#Sidebar||–_forms.scss#Forms|...#Etc…||–pages/||–_home.scss#Homespecificstyles||–_contact.scss#Contactspecificstyles|...#Etc…||–themes/||–_theme.scss#Defaulttheme||–_admin.scss#Admintheme|...#Etc…||–vendors/||–_bootstrap.scss#Bootstrap||–_jquery-ui.scss#jQueryUI|...#Etc…
![Page 42: 專業前端 都如何管理 CSS](https://reader030.fdocuments.net/reader030/viewer/2022021416/5871ab301a28abda6a8b57fd/html5/thumbnails/42.jpg)
sass/||–base/||–_reset.scss#Reset/normalize||–_typography.scss#Typographyrules|...#Etc…||–components/||–_buttons.scss#Buttons||–_carousel.scss#Carousel||–_cover.scss#Cover||–_dropdown.scss#Dropdown||–_navigation.scss#Navigation|...#Etc…||–helpers/||–_variables.scss#SassVariables||–_functions.scss#SassFunctions||–_mixins.scss#SassMixins||–_helpers.scss#Class&placeholdershelpers|...#Etc…||–layout/||–_grid.scss#Gridsystem||–_header.scss#Header||–_footer.scss#Footer||–_sidebar.scss#Sidebar||–_forms.scss#Forms|...#Etc…||–pages/||–_home.scss#Homespecificstyles||–_contact.scss#Contactspecificstyles|...#Etc…||–themes/||–_theme.scss#Defaulttheme||–_admin.scss#Admintheme|...#Etc…||–vendors/||–_bootstrap.scss#Bootstrap||–_jquery-ui.scss#jQueryUI|...#Etc…
![Page 43: 專業前端 都如何管理 CSS](https://reader030.fdocuments.net/reader030/viewer/2022021416/5871ab301a28abda6a8b57fd/html5/thumbnails/43.jpg)
sass/||–base/||–_reset.scss#Reset/normalize||–_typography.scss#Typographyrules|...#Etc…||–components/||–_buttons.scss#Buttons||–_carousel.scss#Carousel||–_cover.scss#Cover||–_dropdown.scss#Dropdown||–_navigation.scss#Navigation|...#Etc…||–helpers/||–_variables.scss#SassVariables||–_functions.scss#SassFunctions||–_mixins.scss#SassMixins||–_helpers.scss#Class&placeholdershelpers|...#Etc…||–layout/||–_grid.scss#Gridsystem||–_header.scss#Header||–_footer.scss#Footer||–_sidebar.scss#Sidebar||–_forms.scss#Forms|...#Etc…||–pages/||–_home.scss#Homespecificstyles||–_contact.scss#Contactspecificstyles|...#Etc…||–themes/||–_theme.scss#Defaulttheme||–_admin.scss#Admintheme|...#Etc…||–vendors/||–_bootstrap.scss#Bootstrap||–_jquery-ui.scss#jQueryUI|...#Etc…
![Page 44: 專業前端 都如何管理 CSS](https://reader030.fdocuments.net/reader030/viewer/2022021416/5871ab301a28abda6a8b57fd/html5/thumbnails/44.jpg)
sass/||–all.scss||–base/||–components/||–helpers/||–layout/||–pages/||–themes/||–vendors/
Bootstrap
_variable
_utilities
_header
_index
_admin
_jqueryUi
![Page 45: 專業前端 都如何管理 CSS](https://reader030.fdocuments.net/reader030/viewer/2022021416/5871ab301a28abda6a8b57fd/html5/thumbnails/45.jpg)