gabrielecanepa · April 29, 2020 01:52
diff --git a/mixins.scss b/mixins.scss
 // Useful Mixins

 @mixin shadow($x, $y, $blur, $color) {
  box-shadow: $x $y $blur $color;
 }

 @mixin animate($property: all, $duration: 1s, $easing: ease) {
  transition: $property $duration $easing;
 }

 @mixin links( $normal, $visited, $hover ) {
  &:visited {
    color: $visited;
  }
  &:hover, &:active, &:focus {
    color: $hover;
  }
 }
diff --git a/sass.md b/sass.md
diff --git a/snippets.scss b/snippets.scss
 .clearfix {
  &:before,
  &:after {
    content: "";
    display: table;
  }
 
  &:after { clear: both; }
 }
diff --git a/styles.scss b/styles.scss
 // SCSS comments (not visible in CSS)
 /* CSS comments (visible in CSS) */

 // Variables
 $color: black;

 p {
  color: $color;
 }

 // Nesting & Abbreviation
 aside {
  border: {
    width: 1px;
    style: solid;
    color: $color;
  }
 }

 nav {
  background: none;
  
  ul {
    list-style-type: none;
    
    a {
      color: $color;
      
      &:hover, 
      &:focus, 
      &:active {
        color: red;
      }
    }
  }
  
  body.blog & { // Skip default nesting: `body.blog nav` instead of `nav body.blog`
    background: green;
  }
 }

 // Extend/Inheritance
 .infobox {
  border: 1px solid #ccc;
  padding: 10px;
  color: $color;
 }

 .success {
  @extend .infobox;
  border-color: green;
 }

 // The % prefix creates rules that never get used on their own (use it ONLY to entend)
 %info {
  position: absolute;
 }

 .notice {
  @extend %info;
 }


 // Mixins
 @mixin outline {
  border: 1px solid black;
 }

 @mixin animate( $property, $duration, $easing ) {
  transition: $property $duration $easing;
 }

 @mixin default_animate( $property: all, $duration: 1s, $easing: ease ) { // Mixin with defaults
  transition: $property $duration $easing;
 }

 aside {
  border-radius: 10px;
  @include outline;
 }

 a {
  @include animate( all, 1s, linear );
 }

 nav a {
  @include default_animate( $duration: 3s ); // Use defaults with custom $duration
 }


 // Math: + - * / %
 .container {
  width: 600px / 960px * 100%;
 }

 // Functions
 $highlight: green;

 p {
  color: lighten( $highlight, 20% );
 }

 p {
  color: darken( $highlight, 10% );
 }

 p {
  color: fade-out( $highlight, 0.5 );
 }

 p {
  color: adjust-hue( $highlight, 90 ); // Usually between -360 degrees and 360 degrees.
 }

 p {
  color: red + blue; // Compiles to magenta.
 }

 // Loops
 $list: (orange, purple, teal);

 @each $item in $list {
  .#{$item} {
    background: $item;
  }
 }

 $total: 10;
 $step: 360deg / $total;

 @for $i from 1 through $total {
  .ray:nth-child(#{$i}){
    background: adjust-hue( blue, $i * $step );
  }
 }

 // If-else conditions
 p {
  margin-left: if ($i % 2 == 0, 0px, 50px);
 }

 // Import/embed (`.scss` files only)
 @import 'bootstrap' // N.B: you must have ./node_modules/.bin in your $PATH (check it with `echo $PATH` or add it to one of your shell profiles)
	// Useful Mixins

	@mixin shadow($x, $y, $blur, $color) {
	box-shadow: $x $y $blur $color;
	}

	@mixin animate($property: all, $duration: 1s, $easing: ease) {
	transition: $property $duration $easing;
	}

	@mixin links( $normal, $visited, $hover ) {
	&:visited {
	color: $visited;
	}
	&:hover, &:active, &:focus {
	color: $hover;
	}
	}
	.clearfix {
	&:before,
	&:after {
	content: "";
	display: table;
	}

	&:after { clear: both; }
	}
	// SCSS comments (not visible in CSS)
	/* CSS comments (visible in CSS) */

	// Variables
	$color: black;

	p {
	color: $color;
	}

	// Nesting & Abbreviation
	aside {
	border: {
	width: 1px;
	style: solid;
	color: $color;
	}
	}

	nav {
	background: none;

	ul {
	list-style-type: none;

	a {
	color: $color;

	&:hover,
	&:focus,
	&:active {
	color: red;
	}
	}
	}

	body.blog & { // Skip default nesting: `body.blog nav` instead of `nav body.blog`
	background: green;
	}
	}

	// Extend/Inheritance
	.infobox {
	border: 1px solid #ccc;
	padding: 10px;
	color: $color;
	}

	.success {
	@extend .infobox;
	border-color: green;
	}

	// The % prefix creates rules that never get used on their own (use it ONLY to entend)
	%info {
	position: absolute;
	}

	.notice {
	@extend %info;
	}


	// Mixins
	@mixin outline {
	border: 1px solid black;
	}

	@mixin animate( $property, $duration, $easing ) {
	transition: $property $duration $easing;
	}

	@mixin default_animate( $property: all, $duration: 1s, $easing: ease ) { // Mixin with defaults
	transition: $property $duration $easing;
	}

	aside {
	border-radius: 10px;
	@include outline;
	}

	a {
	@include animate( all, 1s, linear );
	}

	nav a {
	@include default_animate( $duration: 3s ); // Use defaults with custom $duration
	}


	// Math: + - * / %
	.container {
	width: 600px / 960px * 100%;
	}

	// Functions
	$highlight: green;

	p {
	color: lighten( $highlight, 20% );
	}

	p {
	color: darken( $highlight, 10% );
	}

	p {
	color: fade-out( $highlight, 0.5 );
	}

	p {
	color: adjust-hue( $highlight, 90 ); // Usually between -360 degrees and 360 degrees.
	}

	p {
	color: red + blue; // Compiles to magenta.
	}

	// Loops
	$list: (orange, purple, teal);

	@each $item in $list {
	.#{$item} {
	background: $item;
	}
	}

	$total: 10;
	$step: 360deg / $total;

	@for $i from 1 through $total {
	.ray:nth-child(#{$i}){
	background: adjust-hue( blue, $i * $step );
	}
	}

	// If-else conditions
	p {
	margin-left: if ($i % 2 == 0, 0px, 50px);
	}

	// Import/embed (`.scss` files only)
	@import 'bootstrap' // N.B: you must have ./node_modules/.bin in your $PATH (check it with `echo $PATH` or add it to one of your shell profiles)