https://github.com/steelydylan/postcss-sample
https://github.com/steelydylan/postcss-sample
Last synced: 12 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/steelydylan/postcss-sample
- Owner: steelydylan
- Created: 2016-10-13T11:26:04.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2016-10-13T11:27:52.000Z (over 9 years ago)
- Last Synced: 2025-06-16T07:07:41.805Z (12 months ago)
- Language: CSS
- Size: 1.95 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
# PostCSS Sample
You can learn PostCSS from this sample
## postcss-next
You can use latest CSS syntax like variables
before
```css
:root {
--primary-color: #e86100;
--secondary-color: #2c3e50;
--base-fontsize: 1rem;
}
.h1 {
color: var(--primary-color);
}
```
after
```css
.h1 {
color: #e86100;
}
```
## postcss-nested
before
```css
.phone {
&Title {
width: 100px;
&.titleRight {
float: right;
.link {
color: $red;
}
}
}
}
```
after
```css
.phoneTitle {
width: 100px;
}
.phoneTitle.titleRight {
float: right;
}
.phoneTitle.titleRight .link {
color: #f00;
}
```
## postcss-mixins
before
```css
@define-mixin icon $name {
padding-left: 16px;
&::after {
content: "";
background-url: url(/icons/$(name).png);
}
}
.search {
@mixin icon search ;
}
```
after
```css
.search {
padding-left: 16px;
}
.search::after {
content: "";
background-url: url(/icons/search.png);
}
```
## postcss-simplevars
before
```css
$dir: top;
$blue: #056ef0;
$column: 200px;
.menu_link {
background: $blue;
width: $column;
}
.menu {
width: calc(4 * $column);
margin-$(dir): 10px;
}
```
after
```css
.menu_link {
background: #056ef0;
width: 200px;
}
.menu {
width: calc(4 * 200px);
margin-top: 10px;
}
```