scss 社交共享微小组件 - SCSS
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了scss 社交共享微小组件 - SCSS相关的知识,希望对你有一定的参考价值。
/**
* Copyright (C) 2014 Roman Janko
* _social-sharing.scss
*
* changelog
* 18.12.2017 15:03:08:revised
*
* @author janko@andweb.cz
* @version 0.1.0
* @since 0.1.0
*/
$list: ();
$list: append($list, twitter);
$list: append($list, facebook);
/*$list: append($list, gplus);*/
$list: append($list, linkedin);
$length: length($list);
$size: 48px;
.social-sharing-pane
{
background: #fff;
position: fixed;
right: 0;
top: 50%;
margin-top: - (($size * $length) / 2);
z-index: 50;
width: $size;
height: $size * $length;
a
{
width: $size;
height: $size;
display: block;
opacity: 1;
@each $flag in $list
{
&.-#{$flag}
{
background: url('/assets/gfx/social-sharing/#{$flag}.png') no-repeat;
background-size: $size $size;
}
}
&:hover
{
opacity: .8;
}
}
@include respond(0, 480px) {
top: auto;
right: auto;
left: 0px;
bottom: 0px;
margin-top: 0px;
width: $size * $length;
height: $size;
a {
display: block;
float: left;
margin: 0;
padding: 0;
}
}
}
以上是关于scss 社交共享微小组件 - SCSS的主要内容,如果未能解决你的问题,请参考以下文章
什么时候应该在 Angular 中使用 styles.scss,什么时候应该使用组件的 scss
scss Drupal 7中的社交链接菜单
scss SVG社交图标
scss 粘滞的社交媒体按钮漂浮在页面的一侧
scss 仁选择喜悦 - 社交媒体图标的随机背景位置
scss 社交菜单 - 根据锚点href自动设置FontAwesome图标