Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Sass 基礎教學 - 高雄前端社群(CSS 讀書會)

2,909 views

Published on

高雄前端社群
Sass 基礎入門教學

Published in: Engineering
  • Login to see the comments

Sass 基礎教學 - 高雄前端社群(CSS 讀書會)

  1. 1. 
 U can’t see me
  2. 2.
  3. 3. all.scss > all.css>
  4. 4. $ ruby -v $ gem install sass $ sass input.scss output.css # $ sass --watch app/sass:public/stylesheets
 # 

  5. 5. all.scss > all.css> 

  6. 6. sass/ | |– sass/ | |– all.scss # | |– stylesheets/ | |– all.css # | | |– index.html
  7. 7. all.scss > all.css> 

  8. 8. $
  9. 9. $ 
 $card-size: 300px; $card-padding: 30px; $box-shadow-1: 0 3px 3px rgba(black, 0.16); .card { width: $card-size; box-shadow: $box-shadow-2; padding: $card-padding; }
  10. 10. 
 $card-size: 300px; $card-padding: 30px; $box-shadow-1: 0 3px 3px rgba(black, 0.16); .card { width: $card-size; box-shadow: $box-shadow-2; padding: $card-padding; }
  11. 11. $card-size: 300px; $card-padding: 30px; $box-shadow-1: 0 3px 3px rgba(black, 0.16); .card { width: $card-size; box-shadow: $box-shadow-2; padding: $card-padding; }
  12. 12. $
  13. 13. {} .btn-primary { background-color: $primary-color; border-color: $primary-color; color: white; &:hover { background-color: darken($primary-color, 15%); } }
  14. 14. &: .btn-primary { background-color: $primary-color; border-color: $primary-color; color: white; &:hover { background-color: darken($primary-color, 15%); } }
  15. 15. {} &:
  16. 16. @import "button"; .btn { color: #777; display: inline-block; … }
  17. 17. @import "button"; .btn { color: #777; display: inline-block; … } 

  18. 18. @import "button"; .btn { color: #777; display: inline-block; … }
  19. 19. sass/ | |– base/ | |– _reset.scss # Reset/normalize | |– _typography.scss # Typography rules | ... # Etc… | |– components/ | |– _buttons.scss # Buttons | |– _carousel.scss # Carousel | ... # 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 | ... # Etc… | |– pages/ | |– _home.scss # Home specific styles | ... # Etc… | |– themes/ | |– _theme.scss # Default theme | |– _admin.scss # Admin theme | ... # Etc… | |– vendors/ | |– _bootstrap.scss # Bootstrap | ... # Etc…
  20. 20. sass/ | |– base/ | |– _reset.scss # Reset/normalize | |– _typography.scss # Typography rules | ... # Etc… | |– components/ | |– _buttons.scss # Buttons | |– _carousel.scss # Carousel | ... # Etc… | |– helpers/ | |– _variables.scss # Sass Variables | |– _functions.scss # Sass Functions | |– _mixins.scss # Sass Mixins | |– _helpers.scss # Class & placeholders helpers | ... # Etc… | |– vendors/ | |– _bootstrap.scss # Bootstrap | ... # Etc…

×