I'm writing a library and I'd like to style all buttons.
HTML
<div>
<p>Buttons</p>
<button>Button</button>
<button class="r1">Button</button>
</div>
<div>
<p>File inputs</p>
<input type="file" />
<input type="file" class="r1" />
</div>
SCSS
button,
input[type=file]::file-selector-button {
background: #81ecec;
border: 2px solid #00cec9;
&.r1{
background: red;
}
}
This code processes to:
button.r1,
input[type=file]::file-selector-button.r1 {
background: red;
}
[This is invalid and does not work]
Is there a mixin or method I can use so that I can place the classes on only the parent selector, without this getting out of hand? I intend to have multiple classes (primary, secondary, large, small) and I don't want to write:
button.r1,
input[type=file].r1::file-selector-button{
...
}
button.large,
input[type=file].large::file-selector-button{
...
}
button.small,
input[type=file].small::file-selector-button{
...
}
I can't figure out a good way of targeting the parent input[type="file"]
This codepen has the first example in it, and as it isn't valid CSS the background: red doesn't take effect:
https://codepen.io/EightArmsHQ/pen/VwxwPGM/139933ae274200149b84afdb726478c5?editors=1100
Attempt 1
At the moment I am using a mixin like so:
#mixin button{
background: var(--button-primary);
color: #fff;
text-decoration: none;
border: none;
display: inline-block;
padding: 4px 8px;
}
#mixin button-r1{
border-radius: 3px;
}
button,
.button,
input[type="submit"],
input[type="reset"]{
#include button;
&.r1{
#include button-r1;
}
}
input[type=file]{
&::file-selector-button{
#include button;
}
&.r1::file-selector-button{
#include button-r1;
}
}
The benefit is that I don't need to repeat the same styles over and over, however I feel like there must be a better way of creating a mixin that interpolates a class somehow.
Attempt 2
Using the classname as an argument works well, however I lose the ability to nest the rules, which is a shame and one of my favourite parts of SCSS.
#mixin buttonAndFileInputs($classname: "") {
button#{$classname},
.button#{$classname},
input[type="submit"]#{$classname},
input[type="reset"]#{$classname},
input[type="file"]#{$classname}::file-selector-button {
#content;
}
}
#include buttonAndFileInputs {
background: var(--button-primary);
color: #fff;
}
#include buttonAndFileInputs(".r1") {
border-radius: 3px;
}
I'm not 100% clear on what you're trying to do
But I think if you edit your codepen to this scss
button,
input[type=file] {
background: #81ecec;
border: 2px solid #00cec9;
&.r1{
background: red;
}
}
::file-selector-button {
background: inherit;
border: inherit;
}
that will get what you're looking for
Edit to add explanation:
This will make the file-selector-button follow the background and border properties of the input[type=file].
This means that the file-selector-button will match the rest of the input background.
Is there a keyword like currentcolor which allows us to get the color of a class in its default state?
For example, I'm trying to create a re-useable button style, and currentcolor keyword helps a lot until I try to create the :hovered state.
.outline-btn {
background-color: transparent;
border: 1px solid currentColor;
padding: 0.5em 1.5em;
}
.rounded-btn {
border-radius: 50px;
}
The default state looks the way we want and changing the color or the font-size would also adjust the rest of the properties.
But we want the :hovered state to invert the colors (white text and orange background in this case)
.outline-btn:hover, .outline-btn:active, .outline-btn:focus {
background-color: currentcolor;
color: white;
}
But since in this state the color becomes white, everything else also turns white.
Is there a way that we can achieve the behavior that we want without having to create multiple classes for the different button styles that we want?
Desired effect on hover:
Also I forgot to mention that I am using SCSS if that helps.
Thanks for your time :)
If you think about it, you're essentially wanting currentColor to act as a variable -- to hold a constant value. The upcoming CSS variables will help with this, but until they're better supported, we have Sass variables.
By defining the colors as variables you can write them out very verbosely and specifically, but only have to change the color in one place when needed.
$btn-color: red;
$btn-bg: transparent;
.outline-btn {
background-color: $btn-bg;
border: 1px solid $btn-color;
padding: 0.5em 1.5em;
color: $btn-outline-color;
&:hover,
&:active,
&:focus {
background-color: $btn-outline-color;
color: $btn-outline-bg;
}
}
You could go a step further and have those variables set to equal previously set variables you're using for the body/html color background, e.g., $bg-bg: $body-bg; $btn-color: $text-color;. I love currentColor as well and this isn't as clean as that, but it might be more appropriate in this case.
You can then build this out as a mixin as user6292372 noted. Something like:
#mixin buttonBuilder($color, $bg) {
background-color: $bg;
border: 1px solid $color;
color: $color;
&:hover {
background-color: $color;
color: $bg;
}
}
...
.outline-btn {
#include button-builder($btn-color, $btn-bg);
}
Then you can easily make multiple variants.
this can't be done with css only
if you use helpers like SCSS or Less you could make yourself a mixin where you only insert the color you want as a parameter.
but you would still have to make several classes (as many as you need different colors) but can reuse your mixin within like this (scss example):
#mixin invertHover($color) {
background-color: transparent;
border: 1px solid $color;
color: transparent;
&:hover {
background-color: $color;
border: 1px solid transparent;
color: $color;
}
}
.blue-box { #include invertHover('blue'); }
.black-box { #include invertHover('#000000'); }
Is there a way to change all .btn properties in Bootstrap? I have tried below ones, but still sometimes it shows the default blue color (say after clicking and removing the mouse etc). How can I change the entire theme altogether?
.btn-primary, .btn-primary:hover, .btn-primary:active, .btn-primary:visited {
background-color: #8064A2;
}
If you want to override any default properties in Bootstrap you have to make the properties as important.
.btn-primary, .btn-primary:hover, .btn-primary:active, .btn-primary:visited {
background-color: #8064A2 !important;
}
I hope this works for you.
2022 Update for Bootstrap 5
Bootstrap 5 has the same button-variant and button-outline-variant SASS mixins which can be used to customize the button color after bootstrap is imported...
/* import the Bootstrap */
#import "bootstrap";
/* ------- customize primary button color -------- */
$mynewcolor:#77cccc;
.btn-primary {
#include button-variant($mynewcolor, darken($mynewcolor, 7.5%), darken($mynewcolor, 10%), lighten($mynewcolor,5%), lighten($mynewcolor, 10%), darken($mynewcolor,30%));
}
.btn-outline-primary {
#include button-outline-variant($mynewcolor, #222222, lighten($mynewcolor,5%), $mynewcolor);
}
https://codeply.com/p/UNvB5hRsfF
2019 Update for Bootstrap 4
Now that Bootstrap 4 uses SASS, you can easily change the primary button color using the button-variant mixins:
$mynewcolor:#77cccc;
.btn-primary {
#include button-variant($mynewcolor, darken($mynewcolor, 7.5%), darken($mynewcolor, 10%), lighten($mynewcolor,5%), lighten($mynewcolor, 10%), darken($mynewcolor,30%));
}
.btn-outline-primary {
#include button-outline-variant($mynewcolor, #222222, lighten($mynewcolor,5%), $mynewcolor);
}
https://codeply.com/p/JnV3xDDiaH (SASS demo)
This SASS compiles into the following CSS...
.btn-primary {
color: #212529;
background-color: #7cc;
border-color: #5bc2c2
}
.btn-primary:hover {
color: #212529;
background-color: #52bebe;
border-color: #8ad3d3
}
.btn-primary:focus,
.btn-primary.focus {
box-shadow: 0 0 0 .2rem rgba(91, 194, 194, 0.5)
}
.btn-primary.disabled,
.btn-primary:disabled {
color: #212529;
background-color: #7cc;
border-color: #5bc2c2
}
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.show>.btn-primary.dropdown-toggle {
color: #212529;
background-color: #9cdada;
border-color: #2e7c7c
}
.btn-primary:not(:disabled):not(.disabled):active:focus,
.btn-primary:not(:disabled):not(.disabled).active:focus,
.show>.btn-primary.dropdown-toggle:focus {
box-shadow: 0 0 0 .2rem rgba(91, 194, 194, 0.5)
}
.btn-outline-primary {
color: #7cc;
background-color: transparent;
background-image: none;
border-color: #7cc
}
.btn-outline-primary:hover {
color: #222;
background-color: #8ad3d3;
border-color: #7cc
}
.btn-outline-primary:focus,
.btn-outline-primary.focus {
box-shadow: 0 0 0 .2rem rgba(119, 204, 204, 0.5)
}
.btn-outline-primary.disabled,
.btn-outline-primary:disabled {
color: #7cc;
background-color: transparent
}
.btn-outline-primary:not(:disabled):not(.disabled):active,
.btn-outline-primary:not(:disabled):not(.disabled).active,
.show>.btn-outline-primary.dropdown-toggle {
color: #212529;
background-color: #8ad3d3;
border-color: #7cc
}
.btn-outline-primary:not(:disabled):not(.disabled):active:focus,
.btn-outline-primary:not(:disabled):not(.disabled).active:focus,
.show>.btn-outline-primary.dropdown-toggle:focus {
box-shadow: 0 0 0 .2rem rgba(119, 204, 204, 0.5)
}
https://codeply.com/go/lD3tUE01lo (CSS demo)
To change the primary color for all classes see: Customizing Bootstrap CSS template and How to change the bootstrap primary color?
The easiest way to see which properties you need to override is to take a look at Bootstrap's source code, specifically the .button-variant mixin defined in mixins/buttons.less. You still need to override quite a lot of properties to get rid of all of the .btn-primary styling (e.g. :focus, disabled, usage in dropdowns etc).
A better way might be to:
Create your own customized version of Bootstrap using Bootstrap's online customization tool
Manually create your own color class, e.g. .btn-whatever
Use a LESS compiler and use the .button-variant mixin to create your own color class, e.g. .btn-whatever
I guess you forgot .btn-primary:focus property and comma after .btn-primaryYou also can use less and redefine some colors in variables.less fileWith this in mind your code will be look like this:
.btn-primary,
.btn-primary:hover,
.btn-primary:active,
.btn-primary:visited,
.btn-primary:focus {
background-color: #8064A2;
border-color: #8064A2;
}
Just create your own button on:
http://blog.koalite.com/bbg/
add the CSS at the end off your boottrap.min.css
Cheers
Remove the button color class like "btn-success" and put a custom class like "btn-custom" and write css for that class. That simply works for me.
HTML :
<button class="btn btn-block login " type="submit">Sign In</button>
CSS:
.login {
background-color: #0057fc;
color: white;
}
The simplest way is to:
intercept every button state
add !important to override the states
.btn-primary:hover,
.btn-primary:active,
.btn-primary:visited,
.btn-primary:focus {
background-color: black !important;
border-color: black !important;
}
OR the more practical UI way is to make the hover state of the button darker than the original state. Just use the CSS snippet below:
.btn-primary {
background-color: Blue !important;
border-color: Blue !important;
}
.btn-primary:hover,
.btn-primary:active,
.btn-primary:visited,
.btn-primary:focus {
background-color: DarkBlue !important;
border-color: DarkBlue !important;
}
You have missed one style ".btn-primary:active:focus" which causes that still during btn click default bootstrap color show up for a second.
This works in my code:
.btn-primary, .btn-primary:hover, .btn-primary:active, .btn-primary:visited, .btn-primary:focus, .btn-primary:active:focus {
background-color: #8064A2;}
Here's my flavor without the loss of hover. I personally like it better than the standard bootstrap transitioning.
.btn-primary,
.btn-primary:active,
.btn-primary:visited {
background-color: #8064A2 !important;
}
.btn-primary:hover {
background-color: #594671 !important;
transition: all 1s ease;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet" />
<button class="btn btn-primary">Hover me!</button>
I had run into the similar problem recently, and managed to fix it with adding classes
body .btn-primary {
background-color: #7bc143;
border-color: #7bc143;
color: #FFF; }
body .btn-primary:hover, body .btn-primary:focus {
border-color: #6fb03a;
background-color: #6fb03a;
color: #FFF; }
body .btn-primary:active, body .btn-primary:visited, body .btn-primary:active:focus, body .btn-primary:active:hover {
border-color: #639d34;
background-color: #639d34;
color: #FFF; }
Also pay attention to [disabled] and [disabled]:hover, if this class is used on input[type=submit]. Like this:
body .btn-primary[disabled], body .btn-primary[disabled]:hover {
background-color: #7bc143;
border-color: #7bc143; }
Adding a step-by-step guide to #Codeply-er's answer above for SASS/SCSS newbies like me.
Save btnCustom.scss.
/* import the necessary Bootstrap files */
#import 'bootstrap';
/* Define color */
$mynewcolor:#77cccc;
.btn-custom {
#include button-variant($mynewcolor, darken($mynewcolor, 7.5%), darken($mynewcolor, 10%), lighten($mynewcolor,5%), lighten($mynewcolor, 10%), darken($mynewcolor,30%));
}
.btn-outline-custom {
#include button-outline-variant($mynewcolor, #222222, lighten($mynewcolor,5%), $mynewcolor);
}
Download a SASS compiler such as Koala so that SCSS file above can be compiled to CSS.
Clone the Bootstrap github repo because the compiler needs the button-variant mixins somewhere.
Explicitly import bootstrap functions by creating a _bootstrap.scss file as below. This will allow the compiler to access the Bootstrap functions and variables.
#import "bootstrap/scss/functions";
#import "bootstrap/scss/variables";
#import "bootstrap/scss/mixins";
#import "bootstrap/scss/root";
#import "bootstrap/scss/reboot";
#import "bootstrap/scss/type";
#import "bootstrap/scss/images";
#import "bootstrap/scss/grid";
#import "bootstrap/scss/tables";
#import "bootstrap/scss/forms";
#import "bootstrap/scss/buttons";
#import "bootstrap/scss/utilities";
Compile btnCustom.scss with the previously downloaded compiler to css.
A lot of complex and lengthy CSS here when all you need is this if you want to cover the whole button with one color including the button border:
.btn-primary, .btn-primary:hover, .btn-primary:active, .btn-primary:visited {
background-color: #D64B8A !important;
border-color: #D64B8A !important;
}
You can add custom colors using bootstrap theming in your config file for example variables.scss and make sure you import that file before bootstrap when compiling.
$theme-colors: (
"whatever": #900
);
Now you can do .btn-whatever
I think using !important is not a very wise option. It may cause for many other issues specially when making the site responsive. So, my understanding is that, the best way to do this to use custom button CSS class with .btn bootstrap class. .btn is the base style class for bootstrap button. So, keep that as the layout, we can change other styles using our custom css class.
One more extra thing I want to mention here. Some people are trying to remove blue outline from the buttons. It's not a good idea because that accessibility issue when using keyboard. Change it's color using outline-color: instead.
I am not the OP of this answer but it helped me so:
I wanted to change the color of the next/previous buttons of the bootstrap carousel on my homepage.
Solution:
Copy the selector names from bootstrap.css and move them to your own style.css (with your own prefrences..) :
.carousel-control-prev-icon,
.carousel-control-next-icon {
height: 100px;
width: 100px;
outline: black;
background-size: 100%, 100%;
border-radius: 50%;
border: 1px solid black;
background-image: none;
}
.carousel-control-next-icon:after
{
content: '>';
font-size: 55px;
color: red;
}
.carousel-control-prev-icon:after {
content: '<';
font-size: 55px;
color: red;
}
Here is my participation for the "outline" button:
Replace #8e5b5b with your color and #b3a7a7 by your color but usually more bright.
.btn-outline-custom{
color: #8e5b5b;
border-color: #8e5b5b;
}
.btn-outline-custom:focus{
box-shadow: 0 0 0 0.2rem #b3a7a7;
-webkit-box-shadow: 0 0 0 0.2rem #b3a7a7;
outline: 0;
}
.btn-outline-custom:hover,
.btn-outline-custom:active{
color: #fff;
background-color: #8e5b5b;
border-color: #8e5b5b;
}
As of Bootstrap 5, the right way to do this is to simply override the $primary theme colour:
Simply add the following to your Bootstrap overrides file (ie: could be named 'Core.scss' for example:
//
// Bootstrap
//
// overrides
$primary: /*new colour*/orange;
Here is the official docs: https://getbootstrap.com/docs/5.0/customize/sass/#modify-map
I’ve got a website that’s using a few different ‘main’ colors. The general HTML layout stays the same, only the colors change depending on the content.
I was wondering if I could set a color variable depending on the CSS selector. This way I can theme my website with a few variables and let Sass fill in the colors.
For example:
$color-1: #444;
$color-2: #555;
$color-3: #666;
$color-4: #777;
body.class-1 {
color-default: $color-1;
color-main: $color-2;
}
body.class-2 {
color-default: $color-3;
color-main: $color-4;
}
/* content CSS */
.content {
background: $color-default;
color: $color-main;
}
I was thinking of using a mixin for this, but I was wondering if there’s a better way to do this—with a function maybe? I’m not that great with Sass, so any help would be appreciated.
I think a mixin is the answer. (As I wrote, variables won’t work.)
#mixin content($color-default, $color-main) {
background: $color-default;
color: $color-main;
}
body.class-1 {
#include content(#444, #555);
}
body.class-2 {
#include content(#666, #777);
}
That SCSS compiles to this CSS:
body.class-1 {
background: #444444;
color: #555555; }
body.class-2 {
background: #666666;
color: #777777; }
If you wanted to group the color values together in your SCSS file, you could use variables in conjunction with the mixin:
$color-1: #444;
$color-2: #555;
$color-3: #666;
$color-4: #777;
body.class-1 {
#include content($color-1, $color-2);
}
body.class-2 {
#include content($color-3, $color-4);
}
as sass documentation explain nicely (https://sass-lang.com/documentation/variables):
Sass variables are all compiled away by Sass. CSS variables are included in the CSS output.
CSS variables can have different values for different elements, but Sass variables only have one value at a time.
Sass variables are imperative, which means if you use a variable and then change its value, the earlier use will stay the same. CSS variables are declarative, which means if you change the value, it’ll affect both earlier uses and later uses.
We may take advantage of that using a combination of sass and css variables to achieve what you want:
//theme colors
$red-cosmo: #e01019;
$green-cosmo: #00c398;
$primary-color: var(--primary-color);
body{
--primary-color: #{$red-cosmo};
}
body.univers-ride{
--primary-color: #{$green-cosmo};
}
So when I call my sass variable $primary-color, it will print as my css variable "var(--primary-color)" that will expand as $green-cosmo only if my body has the "univers-ride" class else it will be $red-cosmo the default color.
If you really want to get hacky you could also define your different color schemes in a single variable like $scheme1: class1 #333 #444, where the first value is always the name, and that is followed by all the colors in that scheme.
You can then use #each:
// Define your schemes with a name and colors
$scheme1: class1 #444 #555;
$scheme2: class2 #666 #777;
$scheme3: class4 #888 #999;
// Here are your color schemes
$schemes: $scheme1 $scheme2 $scheme3;
#each $scheme in $schemes {
// Here are the rules specific to the colors in the theme
body.#{nth($scheme, 1)} .content {
background-color: nth($scheme, 2);
color: nth($scheme, 3);
}
}
This will compile to:
body.class1 .content {
background-color: #444444;
color: #555555; }
body.class2 .content {
background-color: #666666;
color: #777777; }
body.class4 .content {
background-color: #888888;
color: #999999; }
Obviously if you don't want to combine body.class1 and .content in your selectors, you could just specify a mixin content($main, $default) and call it inside the #each using nth just like in the above code, but the point is you don't have to write out a rule for each of your classes.
EDIT There are lots of interesting answers on Creating or referencing variables dynamically in Sass and Merge string and variable to a variable with SASS.
You can also create a mixing that use the ampersand parent selector. http://codepen.io/juhov/pen/gbmbWJ
#mixin color {
body.blue & {
background: blue;
}
body.yellow & {
background: yellow;
}
}
UPDATE: its 2017 and variables does works!
#mixin word_font($page) {
#font-face {
font-family: p#{$page};
src: url('../../static/fonts/ttf/#{$page}.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
.p#{$page} {
font-family: p#{$page};
}
}
// Loop and define css classes
#for $i from 1 through 604 {
#include word_font($i);
}
If you don't want to use a variable for each color, you can use one variable for all kinds of colors. In the mixin you can choose the right color with nth. For instance, if you write the index of the color as 1, then you get the first color in the color variable.
$colors: #444, #555, #666, #777;
#mixin content($color-default-num, $color-main-num) {
background: nth($colors, $color-default-num);
color: nth($colors, $color-main-num);
}
body.class-1 {
#include content(1, 2);
}
For me the definite answer to my problem was creating a map of maps and loopig through them as follows:
$pallettes: (
light-theme: (
container-color: red,
inner-color: blue,
),
dark-theme: (
container-color: black,
inner-color: gray,
),
);
#each $pallette, $content in $pallettes {
.main.#{$pallette} {
background-color: map-get($content, container-color);
.inner-div {
background-color: map-get($content, inner-color);
}
}
}
You can simply override your scss variables inside of the class wrapper:
$color1: red;
$color2: yellow;
header { background: $color1; }
.override-class {
$color1: green;
header { background: $color1; }
}
Seems to work for me.
Is there a way to add scope to sass variables?
I want to be able to attach a class to my body element. The class will refer to a set of colours that the rest of the stylesheets can access.
I have tried:
#mixin theme_one{
$color: #000;
}
.theme_one{
#include theme_one;
}
and
.theme_one{
$color: #000;
}
I've just come across the same issue myself. I wanted to have different colour themes for different sections of my site.
Using a mixin seems like the best way to go. It's nicely DRY, and easy to use. The trick is not setting your colours in your main styles blocks, but rather using only the mixin for this.
I've set up the theme colours as variables at the top so they can be edited nicely, and I've set them as lists so that multiple values can be passed without hordes of variable being defined.
So:
// Variable Definitions
$defaultColor: black white grey;
$color2: blue green brown;
$color3: red white blue;
#mixin colorSet($color: $defaultColor) {
$link: nth($color, 1);
$border: nth($color, 2);
$background: nth($color, 3);
border-color: $border;
background-color: $background;
.column {
border-color: lighten($border, 10%);
}
a {
color: $link;
&:hover {
color: darken($link, 15%);
}
}
}
// Default colours
body {
#include colorSet();
}
// Scoped colours
.my-theme-3 {
#include colorSet($color3);
}
.my-theme-2 {
#include colorSet($color2);
}
Will produce something like this:
body {
border-color: white;
background-color: grey; }
body .column {
border-color: white; }
body a {
color: black; }
body a:hover {
color: black; }
.my-theme-3 {
border-color: white;
background-color: blue; }
.my-theme-3 .column {
border-color: white; }
.my-theme-3 a {
color: red; }
.my-theme-3 a:hover {
color: #b30000; }
.my-theme-2 {
border-color: green;
background-color: brown; }
.my-theme-2 .column {
border-color: #00b300; }
.my-theme-2 a {
color: blue; }
.my-theme-2 a:hover {
color: #0000b3; }
Edit: Updated to use default mixin values.
In your case no need to use mixin, If you have set of many styles then use mixin,
ie. if you have
#mixin theme_one{
$color: #000;
height: 50px;
}
then use Mixin
otherwise for single property use only variable
$color: #fff;
.some_class01{
color: $color;
background: $color;
}
.some_class22{
border-color: $color;
}
IMP: Variable should assign at the top of your code, it means don't use it after/below where you assigned it :)
Not sure if this is what you are looking for. It looks like you may have tried something similar to this,
which should probably work. (it may just be a matter of using !default)
Your body tag with a class on it..
<body class="theme_one">
</body>
Sass variables defined in stylesheet..
//THEME ONE VARIABLES
.theme_one{
$borderColor:#333 !default;
$fontColor:#999 !default;
}
//THEME TWO VARIABLES
.theme_two{
$borderColor:#CCC !default;
$fontColor:#000 !default;
}
Pre-existing CSS which will be overwritten depending on which class is used on the body tag.
h1.someheader {
color:$fontColor;
border-bottom:1px solid;
border-color:$borderColor;
}
Otherwise you could maybe try something like this. It looks like you may have tried something similar, however there seems to be an error with your mixin ... see note below.
//mixin used to set variables for properties
#mixin themeOne($fontColor,$borderColor) {
color:$fontColor;
border-color:$borderColor;
}
#include themeOne(#000,#CCC);
Pre-existing CSS
h1.someheader {
color:$fontColor
border-color:$borderColor;
border-bottom:1px solid;
}
Also note in your mixin example you are using $color:#000; ... This won't be interpreited properly as it should be color:#000; You can't use variables as selectors
unless you do something like #{$color}:#000;
I haven't quite tested this yet, so some things might need to be adjusted. If this doesn't solve your problem I hope it at least gives you some ideas.