))
Eps 31: SASS MixIn – Talking HTML
Archived series ("Redirect loop" status)
When?
This feed was archived on June 01, 2018 14:22 (
Why? Redirect loop status. We detected 2 or more feeds redirecting to each other.
What now? You might be able to find a more up-to-date version using the search function. This series will no longer be checked for updates. If you believe this to be in error, please check if the publisher's feed link below is valid and contact support to request the feed be restored or if you have any other concerns about this.
Manage episode 203442362 series 2239752
Content provided by Tom Norman. All podcast content including episodes, graphics, and podcast descriptions are uploaded and provided directly by Tom Norman or their podcast platform partner. If you believe someone is using your copyrighted work without your permission, you can follow the process outlined here https://player.fm/legal.
A mixin allows developers to create reusable CSS blocks. This helps avoiding writing repetitive code. Also allows to make quick changes without searching code for every instance.
@mixin image-rotate {
margin: 20px auto 0 auto;
-moz-transition: all 0.8s ease-in-out;
-webkit-transition: all 0.8s ease-in-out;
-o-transition: all 0.8s ease-in-out;
-ms-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
}
@mixin image-rotate-hover {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
img#norm {
@include image-rotate;
}
img#norm:hover{
@include image-rotate-hover;
}
A mixin can take Sass data values as arguments. These values are specified when you define the mixin and given when you @include the mixin. The arguments are then passed to the mixin as variables. Arguments are included in a comma separated list enclosed in parentheses after the mixin name.
@mixin headline ($color, $size) {
color: $color;
font-size: $size;
}
h1 {
@include headline(green, 12px);
}
h1 {
color: green;
font-size: 12px;
}
h2 {
@include headline(red, 10px);
}
h2 {
color: red;
font-size: 10px;
}
@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-ms-border-radius: $radius;
border-radius: $radius;
}
Compiling program & link (Koala)
Where to learn about SASS – http://sass-lang.com/
Codeacademy has a SASS class
@tommnorman
@tnpwdesign
TNPWDesign.com
WebDevPod.com
The post Eps 31: SASS MixIn – Talking HTML appeared first on Schaffen Creative - Make. Manage. Achieve..
38 episodes
Share
