.caption {
@include master-text
font: {
style: italic;
size: 0.75em;
}
color: gray;
}
.caption
+master-text
font:
style: italic
size: 0.75em
color: gray
$main-color: #af0000
And then call it again anywhere using this notation:
background-color: $main-color
background-color: #af0000;
=body-text
font:
family: Helvetica, sans-serif
weight: 400
style: normal
size: 1em
color: $bodyColor
text-align: left
And then to call it in your code, use this:
body
+body-text
text-align: left
body {
font-family: “Helvetica”, sans-serif;
font-weight: 400;
font-style: normal;
font-size: 1em;
color: #000000; // or whatever $bodyColor is defined as
text-align: left;
}
=masterText
font:
family: Helvetica, sans-serif
color: #000
line-height: 2rem
h1, h2, h3, h4, h5, h6, p
+masterText
h1
color: red
font:
size: 2rem
weight: 800
//h2-p styles below this
nav {
position: fixed;
width: 100%;
height: 100px;
}
nav ul {
background-color: #000;
float: right;
}
nav ul li {
display: inline;
margin: 10px 25px;
}
nav ul li a:link {
color: #fff;
-webkit-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
}
nav ul li a:visited {
color: #fff;
}
nav ul li a:hover {
color: #ff0000;
}
nav
position: fixed
width: 100%
height: 100px
ul
background-color: #000
float: right
li
display: inline
margin: 10px 25px
a
&:link
color: #fff
transition: all 0.25s ease-in-out
&:visited
color: #fff
&:hover
color: #ff0000
Have a question about something in this article? You can receive help directly from the article author. Sign up for a free trial to get started.
Comments (0)