CSS Property as SASS Mixin Value

CSS property as SASS mixin value

If you want to use variables as property names you need to use string interpolation - #{$var}.

So this should work:

[class*="shift"] {
  $sft-o: 10px;
  @mixin shift_stp($val) {
    &[class*="_sml"]{ #{$val}: $sft-o; }
    &[class*="_mid"]{ #{$val}: $sft-o * 2; }
    &[class*="_big"]{ #{$val}: $sft-o * 3; }
  }
  &[class*="_m"]{
    @include shift_stp(margin);
  }
  &[class*="_p"]{
    @include shift_stp(padding);
  }
}

DEMO

Just a note: for your attribute selectors ... *="_m" will also apply to the ones that have _mid in them (see here) ... so maybe you should rethink this a little.

SASS: Returning set of different CSS properties from a mixin or function

I found a logic for this problem using mixins.

I have created a Mixin that accepts all the params passed as a list, hence declaration ends in ...
This solution also covers optional CSS properties which may not be included in all the classes but majority of them.

styles.scss

.blog-content {
    // for .destination
    @include text-properties("destination", "EpicRide", normal, 65px, $standard-black, none, 2.8px, '', '');
    // for .intro-title
    @include text-properties("intro-title", "Montserrat", 500, 14px, $standard-black, uppercase, 2.8px, 5px 5% 0, '');
    // for .place
    @include text-properties("place", "Montserrat", 500, 14px, $standard-black, uppercase, 2.8px, inherit, '');
    // for .description
    @include text-properties("description", "Lora", 400, 16px, $standard-light, none, 0, 0 5%, 20px);
}

_variables.scss

@mixin text-properties($args... ) {  // args has a list of arguments
    $class: nth($args, 1);  // nth is used to extract 'nth' argument's value
    $font-family: nth($args, 2);
    $font-weight: nth($args, 3);
    $font-size: nth($args, 4);
    $color: nth($args, 5);
    $text-transform: nth($args, 6);
    $letter-spacing: nth($args, 7);
    $padding: nth($args, 8);
    $margin-top: nth($args, 9);

    .#{$class} {  // create class dynamically. Mention the variable name inside #{} to fetch it's value
        font-family: $font-family;
        font-weight: $font-weight;
        font-size: $font-size;
        color: $color;
        text-transform: $text-transform;
        letter-spacing: $letter-spacing;
        @if $padding != '' {  // condition to ensure property is added only if valid param is passed.
            padding: $padding;
        }
        @if $margin-top != '' {
            margin-top: $margin-top;
        }
    }
}

Resultant CSS

.blog-content .destination {
  font-family: "EpicRide";
  font-weight: normal;
  font-size: 65px;
  color: rgba(0, 0, 0, 0.9);
  text-transform: none;
  letter-spacing: 2.8px;
}
.blog-content .intro-title {
  font-family: "Montserrat";
  font-weight: 500;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.9);
  text-transform: uppercase;
  letter-spacing: 2.8px;
  padding: 5px 5% 0;
}
.blog-content .place {
  font-family: "Montserrat";
  font-weight: 500;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.9);
  text-transform: uppercase;
  letter-spacing: 2.8px;
  padding: inherit;
}
.blog-content .description {
  font-family: "Lora";
  font-weight: 400;
  font-size: 16px;
  color: rgb(var(--LightColorRGB));
  text-transform: none;
  letter-spacing: 0;
  padding: 0 5%;
  margin-top: 20px;
}

This solution has one limitation though, an increase in the number of CSS properties would increase the mixin code.

I hope this will solve your issue. Suggestions/Comments are welcomed to improve this logic.

Using variables for CSS properties in Sass

You need to use interpolation (eg. #{$var}) on your variable in order for Sass to treat it as a CSS property. Without it, you're just performing variable assignment.

@mixin w_fluid($property_name, $w_element, $w_parent:16) {
    #{$property_name}: percentage(($w_element / $w_parent));
}

Passing css property:value as sass mixin argument

Sass does not allow the use of arbitrary strings in place of the property/value syntax.

For most mixins, the @content directive is your best bet for passing in styling information:

@mixin iphone_rules {
    @media screen and (max-height: 460px){
        @content;
    }
}

.mySelector {
    @include iphone_rules {
        margin-left:10px;
        padding:0px;
    }
}

Otherwise, styling information can be passed in as a mapping (or list of lists for Sass 3.2 and older):

@mixin iphone_rules($styles: ()) {
    @media screen and (max-height: 460px){
        @each $p, $v in $styles {
            #{$p}: $v;
        }
    }
}

.mySelector {
    margin-left:10px;
    padding:0px;

    @include iphone_rules(('margin-left': 20px, 'padding': 2px));
}

SASS function/mixins for property value

You can write functions like this:

@function border($alpha: 0.2)
  $border: 1px solid hsla(0, 0, 0, $alpha)
  @return $border

and apply them like any other sass/compass function:

border-right: border(0.2)

scss mixin for custom css properties

You need to interpolate the $cssProperty variable (so it becomes #{$cssProperty}, just like you have done with the $side variable. So your final code should be:

@mixin genericSidesStyles ($sides, $style, $cssProperty) {
  @if($sides == '') {
    #{$cssProperty}: $style;
  }
  @else {
    @each $cssProperty, $side in $sides {
      @if ($side == 'top' or $side == 'bottom' or $side == 'left' or $side == 'right' ) {
         #{$cssProperty}-#{$side}: $style;
       }
     }
  }
}

Sass - Mixins which create dynamic property and its valuse

You should use interpolation to concatenate the values instead of adding, you can try this:

@mixin setProperty($property,$value,$unit:null){

   #{$property} :#{$value}$unit;

}

When two distinct values are next to one another, Sass always adds a whitespace between them. With the interpolation it does not happen, Sass try to parse everything as an unquoted string.

Pass variable from SASS mixin to CSS Value

It might not be the best solution. But it'll solve your problem.
Try with the below code.

@mixin rotate( $name ) {
  animation-name: $name;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  
  @keyframes #{ $name } {
    100% {
      transform: #{ $name }#{"("}360deg#{")"};
    }
  }
}

.rotate-x {
  @include rotate( $name: rotateX );
}

---

Related Topics