Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
a precess production
//@mixin
//defines complex variables
@mixin shadow-original{
box-shadow: 1px 1px 0px #ddd;
text-shadow: 1px 1px 1px #000;
}
@mixin shadow($offset){
box-shadow: $offset $offset 0px #ddd;
text-shadow: $offset $offset $offset #000;
}
//@include
//calls/implements mixins
.box{
@include shadow(2px);
}
.bigger-box{
@include shadow(2px);
}
//@extend
.square{
width: 100px;
height: 100px;
background: blue;
}
.circle{
@extend .square;
border-radius: 100%;
}
.box {
box-shadow: 2px 2px 0px #dddddd;
text-shadow: 2px 2px 2px black;
}
.bigger-box {
box-shadow: 2px 2px 0px #dddddd;
text-shadow: 2px 2px 2px black;
}
.square, .circle {
width: 100px;
height: 100px;
background: blue;
}
.circle {
border-radius: 100%;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.