Skip to content

Instantly share code, notes, and snippets.

@diegoeis

diegoeis/SassMeister-input.scss

Created September 18, 2014 21:16
Show Gist options
  • Save diegoeis/fad709f2a1fccf17f51d to your computer and use it in GitHub Desktop.
Save diegoeis/fad709f2a1fccf17f51d to your computer and use it in GitHub Desktop.
Download ZIP
Generated by SassMeister.com.
Raw
SassMeister-input.scss
// ----
// Sass (v3.4.4)
// Compass (v1.0.1)
// ----
$subicons: (
av-ico-logomarca: (
top: 0,
left: 0,
topHover: -74px,
leftHover: 0,
imgBack: '../images/icons/av-design.png'
),
av-ico-print: (
top: 0,
left: -179px,
topHover: -74px,
leftHover: -179px,
imgBack: '../images/icons/av-design.png'
),
av-ico-embalagem: (
top: 0,
left: -374px,
topHover: -74px,
leftHover: -374px,
imgBack: '../images/icons/av-design.png'
),
av-ico-material: (
top: 0,
left: -554px,
topHover: -74px,
leftHover: -554px,
imgBack: '../images/icons/av-design.png'
),
);
//
// A ideia é usar as KEYS que já estão no maplist acima no lugar desses logo abaixo
//
.av-ico-logomarca:before,
.av-ico-print:before,
.av-ico-embalagem:before,
.av-ico-material:before {
content: "";
display: block;
margin: 0 auto 20px;
width: 70px;
height: 70px;
background-repeat: no-repeat;
background-position: 0 0;
}
@each $subicon, $positions in $subicons {
$top: map-get($positions, top);
$left: map-get($positions, left);
$topHover: map-get($positions, topHover);
$leftHover: map-get($positions, leftHover);
$imgBack: map-get($positions, imgBack);
.#{$subicon} {
&:before {
background-image: $imgBack;
background-position: $left $top;
}
&:hover:before {
background-position: $leftHover $topHover;
}
}
}
Raw
SassMeister-output.css
.av-ico-logomarca:before,
.av-ico-print:before,
.av-ico-embalagem:before,
.av-ico-material:before {
content: "";
display: block;
margin: 0 auto 20px;
width: 70px;
height: 70px;
background-repeat: no-repeat;
background-position: 0 0;
}
.av-ico-logomarca:before {
background-image: "../images/icons/av-design.png";
background-position: 0 0;
}
.av-ico-logomarca:hover:before {
background-position: 0 -74px;
}
.av-ico-print:before {
background-image: "../images/icons/av-design.png";
background-position: -179px 0;
}
.av-ico-print:hover:before {
background-position: -179px -74px;
}
.av-ico-embalagem:before {
background-image: "../images/icons/av-design.png";
background-position: -374px 0;
}
.av-ico-embalagem:hover:before {
background-position: -374px -74px;
}
.av-ico-material:before {
background-image: "../images/icons/av-design.png";
background-position: -554px 0;
}
.av-ico-material:hover:before {
background-position: -554px -74px;
}
@eshiota
Copy link

eshiota commented Sep 18, 2014 

$subicons-keys: map-keys($subicons);
$class-selector: ();

@each $key in $subicons-keys {

    $class-selector: append(
        $class-selector,
        unquote(".#{$key}:before"),
        comma
    );

    #{$class-selector} {
        content: "";
        display: block;
        margin: 0 auto 20px;
        width: 70px;
        height: 70px;
        background-repeat: no-repeat;
        background-position: 0 0;
    }

}

@diegoeis
Copy link
Author

Isso ajuda, @eshiota, mas a ideia seria não repetir sempre as propriedades em cada #{$class-selector}.
O output teria que ser esse agrupamento de seletores:

.av-ico-logomarca:before,
.av-ico-print:before,
.av-ico-embalagem:before,
.av-ico-material:before {
  content: "";
  display: block;
  margin: 0 auto 20px;
  width: 70px;
  ...
}

@eshiota
Copy link

eshiota commented Sep 18, 2014

@diegoeis Mas o output do que eu postei é exatamente isso, os seletores agrupados por vírgula. Este trecho aqui

    $class-selector: append(
        $class-selector,
        unquote(".#{$key}:before"),
        comma
    );

é responsável por agrupar os seletores em uma única string, que é usada logo abaixo.

@diegoeis
Copy link
Author

Vixi, então pera... Aqui está repetindo todo o bloco para cada selector! O.o
Esse é o output.

.av-ico-logomarca:before {
  content: "";
  display: block;
  margin: 0 auto 20px;
  width: 70px;
  height: 70px;
  background-repeat: no-repeat;
  background-position: 0 0; }

.av-ico-logomarca:before, .av-ico-print:before {
  content: "";
  display: block;
  margin: 0 auto 20px;
  width: 70px;
  height: 70px;
  background-repeat: no-repeat;
  background-position: 0 0; }

.av-ico-logomarca:before, .av-ico-print:before, .av-ico-embalagem:before {
  content: "";
  display: block;
  margin: 0 auto 20px;
  width: 70px;
  height: 70px;
  background-repeat: no-repeat;
  background-position: 0 0; }

.av-ico-logomarca:before, .av-ico-print:before, .av-ico-embalagem:before, .av-ico-material:before {
  content: "";
  display: block;
  margin: 0 auto 20px;
  width: 70px;
  height: 70px;
  background-repeat: no-repeat;
  background-position: 0 0; }

@eshiota
Copy link

eshiota commented Sep 18, 2014

@diegoeis Opa, mal! Coloquei uma parada num lugar errado. 🐱

O bloco com as propriedades era pra estar fora do @each:

$subicons-keys: map-keys($subicons);
$class-selector: ();

@each $key in $subicons-keys {
    $class-selector: append(
        $class-selector,
        unquote(".#{$key}:before"),
        comma
    );
}

#{$class-selector} {
    content: "";
    display: block;
    margin: 0 auto 20px;
    width: 70px;
    height: 70px;
    background-repeat: no-repeat;
    background-position: 0 0;
}

@diegoeis
Copy link
Author

Resolvi aqui do jeito mais burro e possivelmente mais sujo possível. Mas funcionou lindamente. Mesmo assim, vou usar essa solução que é bem mais inteligente.

$hoverPos: -74px
$beforeIcon: "&:before"
$beforeIconHover: "&:hover:before"

$classesIcons:  ".av-ico-logomarca:before, .av-ico-print:before, .av-ico-embalagem:before, .av-ico-material:before"

@mixin iconPos($left, $top)

    #{$beforeIcon}
        @content
        background-position: $left $top

    #{$beforeIconHover}
        @content
        background-position: $left $hoverPos

////
// Design Icons
////
.av-ico-logomarca:before,
.av-ico-print:before,
.av-ico-embalagem:before,
.av-ico-material:before
    background-image: url(../images/icons/av-design.png)

.av-ico-logomarca
    @include iconPos(0, 0)

.av-ico-print
    @include iconPos(-179px, 0)

.av-ico-embalagem
    @include iconPos(-374px, 0)

.av-ico-material
    @include iconPos(-554px, 0)




@mixin commonConfigIcons
    #{$classesIcons}
        @content
        content: ""
        display: block
        margin: 0 auto 20px
        width: 70px
        height: 70px
        background-repeat: no-repeat

@include commonConfigIcons

@diegoeis
Copy link
Author

Esse é o final. Vou resolver depois o esquema com o background-image.

$topHover: -74px;

$subicons: (
    av-ico-logomarca: (
        left: 0,
        imgBack: '../images/icons/av-design.png'
    ),
    av-ico-print: (
        left: -179px,
        imgBack: '../images/icons/av-design.png'
    ),
    av-ico-embalagem: (
        left: -374px,
        imgBack: '../images/icons/av-design.png'
    ),
    av-ico-material: (
        left: -554px,
        imgBack: '../images/icons/av-design.png'
    ),
);


@each $subicon, $positions in $subicons {
    $left: map-get($positions, left);
    $imgBack: map-get($positions, imgBack);

    .#{$subicon} {
        &:before {
            background-image: url($imgBack);
            background-position: $left 0;
        }

        &:hover:before {
            background-position: $left $topHover;
        }
    }
}


//
// Common Icon Styles
//

$subicons-keys: map-keys($subicons);
$class-selector: ();

@each $key in $subicons-keys {
    $class-selector: append(
        $class-selector,
        unquote(".#{$key}:before"),
        comma
    );
}

#{$class-selector} {
    content: "";
    display: block;
    margin: 0 auto 20px;
    width: 70px;
    height: 70px;
    background-repeat: no-repeat;
    background-position: 0 0;
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment