Generated by SassMeister.com.

input.scss

$buttoncolor: #AABBCC;
$border-radius: 20px;
$color-info: #ABABAB;

/*------------------------------------*\
    $BOTONES
\*------------------------------------*/
/*
 * Definimos los botones y sus variantes
 */


 /**
 * .btn es la clase principal para definir un botón
 */
.btn, .btn--primary {
	display: inline-block;
	line-height: 2.2;
	color: $buttoncolor;
	text-align: center;
	vertical-align: middle;
    font-size: fs(normal);
    text-transform: uppercase;
	white-space: nowrap;
    border: none;
    cursor: pointer;
	margin:0;
	padding-top:   0;
   	padding-bottom:0;
   	padding-right:1em;
   	padding-left: 1em;
    border-radius: $border-radius;
    text-decoration: none;
	/**
 	* Nadie quiere un botón con texto subrayado cuando
 	* hacemos hover.
 	*/

	&:hover {
		text-decoration: none;
        color: $buttoncolor;
	}
	&:active,
    &:focus{
        outline:none;
    }
    &:visited {
    color: $buttoncolor;
    text-decoration: none;
	}

    &__icon {
        font-size: .6em;
    }

    &.btn--info {
        background-color: $color-info;
    }
}

/**
* Botón de Info
*/
.btn--info {
    @extend .btn;
    color: $color-info;
    &:hover {
        color: $color-info;
    }
    &:visited {
        color: $color-info;
    }
}

output.css

@charset "UTF-8";
/*------------------------------------*\
    $BOTONES
\*------------------------------------*/
/*
 * Definimos los botones y sus variantes
 */
/**
* .btn es la clase principal para definir un botón
*/
.btn, .btn--info, .btn--primary {
  display: inline-block;
  line-height: 2.2;
  color: #AABBCC;
  text-align: center;
  vertical-align: middle;
  font-size: fs(normal);
  text-transform: uppercase;
  white-space: nowrap;
  border: none;
  cursor: pointer;
  margin: 0;
  padding-top: 0;
  padding-bottom: 0;
  padding-right: 1em;
  padding-left: 1em;
  border-radius: 20px;
  text-decoration: none;
  /**
  	* Nadie quiere un botón con texto subrayado cuando
  	* hacemos hover.
  	*/
}
.btn:hover, .btn--info:hover, .btn--primary:hover {
  text-decoration: none;
  color: #AABBCC;
}
.btn:active, .btn--info:active, .btn:focus, .btn--info:focus, .btn--primary:active, .btn--primary:focus {
  outline: none;
}
.btn:visited, .btn--info:visited, .btn--primary:visited {
  color: #AABBCC;
  text-decoration: none;
}
.btn__icon, .btn--primary__icon {
  font-size: 0.6em;
}
.btn.btn--info, .btn--info, .btn--primary.btn--info {
  background-color: #ABABAB;
}

/**
* Botón de Info
*/
.btn--info {
  color: #ABABAB;
}
.btn--info:hover {
  color: #ABABAB;
}
.btn--info:visited {
  color: #ABABAB;
}

settings.json

{
  "sass": {
    "compiler": "dart-sass/1.32.12",
    "extensions": {},
    "syntax": "SCSS",
    "outputStyle": "expanded"
  },
  "autoprefixer": false
}