h1{
font-size: 20px;
}
/* Medium Sizes */
@media only-screen and (min-width:500px){
h1{
font-size: 30px;
}
}
/* Large Sizes */
@media only-screen and (min-width:800px){
h1{
font-size: 40px;
}
}
h1{
font-size: 20px;
@media only-screen and (min-width: 500px){
font-size: 30px;
}
@media only-screen and (min-width: 800px){
font-size: 40px;
}
}
$breakpoints: (
'medium': 500px,
'large': 800px
) !default;
@mixin respond-to($breakpoint) {
@if map-has-key($breakpoints, $breakpoint) {
@media only screen and (min-width: map-get($breakpoints, $breakpoint)) {
@content;
}
}
@else {
@warn "Unfortunately, no value could be retrieved from `#{$breakpoint}`. "
+ "Available breakpoints are: #{map-keys($breakpoints)}.";
}
}
h1{
font-size: 20px;
@include respond-to('medium'){
font-size: 30px;
}
@include respond-to('large'){
font-size: 40px;
}
}
^ Borrowed from CSS-Tricks Resource (many similar variations of breakpoint mixins exist)
This keeps your SCSS selectors DRY. If you were to look for a certain class or div, you would find all the styles for it in a single place, instead of finding it multiple times in media query range.
@mixin title-font($title-font-size: 12px, $title-font-color: orange){
font-family: "Open Sans", sans-serif;
font-style: italic;
color: $title-font-color;
font-size: $title-font-size;
line-height: $title-font-size*1.5;
}
h1.feature{
@include title-font(32px, green);
}
h2.feature-subtitle{
@include title-font(22px, purple);
}
@mixin contact-card(){
border-radius: 3px;
box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.45);
background-color: #FFFFFF;
}
.list-of-cards-layout .contact-card{
@include contact-card;
border: 1px solid red;
}
.single-card-layout .contact-photo{
@include contact-card;
border: 1px solid green;
}
$primary-color: #727340
h1.feature{
color: lighten($primary-color, 10%)
}
$primary-color: #727340
h2.feature{
color: darken($primary-color, 10%)
}
Makes the color specified lighter by the percentage stated.
Makes the color specified darker by the percentage stated.
Look up more functions! I don't know anymore :/
h1{
font-family: "Helvetica Neue", sans-serif;
color: $primary-color;
&.feature{
color: darken($primary-color, 10%)
}
}
h1{
font-family: "Helvetica Neue", sans-serif;
color: $primary-color;
}
h1.feature{
color: darken($primary-color, 10%)
}
h1{
font-family: "Helvetica Neue", sans-serif;
color: $primary-color;
& .feature{
color: darken($primary-color, 10%)
}
}
h1{
font-family: "Helvetica Neue", sans-serif;
color: $primary-color;
}
h1 .feature{
color: darken($primary-color, 10%)
}
This Slide is VERY DIFFERENT. Can you spot the difference?
Without a space, we are targeting the h1 that ALSO has the class .feature.
<h1 class="feature">
Target Me!
</h1>
<h1>
<span class="feature">Target Me!</span>
</h1>
With a space, we are targeting the h1 that has an element somewhere INSIDE of it, with the class .feature.
h1{
font-family: "Helvetica Neue", sans-serif;
color: $primary-color;
& .feature{
color: darken($primary-color, 10%)
}
}
h1{
font-family: "Helvetica Neue", sans-serif;
color: $primary-color;
&.feature{
color: darken($primary-color, 10%)
}
}
a{
font-family: "Helvetica Neue", sans-serif;
color: $primary-color;
&:hover{
color: darken($primary-color, 10%)
}
}
a{
font-family: "Helvetica Neue", sans-serif;
color: $primary-color;
}
a:hover{
color: darken($primary-color, 10%)
}
& can also be used to target pseudo-selectors, such as hover or focus states, or :before and :after.
.fancy{
color: #FF0000;
.green-theme &{
color: #00FF00;
}
}
.fancy{
color: #FF0000;
}
.green-theme .fancy{
color: #00F;
}
& can also be used to specify an item that has a parent element of a certain selector.
.fancy{
color: #FF0000;
.green-theme &{
color: #00FF00;
}
}
.fancy{
color: #FF0000;
}
.green-theme .fancy{
color: #00F;
}
& is especially useful if the child selector is nested very deep inside the parent element.
The above scss will apply to either of the html examples below.
<body class="green-theme">
<h1>
<a href="#">
<span class="fancy">Hello There!</span>
</a>
</h1>
</body>
<h1 class="green-theme">
<span class="fancy">Hello There!</span>
</h1>