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

2.
U can’t see me

13. all.scss > all.css>

14. $ ruby -v
$ gem install sass
$ sass input.scss output.css #
$ sass --watch app/sass:public/stylesheets
#

15. all.scss > all.css>

16. sass/
|
|– sass/
| |– all.scss #
|
|– stylesheets/
| |– all.css #
|
|
|– index.html

30. all.scss > all.css>

35. $

36. $
$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;
}

37.
$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;
}

38. $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;
}

39. $

40. {}
.btn-primary {
background-color: $primary-color;
border-color: $primary-color;
color: white;
&:hover {
background-color: darken($primary-color, 15%);
}
}

41. &:
.btn-primary {
background-color: $primary-color;
border-color: $primary-color;
color: white;
&:hover {
background-color: darken($primary-color, 15%);
}
}

42. {}
&:

44. @import "button";
.btn {
color: #777;
display: inline-block;
…
}

45. @import "button";
.btn {
color: #777;
display: inline-block;
…
}

46. @import "button";
.btn {
color: #777;
display: inline-block;
…
}

48. 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…

49. 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…