Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/kenoir/supersassious
Learning SASS, but with a silly name.
https://github.com/kenoir/supersassious
Last synced: 9 days ago
JSON representation
Learning SASS, but with a silly name.
- Host: GitHub
- URL: https://github.com/kenoir/supersassious
- Owner: kenoir
- Created: 2013-01-11T17:28:23.000Z (almost 12 years ago)
- Default Branch: master
- Last Pushed: 2013-01-13T19:22:34.000Z (almost 12 years ago)
- Last Synced: 2024-11-08T21:59:28.478Z (2 months ago)
- Language: Ruby
- Size: 121 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Supersassious
=============
Learning SASS by following the [tutorial](http://sass-lang.com/tutorial.html).
Nesting
-------
#header{
background-color:blue;
h1 {
font-size: 5em;
border: {
style: solid;
left: {
width: 10px + $extend;
color: red;
}
right: {
width: 20px;
color: red;
}
bottom: {
width: 10px;
color: lighten($awesome,10%);
}
}
}
}
### Parent References
.concluding{
a.important{
&:hover {
color: $awesome;
}
}
}
Variables
---------
$awesome: orange;
$extend: 10px;
Operations & Functions
--------------------------
color: lighten($awesome,10%);
Interpolation
-------------
$awesome-color: orange;
#content{
.introducing-#{$awesome-color}{
background-color: $awesome-color;
}
}
Mixins
------
@mixin spin-me-right-round-baby {
-webkit-transition-duration: 0.8s;
-moz-transition-duration: 0.8s;
-o-transition-duration: 0.8s;
transition-duration: 0.8s;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
-o-transition-property: -o-transform;
transition-property: transform;
&:hover {
transform:rotate(360deg);
-ms-transform:rotate(360deg); /* IE 9 */
-moz-transform:rotate(360deg); /* Firefox */
-webkit-transform:rotate(360deg); /* Safari and Chrome */
-o-transform:rotate(360deg); /* Opera */
}
}
.concluding{
@include spin-me-right-round-baby;
a.important{
&:hover {
color: $awesome-color;
}
}
}
Importing files (Using @import)
-------------------------------
@import "transitions";