sassyfication

KO | EN

gitlite — search

#react #ai #llm #go #deep-learning #nodejs #windows #awesome #kubernetes #pytorch #ios #openai #mcp #open-source

(★ 58)

💅Library with sass mixins to speed up your css workflow.

sassyfication 최신버젼 다운로드

최종 버전 다운로드 (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

<br>
<h3 align="center">
   <img width="500px" src="https://user-images.githubusercontent.com/30767528/55688316-64e1a300-5977-11e9-9e6d-280b6a41b545.png" alt="Logo">
   <h5 align="center">Write less, do more.</h5>
</h3>

Sassyfication is a SASS library with mixins which merge frequently combined css attributes into one.

### Setup

Install via npm:
```bash
$ npm install sassyfication
```
Install via yarn:

```bash
$ yarn add sassyfication
```

### Utilities
1. [position](#positiontop-right-bottom-left)
2. [pseudo](#pseudoposition-absolute-content-)
3. [font](#fontfont-weight-font-size-letter-spacing)
4. [white-space-overflow](#white-space-overflowwhite-space-nowrap-overflow-hidden-text-overflow-ellipsis)
5. [stroke](#strokestroke-stroke-width-stroke-linecap-stroke-dasharray-stroke-dashoffset)
6. [flex](#flexflex-direction-align-items-justify-content-flex-wrap)
7. [inline-flex](#inline-flexflex-direction-align-items-justify-content-flex-wrap)
8. [flex-self](#flex-selfalign-self-center-justify-self-align-self)
9. [animate](#animateprops)
10. [sequential-animation-delay](#sequential-animation-delaychild-count-multiplier-base)
11. [order](#orderlist)
12. [size](#sizewidth-auto-height-width)
13. [width](#widthwidth-min-width-max-width)
14. [height](#heightheight-min-height-max-height)
15. [fixed-width](#fixed-widthwidth)
16. [fixed-height](#fixed-heightheight)
17. [fixed-size](#fixed-sizewidth-auto-height-width)
18. [min-size](#min-sizewidth-auto-height-width)
19. [max-size](#max-sizewidth-auto-height-width)
19. [margin-between-\[v|h\]](#margin-between-hmargin)

There are also [breakpoints](#breakpoints), adapted from bootstrap.

#### position($top, $right, $bottom, $left)
Shorthand for `top`, `right`, `bottom`, `left` props.
```scss
// Example
.element { 
    @include position(10px, 20px, 30px, 40px);
}

// CSS Output
.element {
    top: 10px;
    right: 20px;
    bottom: 30px;
    left: 40px;
}
```

#### pseudo($position: absolute, $content: '') 
Simplifies pseudo-element initialization.
```scss
// Example
.element {
    @include pseudo();
}

// CSS Output
.element {
   position: absolute;
   content: '';
}
```

#### font($font-weight, $font-size, $letter-spacing) 
One-liner for font styling.
```scss
// Example
.element {
    @include font(600, 1.2em, 0.05em);
}

// CSS Output
.element {
    font-weight: 600;
    font-size: 1.2em;
    letter-spacing: 0.05em;
}
```

#### white-space-overflow($white-space: nowrap, $overflow: hidden, $text-overflow: ellipsis) 
One-liner for text related overflow handling.
```scss
// Example
.element {
    @include white-space-overflow();
}

// CSS Output
.element {
    overflow: hidden; 
    white-space: nowrap; 
    text-overflow: ellipsis;
}
```

#### stroke($stroke, $stroke-width, $stroke-linecap, $stroke-dasharray, $stroke-dashoffset) 
One-liner for SVG stroke styles.
```scss
// Example
.element {
    @include stroke(red, 2px, round, 123, 150);
}

// CSS Output
.element {
    stroke: red;
    stroke-width: 2px;
    stroke-linecap: round;
    stroke-dasharray: 123;
    stroke-dashoffset: 150;
}
```

#### flex($flex-direction, $align-items, $justify-content, $flex-wrap) 
One-liner for flex container.
```scss
// Example
.element {
    @include flex(column, center, flex-start, wrap);
}

// CSS Output
.element {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
}

```
#### inline-flex($flex-direction, $align-items, $justify-content, $flex-wrap) 
One-liner for inline-flex container.
```scss
// Example
.element {
    @include inline-flex(column, center, flex-start, wrap);
}

// CSS Output
.element {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
}
```

#### flex-self($align-self: center, $justify-self: $align-self) 
One-liner for flex-items position.
```scss
// Example
.element {
    @include flex-self(flex-start, flex-end);
}

// CSS Output
.element {
    align-self: flex-start;
    justify-self: flex-end;
}
```

#### animate($props) 
Props are used for the animation property, @content as keyframes. Generates a random id which is used as name.
```scss
// Example
.element {
    @include animate('1s ease-in-out forwards') {
        from {
            opacity: 0;
        }
        to {
            opacity: 1;
        }
    }
}

// CSS Output
@keyframes [random-id] {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.element {
   animation: [random-id] 1s ease-in-out forwards;
}
```

#### sequential-animation-delay($child-count, $multiplier, $base) 
Useful to animate a specific amount of childrens successive.
```scss
// Example
.element {
    @include sequential-animation-delay(3, 200ms, 1000ms);
}

// CSS Output
.element:nth-child(0) {
   animation-delay: 1000ms;
}

.element:nth-child(1) {
   animation-delay: 1200ms;
}

.element:nth-child(2) {
   animation-delay: 1400ms;
}
```

#### order($list) 
Receives a list with selectors and order-index for flex elements. Accepts a list or map with indecies.
```scss
// Example
.element {
    @include order(('.a', '.b', '.c'));
}

// CSS Output
.element .a {
   order: 1;
}

.element .b {
   order: 2;
}

.element .c {
   order: 3;
}

```

// Width and height
#### size($width: auto, $height: $width)
One-liner for width and height.
```scss
// Example
.element {
    @include size(20px, 30px);
}

// CSS Output
.element {
    height: 30px;
    width: 20px;
}
```
#### width($width, $min-width, $max-width) 
One-liner for max-, min- width (and width).
```scss
// Example
.element {
    @include width(10px, 5px, 20px);
}

// CSS Output
.element {
    width: 10px;
    min-width: 5px;
    max-width: 20px;
}
```
#### height($height, $min-height, $max-height) 
One-liner for max-, min- height (and height).
```scss
// Example
.element {
    @include height(10px, 5px, 20px);
}

// CSS Output
.element {
    height: 10px;
    min-height: 5px;
    max-height: 20px;
}
```
#### fixed-width($width) 
Applies the same value to max- and min-width.
```scss
// Example
.element {
    @include fixed-width(10px);
}

// CSS Output
.element {
    min-width: 10px;
    max-width: 10px;
}
```
#### fixed-height($height) 
Applies the same value to max- and min-height.
```scss
// Example
.element {
    @include fixed-height(10px);
}

// CSS Output
.element {
    min-height: 10px;
    max-height: 10px;
}
```

#### fixed-size($width: auto, $height: $width)
One-liner for fixed-width and fixed-height.
```scss
// Example
.element {
    @include fixed-size(20px, 40px);
}

// CSS Output
.element {
    min-width: 20px;
    max-width: 20px;
    min-height: 40px;
    max-height: 40px;
}
```

#### min-size($width: auto, $height: $width)
One-liner for minimum size.
```scss
// Example
.element {
    @include min-size(20px, 40px);
}

// CSS Output
.element {
    min-width: 20px;
    min-height: 40px;
}
```

#### max-size($width: auto, $height: $width)
One-liner for maximum size.
```scss
// Example
.element {
    @include max-size(20px, 40px);
}

// CSS Output
.element {
    max-width: 20px;
    max-height: 40px;
}
```

#### margin-between-h($margin)
Alternative to [flex-gap](https://caniuse.com/#feat=flexbox-gap).
There's also `margin-between-v` as vertical version.
```scss
// Example
.element {
    @include margin-between-h(5px);
}

// CSS Output
.element:not(:first-child):not(:last-child) {
    margin-left: 5px;
    margin-right: 5px;
}

.element:first-child:not(:last-child) {
    margin-right: 5px;
}

.element:last-child:not(:first-child) {
    margin-left: 5px;
}
```

### Breakpoints
```scss
@include mq-phones {} // Small devices (landscape phones, 576px and up)
@include mq-tablets {} // Medium devices (tablets, 768px and up)
@include mq-desktop {} // Large devices (desktops, 992px and up)
@include mq-large-desktop {} // Extra large devices (large desktops, 1200px and up)

sassyfication

sassyfication 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

sassyfication

sassyfication 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README