@cycjimmy/sass-lib 2.3.0 → 3.0.1

package/README.md

@@ -23,7 +23,7 @@ $ yarn add @cycjimmy/sass-lib
 
 ## Usage
 ```scss
-@import "~@cycjimmy/sass-lib";
+@use '~@cycjimmy/sass-lib' as sass-lib;
 ```
 
 <!-- Links: -->

package/functions/index.scss

@@ -1,3 +1,5 @@
+@use 'sass:math';
+
 /**
  * strip units
  */
@@ -7,36 +9,36 @@
 
 
 /**
- * designPx2VW
+ * design-px2vw
  * $designDrawingLength
  * $designDrawingWidth
  *
  * Usage:
- * @function calcVW($designDrawingLength:0) {
- *   @return call(get_function("designPx2VW"), $designDrawingLength, $designDrawingWidth);
+ * @function calc-vw($designDrawingLength:0) {
+ *   @return call(get_function("design-px2vw"), $designDrawingLength, $designDrawingWidth);
  * }
  */
-@function designPx2VW($designDrawingLength:0, $designDrawingWidth:750) {
+@function design-px2vw($designDrawingLength:0, $designDrawingWidth:750) {
   @return strip-units($designDrawingLength) / strip-units($designDrawingWidth) * 100vw;
 }
 
 /**
- * designPx2Px
+ * design-px2px
  * $designDrawingLength
  * $designDrawingWidth
  *
  * Usage:
- * @function calcPX($designDrawingLength:0) {
+ * @function calc-px($designDrawingLength:0) {
  *   @return call(
- *     get_function("designPx2Px"),
+ *     get_function("design-px2px"),
  *     $designDrawingLength,
  *     $designDrawingWidth,
  *     $pcRootWidth,
  *   );
  * }
  */
-@function designPx2Px($designDrawingLength:0, $designDrawingWidth:750, $pcRootWidth:500) {
-  @return round(strip-units($designDrawingLength)
+@function design-px2px($designDrawingLength:0, $designDrawingWidth:750, $pcRootWidth:500) {
+  @return math.round(strip-units($designDrawingLength)
   / strip-units($designDrawingWidth)
   * strip-units($pcRootWidth)) * 1px;
 }

package/index.scss

@@ -1,6 +1,6 @@
 @charset "utf-8";
 
-@import "functions/index";
-@import "mixins/index";
-@import "placeholders/index";
+@forward "functions/index";
+@forward "mixins/index";
+@forward "placeholders/index";
 

package/mixins/index.scss

@@ -1,3 +1,5 @@
+@use 'sass:math';
+
 /**
  * Fix Align Center
  * $offset
@@ -7,7 +9,14 @@
  * $bottom
  * $left
  */
-@mixin fix-center($offset: -100%, $overwrite: false, $top: false, $right: false, $bottom: false, $left: false) {
+@mixin fix-center(
+  $offset: -100%,
+  $overwrite: false,
+  $top: false,
+  $right: false,
+  $bottom: false,
+  $left: false
+) {
   position: absolute;
   margin: auto;
   @if ($overwrite == false) {
@@ -56,8 +65,8 @@
 }
 
 @mixin square-wrap-vw($vw) {
-  $max: round($vw*16 /9 *100)/100;
-  $min: round($vw*3 /2 *100)/100;
+  $max: math.round($vw * 16 /9 * 100)/100;
+  $min: math.round($vw * 3 /2 * 100)/100;
 
   width: $vw + vw;
   height: $vw + vw;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cycjimmy/sass-lib",
-  "version": "2.3.0",
+  "version": "3.0.1",
   "description": "Personal collection of sass.",
   "type": "module",
   "main": "index.scss",

package/placeholders/{hidden-scrollbar.scss → _hiddenScrollbar.scss}

@@ -1,4 +1,4 @@
-%_hidden-scrollbar {
+%common-hidden-scrollbar {
   scrollbar-width: none;
 
   &::-webkit-scrollbar {
@@ -7,16 +7,16 @@
 }
 
 %hidden-scrollbar-x {
-  @extend %_hidden-scrollbar;
+  @extend %common-hidden-scrollbar;
   overflow-x: auto;
 }
 
 %hidden-scrollbar-y {
-  @extend %_hidden-scrollbar;
+  @extend %common-hidden-scrollbar;
   overflow-y: auto;
 }
 
 %hidden-scrollbar {
-  @extend %_hidden-scrollbar;
+  @extend %common-hidden-scrollbar;
   overflow: auto;
 }

package/placeholders/_layout.scss

@@ -0,0 +1,31 @@
+@use '../mixins/index' as mixins;
+@use 'position' as *;
+
+// full-container
+%full-container {
+  @extend %abs;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+}
+
+// flex-center
+%flex-center {
+  display: flex;
+  @include mixins.flex-box-align(center, center);
+}
+
+// clear-fix
+%clear-fix {
+  &::before,
+  &::after {
+    content: ' ';
+    display: table;
+  }
+
+  &::after {
+    clear: both;
+  }
+}
+

package/placeholders/{text-overflow.scss → _textOverflow.scss}

@@ -1,5 +1,5 @@
 // text-overflow-ellipsis
-%singleLine-text-overflow {
+%single-line-text-overflow {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;

package/placeholders/index.scss

@@ -1,10 +1,10 @@
-@import "position";
-@import "layout";
-@import "text-overflow";
-@import "hidden-scrollbar";
+@forward 'position';
+@forward 'layout';
+@forward 'textOverflow';
+@forward 'hiddenScrollbar';
 
-// gpu-speedUp
-%gpu-speedUp {
+// gpu-speed-up
+%gpu-speed-up {
   backface-visibility: hidden;
   perspective: 0;
   transform: translate3d(0, 0, 0);

package/reset/h5.scss

@@ -5,25 +5,29 @@
 
 body {
   overflow: hidden;
-  -webkit-user-select: none;
+  user-select: none;
   -webkit-touch-callout: none;
-  -webkit-text-size-adjust: 100%;
   -webkit-overflow-scrolling: touch;
 
-  -webkit-text-size-adjust: 100% !important;
-  text-size-adjust: 100% !important;
-  -moz-text-size-adjust: 100% !important;
+  text-size-adjust: 100%;
 }
 
-h1, h2, h3, h4, h5, h6 {
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
   font-size: inherit;
   font-weight: normal;
 }
 
-a, button, input {
+a,
+button,
+input {
   -webkit-tap-highlight-color: rgba(255, 0, 0, 0);
   outline: none;
-  border: none;
+  border: 0;
   touch-action: manipulation;
   cursor: pointer;
 }
@@ -33,7 +37,8 @@ a {
   color: inherit;
 }
 
-a, input {
+a,
+input {
   &:focus {
     outline: none;
   }

package/reset/special.scss

@@ -27,7 +27,7 @@ h6 {
 
 body {
   -webkit-touch-callout: none;
-  -webkit-text-size-adjust: 100%;
+  text-size-adjust: 100%;
   -webkit-overflow-scrolling: touch;
 }
 
@@ -46,7 +46,7 @@ button,
 input {
   -webkit-tap-highlight-color: rgba(255, 0, 0, 0);
   outline: none;
-  border: none;
+  border: 0;
   touch-action: manipulation;
 }
 

package/placeholders/layout.scss

@@ -1,31 +0,0 @@
-@import "../mixins/index";
-@import "position";
-
-// fullContainer
-%fullContainer {
-  @extend %abs;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 100%;
-}
-
-// flexCenter
-%flexCenter {
-  display: flex;
-  @include flex-box-align(center, center);
-}
-
-// clearFix
-%clearFix {
-  &::before,
-  &::after {
-    content: " ";
-    display: table;
-  }
-
-  &::after {
-    clear: both;
-  }
-}
-