https://github.com/casprwang/sass
https://github.com/casprwang/sass
Last synced: 7 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/casprwang/sass
- Owner: casprwang
- Created: 2016-11-04T13:01:36.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2016-11-24T21:05:24.000Z (almost 9 years ago)
- Last Synced: 2025-02-02T01:41:27.759Z (9 months ago)
- Language: CSS
- Size: 991 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# SASS
```sass
// if
p {
@if 1 + 1 == 2 { border: 1px solid; }
@if 5 < 3 { border: 2px dotted; }
@if null { border: 3px double; }
}
// if else
$type: monster;
p {
@if $type == ocean {
color: blue;
} @else if $type == matador {
color: red;
} @else if $type == monster {
color: green;
} @else {
color: black;
}
}
//for
@for $i from 1 through 3 {
.item-#{$i} { width: 2em * $i; }
}
//for each
@each $animal in puma, sea-slug, egret, salamander {
.#{$animal}-icon {
background-image: url('/images/#{$animal}.png');
}
}
//while
$i: 6;
@while $i > 0 {
.item-#{$i} { width: 2em * $i; }
$i: $i - 2;
}
// & = this(parent)
@mixin does-parent-exist {
@if &
&:hover {
color: red;
}
} @else {
a {
color: red;
}
}
}
```
nth($list, $n):
the nth() function in sass needs the position to starts at 1!!!
that's against with JS, little bit uncomfortable
```sass
// nav if it is in the header
nav {
header & {
background-color: darken($blue, 15%);
}
```
ampersand &
clearfix should be a minxin and inclue whenever you have a float opeartion