Curso de Pré-Processadores CSS

Curso de Pré-Processadores CSS

Thiago Vinicius Vieira

Thiago Vinicius Vieira

Atividade prática: criando mixins para menu com Sass

16/21

Leitura

Para desenvolver nosso menu com SASS vamos reproduzir o seguinte código SCSS:

$default-font: 'Open Sans', sans-serif

  

$accent: #ffb74d

$link: #4a90e2

$link_hover: darken($link, 10%)

$accent_hover: darken($accent, 10%)

  

$text_color: #2f3640

$gray: #edeff0

$dark_gray: #b5bac1

  

@function rem($px)

@return $px / 16px + 0rem

@return $px

  

@mixin inline-block($va: top)

display: inline-block

vertical-align: $va

  

html

font-size: 16px

background: $gray

font-family: $default-font

  

h1

font-size: 20px

margin-bottom: 20px

  

.wrap

width: 500px

margin: auto

position: absolute

top: 50%

left: 50%

transform: translate(-50%,-50%)

border-radius: 4px

background-color: #ffffff

box-shadow: 0 1px 2px 0 #c9ced1

padding: rem(20px)

margin-bottom: rem(20px)

  

/* ------------------------------ MENU BEGIN ------------------------------ */

.menu

font-weight: 600

&__list

display: flex

align-items: center

&__item

position: relative

&:first-child

padding-left: 0

&:hover, &:focus, &:active

.menu__link

color: #fff

background-color: $accent

opacity: 1

text-decoration: none

&__link

position: relative

line-height: rem(40px)

display: block

text-decoration: none

color: $text_color

padding: 0 rem(15px)

white-space: nowrap

&__icon

display: block

margin: 0 auto rem(6px)

max-height: rem(17px)

opacity: .8

.menu__item.active

.menu__link

color: #fff

background-color: $accent

$padding: 25px

.submenu

position: absolute

pointer-events: none

opacity: 0

z-index: 1

font-size: rem(14px)

vertical-align: top

background-color: $accent

white-space: nowrap

transition: all .5s ease-in-out

&__col

display: inline-block

vertical-align: top

width: 180px

&__link

display: block

color: #fff

padding: rem(15px) rem($padding)

text-decoration: none

&:hover

color: #ffffff

background-color: $accent_hover

opacity: 1

&__item

&:hover

.submenu

opacity: 1

pointer-events: all

  

/* ------------------------------ MENU END ------------------------------ */

Aplicaremos este CSS neste HTML (não esqueça de fazer o vínculo com a tag < link >).

<body>

<div class="wrap">

<h1>Menu with sub menu</h1>

<div class="menu">

<ul class="menu__list">

<li class="menu__item active"><a class="menu__link" href="#">Menu item 1

<div class="submenu">

<div class="submenu__item"><a class="submenu__link" href="#">Submenu item 1</a></div>

<div class="submenu__item"><a class="submenu__link" href="#">Submenu item 2</a></div>

</div></a></li>

<li class="menu__item"><a class="menu__link" href="areas.html">Menu item 2

<div class="submenu">

<div class="submenu__item"><a class="submenu__link" href="#">Submenu item 1</a></div>

<div class="submenu__item"><a class="submenu__link" href="#">Submenu item 2</a></div>

</div></a></li>

<li class="menu__item"><a class="menu__link" href="#">Menu item 3

<div class="submenu">

<div class="submenu__item"><a class="submenu__link" href="#">Submenu item 1</a></div>

<div class="submenu__item"><a class="submenu__link" href="#">Submenu item 2</a></div>

</div></a></li>

</ul>

</div>

</div>

</body>

Posta para gente um print do seu resultado nos comentários.

Explique também a função do “&”, @functions e principalmente @mixin que usamos neste exemplo.

Estabeleça uma relação do número de linhas que você economizou, se foi relevante a reutilização de código ou não e como ficaria se você não usasse o SASS. Poste também - de preferência use o GitHub -, o resultado do CSS sem SASS, ou seja, com o código repetido para compararmos, nos comentários.

Contribuições 0

Perguntas 0

Ordenar por:

As contribuições, perguntas e respostas são vitais para aprender em comunidade. Registre-se ou faça login para participar .