The document discusses the use of SASS for front-end development, particularly focusing on the management of social media icons and colors using maps. It outlines various methods for defining and applying colors and icons for platforms like Twitter, Facebook, and LinkedIn through SASS features. Additionally, it emphasizes the importance of organization in large projects with numerous variables and provides examples of how to use SASS maps for better maintainability.

2. Andréa
Zambrana
front-end @ Amil
[multicanais]
@akfzambrana
http://andreazambrana.com.
br

3. @frontladiesabc
facebook.com/front-ladies-

4. Vamos pra
o que interessa!

5. cor de fundo =
#55ACEE
ícone =
"62"identificação = twitter

6. <a href="https://twitter.com">
Twitter
</a>
<a href="https://www.facebook.com">
Facebook
</a>
<a href="https://br.linkedin.com">
Linkedin
</a>

7. a[href="http://twitter.com"] {
background: #55acee;
}
a[href="http://twitter.com"]:before {
content: "62";
}

8. a[href*="twitter"] {
background: #55acee;
}
a[href*="twitter"]:before {
content: "62";
}

9. a[href*="facebook"] {
background: #2E4DA7;
}
a[href*="facebook"]:before {
content: "61";
}

10. a[href*="linkedin"] {
background: #007AB9;
}
a[href*="linkedin"]:before {
content: "63";
}

11. a[href*="twitter"] {
background: #55acee;
}
a[href*="twitter"]:before {
content: "62";
}
a[href*="facebook"] {
background: #2E4DA7;
}
a[href*="facebook"]:before {
content: "61";
}
a[href*="linkedin"] {
background: #007AB9;
}
a[href*="linkedin"]:before {
content: "63";
}

12. a[href*="twitter"] {
background: #55acee;
}
a[href*="twitter"]:before {
content: "62";
}
a[href*="facebook"] {
background: #2E4DA7;
}
a[href*="facebook"]:before {
content: "61";
}
a[href*="linkedin"] {
background: #007AB9;
}
a[href*="linkedin"]:before {
content: "63";
}

13. a[href*="twitter"] {
background: #55acee;
}
a[href*="twitter"]:before {
content: "62";
}
a[href*="facebook"] {
background: #2E4DA7;
}
a[href*="facebook"]:before {
content: "61";
}
a[href*="linkedin"] {
background: #007AB9;
}
a[href*="linkedin"]:before {
content: "63";
}

14. a[href*="twitter"] {
background: #55acee;
}
a[href*="twitter"]:before {
content: "62";
}
a[href*="facebook"] {
background: #2E4DA7;
}
a[href*="facebook"]:before {
content: "61";
}
a[href*="linkedin"] {
background: #007AB9;
}
a[href*="linkedin"]:before {
content: "63";
}

15. copiar e colar, suxs!

16. E se usarmos um
pré-processador?
será que melhora?

17. Como vocês
fariam?

18. Com listas

19. $social-media: (
("twitter", "62", #55ACEE),
("facebook", "63", #2E4DA7),
("linkedin", "61", #007AB9)
);

20. $social-media: (
("twitter", "62", #55ACEE),
("facebook", "63", #2E4DA7),
("linkedin", "61", #007AB9)
);

21. $social-media: (
("twitter", "62", #55ACEE),
("facebook", "63", #2E4DA7),
("linkedin", "61", #007AB9)
);

22. @each $x, $y, $z in $social-media {
a[href*="#{$x}"] {
background: $z;
&:before {
content: $y;
}
}
}

23. @each $x, $y, $z in $social-media {
a[href*="#{$x}"] {
background: $z;
&:before {
content: $y;
}
}
}

24. @each $x, $y, $z in $social-media {
a[href*="#{$x}"] {
background: $z;
&:before {
content: $y;
}
}
}

25. @each $x, $y, $z in $social-media {
a[href*="#{$x}"] {
background: $z;
&:before {
content: $y;
}
}
}

26. @each $name, $char, $color in $social-media {
a[href*="#{$name}"] {
background: $color;
&:before {
content: $char;
}
}
}

27. a[href*="twitter"] {
background: #55acee;
}
a[href*="twitter"]:before {
content: "b";
}
a[href*="facebook"] {
background: #2E4DA7;
}
a[href*="facebook"]:before {
content: "c";
}
a[href*="linkedin"] {
background: #007AB9;
}
a[href*="linkedin"]:before {
content: "a";
}

28. E daqui a 6
meses?
ou mais tempo

29. $social-media: (
("twitter", "62", #55ACEE),
("facebook", "63", #2E4DA7),
("linkedin", "61", #007AB9)
);

30. $social-media: (
("twitter", "62", #55ACEE),
("facebook", "63", #2E4DA7),
("linkedin", "61", #007AB9)
);

31. $social-media: (
("twitter", "62", #55ACEE, #226391),
("facebook", "63", #2E4DA7, #173075),
("linkedin", "61", #007AB9, #052c3f)
);

33. E se fosse
algo assim?

34. $social-media: (
twitter: (
icon: "62",
bg-color: #55ACEE
),
facebook: (
icon: "63",
bg-color: #2E4DA7
),
linkedin: (
icon: "61",
bg-color: #007AB9
)
);

35. $social-media: (
twitter: (
icon: "62",
bg-color: #55ACEE
),
facebook: (
icon: "63",
bg-color: #2E4DA7
),
linkedin: (
icon: "61",
bg-color: #007AB9
)
);

36. @each $name, $values in $social-media {
a[href*="#{$name}"] {
background: map-get($values, bg-color);
&:before {
content: map-get($values, icon);
}
}
}

37. @each $name, $values in $social-media {
a[href*="#{$name}"] {
background: map-get($values, bg-color);
&:before {
content: map-get($values, icon);
}
}
}

38. @each $name, $values in $social-media {
a[href*="#{$name}"] {
background: map-get($values, bg-color);
&:before {
content: map-get($values, icon);
}
}
}

39. a[href*="twitter"] {
background: #55acee;
}
a[href*="twitter"]:before {
content: "b";
}
a[href*="facebook"] {
background: #2E4DA7;
}
a[href*="facebook"]:before {
content: "c";
}
a[href*="linkedin"] {
background: #007AB9;
}
a[href*="linkedin"]:before {
content: "a";
}

40. e ae, curtiram?

41. Sass maps
o que são

42. Vetores
associativos
basicamente

43. Listas bombadas
nome para cada valor

44. Desde a versão
3.3

45. $nome-mapa: (
chave: valor,
chave-2: valor-2
);

46. $nome-mapa: (
chave: valor,
chave-2: valor-2
);

47. $nome-mapa: (
chave-mapa: (
chave: valor,
chave-2: valor-2
),
chave-2: valor-2
);

48. $nome-mapa: (
chave-mapa: (
chave: valor,
chave-2: valor-2
),
chave-2: valor-2
);

49. Cuidado com
mapas dentro de
mapas

50. detalhes,
grandes
diferenças!

51. $colors: (
primary: #BE0062,
secondary: #D3A108,
warning: #FFF82A,
);
este mapa funciona?

52. $colors: (
primary: #BE0062,
secondary: #D3A108,
warning: #FFF82A,
);
este mapa funciona?

53. Pode ter
vírgula no final
não dá pau =P

54. $my-map: (
name: "my-component",
text-size: 15px,
color: #BE0062,
"show": true,
block: null,
size: (100px, 50px)
);
e assim, pode ser?

55. Pode usar
qualquer tipo de
dado
aceito pelo Sass

56. Strings (com ou sem
aspas)
Numbers
Cores
Booleans

57. Listas
Mapas
Null

58. Seja chave ou
valor
mas...

59. Chaves ===
strings
recomenda-se

60. Chaves únicas
importante!

61. Funções nativas
http://sass-
lang.com/documentation/Sass/Scrip
t/Functions.html#map-functions

62. Exemplo

65. button {
background: #0CA0C1;
color: #fff;
}
.main-action {
background: #0CA0C1;
color: #fff;
}
.secondary-action {
background: #0CA0C1;
color: #fff;
}
marca1.css
button {
background: #aaa;
color: #fff;
}
.main-action {
background: linear-gradient(
to bottom, #ed6655, #eb4766
);
color: #fff;
}
.secondary-action {
background: linear-gradient(
to bottom, #ed6655, #eb4766
);
color: #fff;
}
marca2.css

67. Com CSS4 será
que melhora?

68. .brand-2 {
--primary: #ed6655;
--secondary: #aaa;
--normal: #aaa;
--dark: #000;
--light: #fff;
}
.has-gradient {
--grad-light: #ed6655;
--grad-dark: #eb4766;
}
.brand-1 {
--primary: #0CA0C1;
--secondary: #0CA0C1;
--normal: #0CA0C1;
--dark: #000;
--light: #fff;
}
brand2.cssbrand1.css

69. button {
background: var(--normal);
color: var(--light);
}
.main-action {
background: var(--primary);
color: var(--light);
}
.secondary-action {
background: var(--secondary);
color: var(--light);
}
core.csscore.css
.has-gradient .main-action {
background: linear-gradient(
to bottom,
var(--gradient-light),
var(--gradient-dark)
)
}
.has-gradient .secondary-action {
background: linear-gradient(
to bottom,
var(--gradient-light),
var(--gradient-dark)
)
}

70. quem consegue

71. E se usarmos pré-
processador?

72. $primary: #ed6655;
$secondary: #eb4766;
$normal: #b9b9b9;
$gradient-light: #ed6655;
$gradient-dark: #eb4766;
$light: #fff;
$has-gradient: true;
$primary: #0CA0C1;
$secondary: #0CA0C1;
$normal: #0CA0C1;
$dark: #000;
$light: #fff;
$has-gradient: false;
brand.scssbrand.scss

73. $primary: #ed6655;
$secondary: #eb4766;
$normal: #b9b9b9;
$gradient-light: #ed6655;
$gradient-dark: #eb4766;
$light: #fff;
$has-gradient: true;
$primary: #0CA0C1;
$secondary: #0CA0C1;
$normal: #0CA0C1;
$dark: #000;
$light: #fff;
$has-gradient: false;
brand.scssbrand.scss

74. button {
background: $normal;
color: $light;
}

75. .main-action {
@if $has-gradient {
background: linear-gradient(
to bottom, $gradient-light, $gradient-
dark
);
color: $light;
} @else {
background: $primary;
color: $light;
}
}

76. .main-action {
@if $has-gradient {
background: linear-gradient(
to bottom, $gradient-light, $gradient-
dark
);
color: $light;
} @else {
background: $primary;
color: $light;
}
}

77. .secondary-action {
@if $has-gradient {
background: linear-gradient(
to bottom, $gradient-light, $gradient-
dark
);
color: $light;
} @else {
background: $secondary;
color: $light;
}
}

78. Melhorou ne?

79. E quando o
projeto crescer?
tipo 956 variáveis...

80. Será que fica
mais organizado
assim?

81. $brand-colors: (
primary: #0CA0C1,
secondary: #0CA0C1,
normal: #0CA0C1,
light: #fff
);
$has-gradient: false;
brand.scssbrand.scss
$brand-colors: (
primary: #0CA0C1,
secondary: #0CA0C1,
normal: #0CA0C1,
gradient: (
light: #ed6655,
dark: #eb4766
),
light: #fff
);
$has-gradient: false;

82. button {
background: map-get($colors, normal);
color: map-get($colors, light);
}

83. button {
background: map-get($colors, normal);
color: map-get($colors, light);
}

84. button {
background: map-get($colors, normal);
color: map-get($colors, light);
}

85. button {
background: map-get($colors, normal);
color: map-get($colors, light);
}

86. .main-action {
@if $has-gradient {
background: linear-gradient(
to bottom,
map-get(map-get($colors, gradient), light),
map-get(map-get($colors, gradient), dark),
);
} @else {
background: map-get($colors, primary);
}
color: map-get($colors, light);
}

87. .main-action {
@if $has-gradient {
background: linear-gradient(
to bottom,
map-get(map-get($colors, gradient), light),
map-get(map-get($colors, gradient), dark),
);
} @else {
background: map-get($colors, primary);
}
color: map-get($colors, light);
}

88. .main-action {
@if $has-gradient {
background: linear-gradient(
to bottom,
map-get(map-get($colors, gradient), light),
map-get(map-get($colors, gradient), dark),
);
} @else {
background: map-get($colors, primary);
}
color: map-get($colors, light);
}

89. .secondary-action {
@if $has-gradient {
background: linear-gradient(
to bottom,
map-get(map-get($colors, gradient), light),
map-get(map-get($colors, gradient), dark),
);
} @else {
background: map-get($colors, secondary);
}
color: map-get($colors, light);
}

90. .secondary-action {
@if $has-gradient {
background: linear-gradient(
to bottom,
map-get(map-get($colors, gradient), light),
map-get(map-get($colors, gradient), dark),
);
} @else {
background: map-get($colors, secondary);
}
color: map-get($colors, light);
}

91. brand.scss
$brand-colors: (
primary: #0CA0C1,
secondary: #0CA0C1,
normal: #0CA0C1,
gradient: (
light: #ed6655,
dark: #eb4766
),
light: #fff
);

92. brand.scss
$brand-colors: (
primary: #0CA0C1,
secondary: #0CA0C1,
normal: #0CA0C1,
gradient: (
light: #ed6655,
dark: #eb4766
),
light: #fff
);

94. @function color($key, $variation: null){
$type: map-get($brand-colors, $key);
@if $variation == null {
@if type-of($type) == map {
@return map-get(map-get($brand-colors, $key), 'base');
} @else {
@return map-get($brand-colors, $key);
}
} @else {
@return map-get(map-get($brand-colors, $key), $variation);
}
}

95. @function color($key, $variation: null){
$type: map-get($brand-colors, $key);
@if $variation == null {
@if type-of($type) == map {
@return map-get(map-get($brand-colors, $key), 'base');
} @else {
@return map-get($brand-colors, $key);
}
} @else {
@return map-get(map-get($brand-colors, $key), $variation);
}
}

96. @function color($key, $variation: null){
$type: map-get($brand-colors, $key);
@if $variation == null {
@if type-of($type) == map {
@return map-get(map-get($brand-colors, $key), 'base');
} @else {
@return map-get($brand-colors, $key);
}
} @else {
@return map-get(map-get($brand-colors, $key), $variation);
}
}

97. @function color($key, $variation: null){
$type: map-get($brand-colors, $key);
@if $variation == null {
@if type-of($type) == map {
@return map-get(map-get($brand-colors, $key), 'base');
} @else {
@return map-get($brand-colors, $key);
}
} @else {
@return map-get(map-get($brand-colors, $key), $variation);
}
}

98. .main-action {
@if $has-gradient {
background: linear-gradient(
to bottom,
color(gradient, light),
color(gradient, dark),
);
} @else {
background: color(primary);
}
color: color(light);
}

100. Adogo

101. Sass é o único
pré-processador
que tem mapas

103. OK, mas tem
mais
alguém que usa?
tipo alguém famoso...

105. Foundation Bootstrap 4 Ionic

106. Vlw!
@akfzambra
na
CSS SP #21

107. http://codepen.io/collection/nvKwK
a/
Codepen
com exemplos

108. Controle
de camadas

111. $z-layers: (
hell-pit: -9999,
default: 1,
middle: 50,
purgatory: 4000,
heaven: 4001
);

112. @function layer($key) {
@return map-get($z-layers, $key);
}

113. .dropdown {
z-index: layer(component);
}
.content {
z-index: layer(default);
}
.dialog-box {
z-index: layer(heaven);
}

114. Breakpoints
você não precisa de um
framework css

115. $screen-size: (
small: 767px,
medium: 992px,
large: 1200px
);

116. @mixin respond-to($size) {
$size: map-get($screen-size, $size)
@media (min-width: #{px-to-rem($size)} {
@content;
}
}

117. .my-link {
color: black;
@include respond-to(medium) {
color: tomato;
}
@include respond-to(large) {
color: orange;
}
}

118. .my-link {
color: black;
}
@media (min-width: 992px) {
.my-link { color: tomato; }
}
@media (min-width: 1200px) {
.my-link { color: orange; }
}

119. Controle de
componentes

120. $browser-min: (
'chrome': 33,
'firefox': 26,
'ie': 8,
'safari': 5,
'opera': 10
);

121. %clearfix {
$min-support: map-get($browser-min, 'ie');
@if $min-support < 8 {
…
} @else {
…
}
}

122. Agora é só soltar
a imaginação
e ser muito feliz!