开发者

How to DRY Sass code using variables?

开发者 https://www.devze.com 2023-02-09 12:16 出处:网络
I have a design that uses colors to identify sections of the site. I have put a file with the color variables defined, since they can change and it is difficult to track them down through the CSS file

I have a design that uses colors to identify sections of the site. I have put a file with the color variables defined, since they can change and it is difficult to track them down through the CSS files.

$people: #D50000;
$galleries: #D500AA;
$projects: #D5BA00;
//etc...

The name of my classes matches those of the variables. For example, the navigation menu is something like:

<ul>
  <li class="people">People</div>
  <li class="galleries">Galleries</div>
  <li class="projects">Projects</div>
  <!-- etc... ->
</ul>

and I find myself writing SASS like

#nav {
  ul {
    li.people    { border-left: 5px solid $people;    }
    li.galleries { border-left: 5px solid $galleries; }
    li.projects  { border-left: 5px solid $projects;  }
  }
}

which I'd like to DRY up. I have tried to use mixins, but I don't know how to tell SASS to lookup a variable named after the argument I pass (variable indirection). I have something like:

@mixin menu-states($resource) {
  li.#{$resource} a {                     // This works
    border-left: 7px solid $#{$resource}; // But this doesn't...
  }
}

Do开发者_开发技巧es anybody have a suggestion on how to DRY this? Thanks.


this code works for me

@mixin test($resource: "red"){
    $updated: unquote($resource);
    li.#{$updated} a{
        border-left: 7px solid $updated;
    }
}


You cant do that, however you can pass in 2 variables, one for the class and another for the color to the mixin.

0

精彩评论

暂无评论...
验证码 换一张
取 消