scss 混入
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了scss 混入相关的知识,希望对你有一定的参考价值。
/**
* Square-Tile
* Styles a tile with a perfect square
* These tiles can be used for diffent spaces of a container
*/
@mixin squaretile(){
.square {
position: relative;
height: 0;
padding-bottom: 100%;
.square_inner {
position: absolute;
height: 100%;
width: 100%;
overflow: hidden;
}
}
}
/**
* Prevent the user from selecting/highlighting the area.
*/
@mixin no_select{
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */
-khtml-user-select: none; /* Konqueror HTML */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none;
}
/**
* [Subtracts the border and padding from the width of the element.]
*/
@mixin border-box{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
/**
* [scale description]
* @param {[int]} $zoom [The level of zoom you want on the element. eg: '1.1'.]
*/
@mixin scale($zoom){
-webkit-transform: scale($zoom);
-moz-transform: scale($zoom);
-ms-transform: scale($zoom);
-o-transform: scale($zoom);
transform: scale($zoom);
}
/**
* [Pass the angle you want the element to rotate. eg: 90deg. NOTE: You need to add 'deg' to the angle. eg: 90deg.]
* @param {[int with 'deg' appended]} $deg [The angle of the rotation]
*/
@mixin rotate($deg){
-webkit-transform: rotate($deg);
-moz-transform: rotate($deg);
-o-transform: rotate($deg);
-ms-transform: rotate($deg);
transform: rotate($deg);
}
/**
* [Rotate and vertically align element within a relatively positioned element. NOTE: You need to add 'deg' to the angle. eg: 90deg.]
* @param {[percentage]} $topPos [Pass the vertical position as a percetage. eg 50% will horizontally center align the element.]
* @param {[int with 'deg' appended]} $deg [The angle of the rotation]
*/
@mixin rotateVerticalAlign($topPos, $deg){
top: $topPos;
-webkit-transform: translateY(-$topPos) rotate($deg);
-moz-transform: translateY(-$topPos) rotate($deg);
-ms-transform: translateY(-$topPos) rotate($deg);
-o-transform: translateY(-$topPos) rotate($deg);
transform: translateY(-$topPos) rotate($deg);
}
/**
* [Rotate and horizontally align element within a relatively positioned element. NOTE: You need to add 'deg' to the angle. eg: 90deg.]
* @param {[percentage]} $topPos [Pass the vertical position as a percetage. eg 50% will horizontally center align the element.]
* @param {[int with 'deg' appended]} $deg [The angle of the rotation]
*/
@mixin rotateHorizontallyAlign($leftPos, $deg){
left: $leftPos;
-webkit-transform: translateY(-$leftPos) rotate($deg);
-moz-transform: translateY(-$leftPos) rotate($deg);
-ms-transform: translateY(-$leftPos) rotate($deg);
-o-transform: translateY(-$leftPos) rotate($deg);
transform: translateY(-$leftPos) rotate($deg);
}
@mixin rotateVerticalHorizontalAlign($leftPos, $topPos, $deg){
left: $leftPos;
top: $topPos;
-webkit-transform: translate(-$leftPos, -$topPos) rotate($deg);
-moz-transform: translate(-$leftPos, -$topPos) rotate($deg);
-ms-transform: translate(-$leftPos, -$topPos) rotate($deg);
-o-transform: translate(-$leftPos, -$topPos) rotate($deg);
transform: translate(-$leftPos, -$topPos) rotate($deg);
}
/**
* [Vertically align element within a relatively positioned element.]
* @param {[percentage]} $topPos [Pass the vertical position as a percetage. eg 50% will vertically center align the element.]
*/
@mixin verticalAlign($topPos){
top: $topPos;
-webkit-transform: translateY(-$topPos);
-moz-transform: translateY(-$topPos);
-ms-transform: translateY(-$topPos);
-o-transform: translateY(-$topPos);
transform: translateY(-$topPos);
}
/**
* [Horizontally align element within a relatively positioned element.]
* @param {[percentage]} $leftPos [Pass the vertical position as a percetage. eg 50% will horizontally center align the element.]
*/
@mixin horizontalAlign($leftPos){
left: $leftPos;
-webkit-transform: translateX(-$leftPos);
-moz-transform: translateX(-$leftPos);
-ms-transform: translateX(-$leftPos);
-o-transform: translateX(-$leftPos);
transform: translateX(-$leftPos);
}
/**
* [Horizontally and vertically align element within a relatively positioned element.]
* @param {[percentage]} $leftPos [Pass the horizontally position as a percetage. eg 50% will horizontally center align the element.]
* @param {[percentage]} $topPos [Pass the vertical position as a percetage. eg 50% will horizontally center align the element.]
*/
@mixin verticalHorizontalAlign($leftPos, $topPos){
left: $leftPos;
top: $topPos;
-webkit-transform: translate(-$leftPos, -$topPos);
-moz-transform: translate(-$leftPos, -$topPos);
-ms-transform: translate(-$leftPos, -$topPos);
-o-transform: translate(-$leftPos, -$topPos);
transform: translate(-$leftPos, -$topPos);
}
/**
* [transition description]
* @param {[style]} $propertie [The style you want to animate. Defaults to 'all'.]
* @param {[int in seconds]} $time [The speed at which you want the transition to take. Defaults to '0.3s'.]
* @param {[movement type]} $mode [The type of movement you want eg: linear, ease, ease-in, ease-out. Defaults to 'linear'.]
*/
@mixin transition($property: all, $time: 0.3s, $mode: linear){
-webkit-transition: $property $time $mode;
-moz-transition: $property $time $mode;
-o-transition: $property $time $mode;
transition: $property $time $mode;
}
// Background image - no repeat, centered, cover
@mixin OptimiseBgImg() {
background-repeat: no-repeat;
background-position: center top;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
// Center item horizontally and vertically
// make parent item position relative
@mixin CenterPositioning() {
position: absolute;
right: 0;
top: 0;
bottom: 0;
left: 0;
margin: auto;
}
/**
* Grid panels
* Creates a grid of items that have a fixed height
* @param $cols int = number of items per row
* @param $col_gap percent = gap between items in each row (optional, defaults to 2%)
* @param $row_gap percent = gap between row (optional, defaults to two times col_gap (4%))
**/
@mixin grid( $cols, $col_gap: 2%, $row_gap: false ){
@if $row_gap == false{
$row_gap: $col_gap * 2;
}
width: ( 0% + ( 100 / $cols ) - ( $col_gap * 2 ) + ( ( $col_gap * 2 ) / $cols ) );
box-sizing: border-box();
margin: 0 $col_gap;
// reset previously defined margins (at higher breakpoints)
&:nth-of-type(n),
&:nth-of-type(1n+1) {
margin: $row_gap $col_gap 0;
clear: none;
}
// first of row
&:nth-of-type(#{$cols}n+1) {
// margin-top: $row_gap;
margin-left: 0;
clear: both;
}
// handle first of row if there are less than $col
&:first-of-type {
margin-top: 0;
margin-left: 0;
}
@for $i from 1 through $cols{
&:nth-of-type(#{$i}){
margin-top: 0;
}
}
// last of row
&:nth-of-type(#{$cols}n) {
margin-right: 0;
position: relative;
&:after{
clear: both;
}
}
// Remove unneeded margin-bottom from the last item.
&:last-of-type {
margin-bottom: 0;
}
}
/**
* Multi-column
* @param $cols int = number of columns to span
* @param $sum int = total number of columns
* @param $gap mixed = gap between items (optional, defaults to 1rem)
**/
@mixin col($cols, $sum, $gap: 1rem){
width: percentage($cols/$sum);
display: block;
float: left;
box-sizing: border-box;
padding: 0 $gap;
&:first-of-type {
padding-left: 0;
}
&:last-of-type {
padding-right: 0;
}
}
@mixin optional-at-root($sel) {
@at-root #{if(not &, $sel, selector-append(&, $sel))} {
@content;
}
}
@mixin placeholder {
@include optional-at-root('::-webkit-input-placeholder') {
@content;
}
@include optional-at-root(':-moz-placeholder') {
@content;
}
@include optional-at-root('::-moz-placeholder') {
@content;
}
@include optional-at-root(':-ms-input-placeholder') {
@content;
}
}
@mixin no_transform(){
-moz-transform: none;
-o-transform: none;
-webkit-transform: none;
transform: none;
filter: none;
-ms-filter: none;
}
@mixin ClearFix(){
.cf:before,
.cf:after {
content: " ";
display: table;
}
.cf:after {
clear: both;
}
}
/**
* Removes all Transitions, Transforms, and Animations;
*/
@mixin removeATT(){
-o-transition-property: none !important;
-moz-transition-property: none !important;
-ms-transition-property: none !important;
-webkit-transition-property: none !important;
transition-property: none !important;
-o-transform: none !important;
-moz-transform: none !important;
-ms-transform: none !important;
-webkit-transform: none !important;
transform: none !important;
-webkit-animation: none !important;
-moz-animation: none !important;
-o-animation: none !important;
-ms-animation: none !important;
animation: none !important;
}
以上是关于scss 混入的主要内容,如果未能解决你的问题,请参考以下文章