SIR

제가 사용하고 있는 scss library 파일 입니다. > 퍼블리셔팁

퍼블리셔팁

퍼블리싱과 관련된 유용한 정보를 공유하세요.
질문은 상단의 QA에서 해주시기 바랍니다.

제가 사용하고 있는 scss library 파일 입니다. 정보

CSS 제가 사용하고 있는 scss library 파일 입니다.

본문

scss library 파일 공유드립니다. mixin 으로 flexbox 많이 사용하고 animation, transition 등 이용할 때 사용합니다. 사용하지 않은 것까지 포함 시켜놔서 사용하지 않는거 삭제하시고 사용하면 될 거 같습니다.

 

@charset "utf-8";

$text-color: #333;
$point-color: #3b6ba5;
$point-text-color: #72a5d3;
$point-color-light-blue: #b1d3e3;

 

/* breakpoints */
$col-xs : 480px;
$col-sm : 768px;
$col-md : 992px;
$col-lg : 1280px;
$col-xl : 1500px;

 

/* 폰트 적용 */
@font-face {
    font-family: 'NanumSquare';
    src: url(../font/NanumSquareR.eot);
    src: url(../font/NanumSquareR.eot?#iefix) format('embedded-opentype'),
    url(../font/NanumSquareR.woff) format('woff'),
    url(../font/NanumSquareR.ttf) format('truetype');
}

 

//사용방법 참고 : http://zerosixthree.se/8-sass-mixins-you-must-have-in-your-toolbox/
@function calculateRem($size) {
    $remSize: $size / 16px;
    @return $remSize * 1rem;
}

@mixin font-size($size) {
    font-size: $size;
    font-size: calculateRem($size);
}

@mixin inline-block {
    display: inline-block;
    *zoom: 1;
    *display: inline;
}

@mixin clear-both {
    content: '';
    clear: both;
    display: block;
    height: 0;
}

@mixin clearfix {
    *zoom: 1;
    &:before, &:after {
        content: " ";
        display: table;
    }
    &:after {
        clear: both;
    }
}

@mixin ellipsis($max-width) {
    display: inline-block;
    max-width: $max-width;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@mixin hide-text {
    text-indent: -100%;
    white-space: nowrap;
    overflow: hidden;
    display: block;
}

@mixin visuallyhidden {
    margin: -1px;
    padding: 0;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip: rect(0, 0, 0, 0);
    position: absolute;
}

@mixin text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@mixin opacity($opacity) {
    opacity: $opacity;
    $opacity-ie: $opacity * 100;
    filter: alpha(opacity=$opacity-ie); //IE8
}

@mixin box-sizing($box-model) {
    -webkit-box-sizing: $box-model; // Safari <= 5
    -moz-box-sizing: $box-model; // Firefox <= 19
    box-sizing: $box-model;
}

@mixin bp-large {
    @media only screen and (max-width: 60em) {
        @content;
    }
}

@mixin bp-medium {
    @media only screen and (max-width: 40em) {
        @content;
    }
}

@mixin bp-small {
    @media only screen and (max-width: 30em) {
        @content;
    }
}

@mixin prefix($name, $value) {
    -webkit-#{$name}: $value;
    -moz-#{$name}: $value;
    -ms-#{$name}: $value;
    #{$name}: $value;
}

@mixin prefix-ie($name, $value) {
    -ms-#{$name}: $value;
    #{$name}: $value;
}

@mixin linear-gradient($angle, $color-stops...) {
    $_angle-with-vendor-prefix: "";
    $_angle: "";
    @if $angle == "to top" or $angle == "bottom" {
        $_angle-with-vendor-prefix: bottom;
        $_angle: to top;
    } @else if $angle == "to right" or $angle == "left" {
        $_angle-with-vendor-prefix: left;
        $_angle: to right;
    } @else if $angle == "to bottom" or $angle == "top" {
        $_angle-with-vendor-prefix: top;
        $_angle: to bottom;
    } @else if $angle == "to left" or $angle == "right" {
        $_angle-with-vendor-prefix: right;
        $_angle: to left;
    } @else if $angle == "to top right" or $angle == "bottom left" {
        $_angle-with-vendor-prefix: bottom left;
        $_angle: to top right;
    } @else if $angle == "to bottom right" or $angle == "top left" {
        $_angle-with-vendor-prefix: top left;
        $_angle: to bottom right;
    } @else if $angle == "to bottom left" or $angle == "top right" {
        $_angle-with-vendor-prefix: top right;
        $_angle: to bottom left;
    } @else if $angle == "to top left" or $angle == "bottom right" {
        $_angle-with-vendor-prefix: bottom right;
        $_angle: to top left;
    } @else {
        $_angle-with-vendor-prefix: $angle % 360;
        $_angle: (90 - $angle) % 360;
    }
    background: -webkit-linear-gradient($_angle-with-vendor-prefix, $color-stops);
    background: -moz-linear-gradient($_angle-with-vendor-prefix, $color-stops);
    background: -o-linear-gradient($_angle-with-vendor-prefix, $color-stops);
    background: linear-gradient($_angle, $color-stops);
}

@mixin box-shadow( $horiz : .5em , $vert : .5em , $blur : 0px , $spread : 0px , $color : #000000 ) {
    -webkit-box-shadow: $horiz $vert $blur $spread $color;
    -moz-box-shadow: $horiz $vert $blur $spread $color;
    box-shadow: $horiz $vert $blur $spread $color;
}

@mixin border-radius( $value: 3px ) {
    -webkit-border-radius: $value;
    -moz-border-radius: $value;
    border-radius: $value;

    // keeps background from busting out of border
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding;
    background-clip: padding-box;
}

@mixin border-radius( $value: 3px ) {
    -webkit-border-radius: $value;
    -moz-border-radius: $value;
    border-radius: $value;

    // keeps background from busting out of border
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding;
    background-clip: padding-box;
}

// @param functions : matrix(), translate(), scale(), rotate(), skew()

@mixin transform($type) {
    -webkit-transform: $type;
    -moz-transform: $type;
    -ms-transform: $type;
    transform: $type;
}

// Skew
@mixin skew ($x, $y) {
    @include transform(skew(#{$x}deg, #{$y}deg));
}

@mixin transform-style($type) {
    -webkit-transform-style: $type;
    -moz-transform-style: $type;
    -ms-transform-style: $type;
    transform-style: $type;
}

@mixin perspective($type) {
    -webkit-perspective: $type;
    -moz-perspective: $type;
    -ms-perspective: $type;
    perspective: $type;
}

@mixin matrix ($a, $b, $c, $d, $e, $f) {
    -moz-transform: matrix($a, $b, $c, $d, #{$e}px, #{$f}px);
    -o-transform: matrix($a, $b, $c, $d, $e, $f);
    -ms-transform: matrix($a, $b, $c, $d, $e, $f);
    -webkit-transform: matrix($a, $b, $c, $d, $e, $f);
    transform: matrix($a, $b, $c, $d, $e, $f);
}

//transform origin
@mixin transform-origin ($origin) {
    moz-transform-origin: $origin;
    -o-transform-origin: $origin;
    -ms-transform-origin: $origin;
    -webkit-transform-origin: $origin;
    transform-origin: $origin;
}

/*

@mixin transition($type) {
  -webkit-transition: $type;
  -moz-transition: $type;
  -ms-transition: $type;
  transition: $type;
}
*/


// Usage:   @include transition(width, height 0.3s ease-in-out);
// Output:  -webkit-transition(width 0.2s, height 0.3s ease-in-out);
//          transition(width 0.2s, height 0.3s ease-in-out);
//
// Pass in any number of transitions
@mixin transition($transitions...) {
    $unfoldedTransitions: ();
    @each $transition in $transitions {
        $unfoldedTransitions: append($unfoldedTransitions, unfoldTransition($transition), comma);
    }

    -webkit-transition: $unfoldedTransitions;
    transition: $unfoldedTransitions;
}

@function unfoldTransition ($transition) {
    // Default values
    $property: all;
    $duration: .2s;
    $easing: null; // Browser default is ease, which is what we want
    $delay: null; // Browser default is 0, which is what we want
    $defaultProperties: ($property, $duration, $easing, $delay);

    // Grab transition properties if they exist
    $unfoldedTransition: ();
    @for $i from 1 through length($defaultProperties) {
        $p: null;
        @if $i <= length($transition) {
            $p: nth($transition, $i)
        } @else {
            $p: nth($defaultProperties, $i)
        }
        $unfoldedTransition: append($unfoldedTransition, $p);
    }

    @return $unfoldedTransition;
}

@mixin keyframes($animation-name) {
    @-webkit-keyframes #{$animation-name} {
        @content;
    }
    @-moz-keyframes #{$animation-name} {
        @content;
    }
    @-ms-keyframes #{$animation-name} {
        @content;
    }
    @-o-keyframes #{$animation-name} {
        @content;
    }
    @keyframes #{$animation-name} {
        @content;
    }
}

@mixin animation($str) {
    -webkit-animation: #{$str};
    -moz-animation: #{$str};
    -ms-animation: #{$str};
    -o-animation: #{$str};
    animation: #{$str};
}

// Flexbox display
@mixin flexbox() {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}

@mixin inline-flex() {
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: -moz-inline-flex;
    display: -ms-inline-flexbox;
    display: inline-flex;
}
// The 'flex' shorthand
// - applies to: flex items
// <positive-number>, initial, auto, or none
@mixin flex($values) {
    -webkit-box-flex: $values;
    -moz-box-flex: $values;
    -webkit-flex: $values;
    -ms-flex: $values;
    flex: $values;
}

// Flex Flow Direction
// - applies to: flex containers
// row | row-reverse | column | column-reverse
@mixin flex-direction($direction) {
    -webkit-flex-direction: $direction;
    -moz-flex-direction: $direction;
    -ms-flex-direction: $direction;
    flex-direction: $direction;
}

// Flex Line Wrapping
// - applies to: flex containers
// nowrap | wrap | wrap-reverse
@mixin flex-wrap($wrap) {
    -webkit-flex-wrap: $wrap;
    -moz-flex-wrap: $wrap;
    -ms-flex-wrap: $wrap;
    flex-wrap: $wrap;
}

// Flex Direction and Wrap
// - applies to: flex containers
// <flex-direction> || <flex-wrap>
@mixin flex-flow($flow) {
    -webkit-flex-flow: $flow;
    -moz-flex-flow: $flow;
    -ms-flex-flow: $flow;
    flex-flow: $flow;
}

// Display Order
// - applies to: flex items
// <integer>
@mixin order($val) {
    -webkit-box-ordinal-group: $val;
    -moz-box-ordinal-group: $val;
    -ms-flex-order: $val;
    -webkit-order: $val;
    order: $val;
}

// Flex grow factor
// - applies to: flex items
// <number>
@mixin flex-grow($grow) {
    -webkit-flex-grow: $grow;
    -moz-flex-grow: $grow;
    -ms-flex-grow: $grow;
    flex-grow: $grow;
}

// Flex shrink
// - applies to: flex item shrink factor
// <number>
@mixin flex-shrink($shrink) {
    -webkit-flex-shrink: $shrink;
    -moz-flex-shrink: $shrink;
    -ms-flex-shrink: $shrink;
    flex-shrink: $shrink;
}

// Flex basis
// - the initial main size of the flex item
// - applies to: flex itemsnitial main size of the flex item
// <width>
@mixin flex-basis($width) {
    -webkit-flex-basis: $width;
    -moz-flex-basis: $width;
    -ms-flex-basis: $width;
    flex-basis: $width;
}

// Axis Alignment
// - applies to: flex containers
// flex-start | flex-end | center | space-between | space-around
@mixin justify-content($justify) {
    -webkit-justify-content: $justify;
    -moz-justify-content: $justify;
    -ms-justify-content: $justify;
    justify-content: $justify;
    -ms-flex-pack: $justify;
}

// Packing Flex Lines
// - applies to: multi-line flex containers
// flex-start | flex-end | center | space-between | space-around | stretch
@mixin align-content($align) {
    -webkit-align-content: $align;
    -moz-align-content: $align;
    -ms-align-content: $align;
    align-content: $align;
}

// Cross-axis Alignment
// - applies to: flex containers
// flex-start | flex-end | center | baseline | stretch
@mixin align-items($align) {
    -webkit-align-items: $align;
    -moz-align-items: $align;
    -ms-align-items: $align;
    align-items: $align;
}

// Cross-axis Alignment
// - applies to: flex items
// auto | flex-start | flex-end | center | baseline | stretch
@mixin align-self($align) {
    -webkit-align-self: $align;
    -moz-align-self: $align;
    -ms-align-self: $align;
    align-self: $align;
}

// grayscale      ex: filter: grayscale(100%);
// blur           ex: filter: blur(2px);
@mixin filter($filter-type,$filter-amount) {
    -webkit-filter: $filter-type+unquote('(#{$filter-amount})');
    -moz-filter: $filter-type+unquote('(#{$filter-amount})');
    -ms-filter: $filter-type+unquote('(#{$filter-amount})');
    -o-filter: $filter-type+unquote('(#{$filter-amount})');
    filter: $filter-type+unquote('(#{$filter-amount})');
}
 

추천2

댓글 전체

전체 1,214
퍼블리셔팁 내용 검색

회원로그인

커뮤니티 통합 안내 배너

진행중 포인트경매

  1. 참여8 회 시작20.12.02 04:36 종료20.12.09 04:36

(주)에스아이알소프트 (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 대표메일:admin@sir.kr
사업자등록번호:217-81-36347 대표:홍석명 통신판매업신고번호:2014-서울강남-02098호 개인정보보호책임자:이총

© SIRSOFT