use a lot more variables in Sass/LESS

[jonbcampos]

I've been playing with the project, great work so far.

Overriding the built in options is really painful as I have to have a second sheet that I've written out just to override all of the options within the framework.

Example:

.icon-float-away(){
  ... some stuff ...
  &:before,
  &:after {
    content: "\f055";
    position: absolute;
    right: 1em;

It would be great if you moved these options to a variables.less file (which is common in LESS projects) so they could be overridden. The update would look something like:

.icon-float-away(){
  ... some stuff ...
  &:before,
  &:after {
    content: @hvr-icon-float-away;
    position: absolute;
    right: @hvr-icon-right-position;

That way in a single file I just change:

@hvr-icon-right-position: 1em;

to

@hvr-icon-right-position: 2em; (or whatever value)

without a lot of work.

[IanLunn]

Unfortunately I will be removing LESS in the next major realease due to supporting both Sass and LESS is too much work. I will however consider adding more variables to the Sass version.

[HunterGraubard]

I just came here to request this. I'm sad to see this has been open for years. It's a pain to work with from SCSS as it is currently.

[IanLunn]

@jonbcampos @HunterGraubard Can this not be done by relying on the CSS cascade? What is the benfit to doing it via SCSS variables?

[HunterGraubard]

I have a project that's already heavily making use of SCSS, and I want to integrate Hover.css into it. For example, from a certain style in my code, I want to call the mixins directly and supply parameters to those mixins. I don't think this is quite what the OP was asking for, but it was requested in #93, and that was closed as a duplicate of this.

Hover.css's mixins do not take any parameters, and instead just rely on global variables. This means that in order to use the mixin with the parameters I want, I have to override the global variables before calling the mixin. It works, but it's a hack and feels very ugly/messy:

$primaryColor: blue !global;
$activeColor: red !global;
$mediumDuration: .5s !global;
@include radial-out();

Additionally, the lack of variables means that some things just can't be done in this way. For example, the sweep-to-right effect forces a color of white for the mouse-over effect. If I want to change it, I have to specifically overwrite it with the following:

@include sweep-to-right();
&:hover,
&:focus,
&:active {
    color: $my-color;
}

Which is a lot messier than simply passing a variable into a mixin.