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图标