Visual Studio custom snippet

This blog shows you how to create custom code snippets in Visual Studio.
Visual Studio custom snippet

Content
  1 Intro
  2 @function
  3 @mixin
  4 In use
    Links

Intro

In this example we're going to define a color palette and a mixin for defining the body and child tag.

@function

The function getColor($name) returns the color with matching name.

@mixin

The mixin is supposed to define the width of a content element on a website.
Mixin's are great to reuse code in many scenarios.
This file contains a color palette used to create matching colors on a site.

The function getColor($name) is used to return colors from map $colors in _Colors.scss
_Colors.scss
1 
$colors: ( Main: #9a2601, Light: #f2af53, Link: #a74829, Even: #f7f2e8, Odd: #ede3d0, Tech: #4cd00f );
2
3 
@function getColor($name) {
4 
    @return map-get($colors, $name);
5 
}
6 
                            
$colors: ( Main: #9a2601, Light: #f2af53, Link: #a74829, Even: #f7f2e8, Odd: #ede3d0, Tech: #4cd00f );

@function getColor($name) {
    @return map-get($colors, $name);
}

In use

In this example the mixin uses values from the function getColor($name) and the mixin is implemented in Index.scss.
The mixin bodyContent($width) supplies styling to any style who implements it.
_Mixin.scss
1 
@mixin bodyContent($width) {
2 
    width: 100%;
3 
    max-width: $width;
4 
    margin: auto;
5 
}
 
                            
@mixin bodyContent($width) {
    width: 100%;
    max-width: $width;
    margin: auto;
}

Comments

Name