@@ -5,23 +5,24 @@ A collection of [SASS](http://sass-lang.com/ "SASS") mixins for your project.
55
66* [ Animation] ( #animation )
77 * [ Keyframes] ( #keyframes )
8- * Background size
9- * Box shadow
10- * Opacity
11- * Clearfix
12- * Border radius
13- * Box-sizing
14- * Transition
15- * Columns
16- * Transform
17- * Default
18- * Translate
19- * Skew
20- * Scale
21- * Rotate
22- * Gradients
23- * Horizontal
24- * Vertical
8+ * [ Background size] ( #background-size )
9+ * [ Box shadow] ( #box-shadow )
10+ * [ Opacity] ( #opacity )
11+ * [ Clearfix] ( #clearfix )
12+ * [ Border radius] ( #border-radius )
13+ * [ Box-sizing] ( #box-sizing )
14+ * [ Transition] ( #transition )
15+ * [ Columns] ( #columns )
16+ * [ Transform] ( #transform )
17+ * [ Default] ( #default )
18+ * [ Translate] ( #translate )
19+ * [ Skew] ( #skew )
20+ * [ Scale] ( #scale )
21+ * [ Rotate] ( #rotate )
22+ * [ Transform-origin)(#transform-origin)
23+ * [ Gradients] ( #gradients )
24+ * [ Linear Horizontal] ( #linear-horizontal )
25+ * [ Linear Vertical] ( #linear-vertical )
2526
2627## Animation
2728
@@ -30,9 +31,111 @@ A collection of [SASS](http://sass-lang.com/ "SASS") mixins for your project.
3031```
3132
3233### Keyframes
34+
3335```
3436@include keyframes(animationOne) {
3537 from { background-color: red; }
3638 to { background-color: black; }
3739}
3840```
41+
42+ ## Background size
43+
44+ ```
45+ .class { @include background-size(auto 100%); }
46+ ```
47+
48+ ## Box shadow
49+
50+ ```
51+ .class { @include box-shadow(1px 1px 10px 10px #666, 2px 2px 5px 5px #ddd inset); }
52+ ```
53+
54+ ## Opacity
55+
56+ ```
57+ .class { @include opacity(0.5); }
58+ ```
59+
60+ ## Clearfix
61+
62+ ```
63+ .class { @include clearfix(); }
64+ ```
65+
66+ ## Border-radius
67+
68+ ```
69+ .class { @include border-radius(10px); }
70+ ```
71+
72+ ## Box-sizing
73+
74+ ```
75+ .class { @include box-sizing(); }
76+ ```
77+
78+ ## Transition
79+
80+ ```
81+ .class { @include transition(color 1s .5s ease-out); }
82+ ```
83+
84+ ## Columns
85+
86+ ```
87+ .class { @include columns(3, 150px, solid 1px red); }
88+ ```
89+
90+ ## Transform
91+
92+ ### Default
93+
94+ ```
95+ .class { @include transform(rotate(45deg); }
96+ ```
97+
98+ ### Translate
99+
100+ ```
101+ .class { @include translate(100px, 100px); }
102+ ```
103+
104+ ### Skew
105+
106+ ```
107+ .class { @include skew(10px, 10px); }
108+ ```
109+
110+ ### Scale
111+
112+ ```
113+ .class { @include scale(0.75); }
114+ ```
115+
116+ ### Rotate
117+
118+ ```
119+ .class { @include rotate(45deg); }
120+ ```
121+
122+ ### Transform-origin
123+
124+ ```
125+ .class { @include transform-origin(left, top); }
126+ ```
127+
128+ ## Gradients
129+
130+ ### Linear horizontal
131+
132+ ```
133+ .class { @include horizontal-gradient(#666, #000); }
134+ ```
135+
136+ ### Linear vertical
137+
138+ ```
139+ .class { @include vertical-gradient(#666, #000); }
140+ ```
141+
0 commit comments