การสร้างหรืออ้างอิงตัวแปรแบบไดนามิกใน Sass

ฉันพยายามใช้การแก้ไขสตริงกับตัวแปรของฉันเพื่ออ้างอิงตัวแปรอื่น:

// Set up variable and mixin
$foo-baz: 20px;

@mixin do-this($bar) {
    width: $foo-#{$bar};
}

// Use mixin by passing 'baz' string as a param for use $foo-baz variable in the mixin
@include do-this('baz');

แต่เมื่อฉันทำสิ่งนี้ฉันได้รับข้อผิดพลาดต่อไปนี้:

ตัวแปรที่ไม่ได้กำหนด: "$ foo-"

Sass รองรับตัวแปรตัวแปรสไตล์ PHP หรือไม่

Sass ไม่อนุญาตให้สร้างหรือเข้าถึงตัวแปรแบบไดนามิก อย่างไรก็ตามคุณสามารถใช้รายการสำหรับลักษณะการทำงานที่คล้ายกัน

scss:

$list: 20px 30px 40px;    
@mixin get-from-list($index) {
  width: nth($list, $index);
}

$item-number: 2;
#smth {
  @include get-from-list($item-number);
}

สร้าง css:

#smth {
  width: 30px; 
}

• http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#lists
• http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html#list-functions

สิ่งนี้ทำได้จริงโดยใช้แผนที่ SASS แทนตัวแปร นี่คือตัวอย่างสั้น ๆ :

การอ้างอิงแบบไดนามิก:

$colors: (
  blue: #007dc6,
  blue-hover: #3da1e0
);

@mixin colorSet($colorName) {
    color: map-get($colors, $colorName);
    &:hover {
        color: map-get($colors, $colorName#{-hover});
    }
}
a {
    @include colorSet(blue);
}

ผลลัพธ์เป็น:

a { color:#007dc6 }
a:hover { color:#3da1e0 }

สร้างแบบไดนามิก:

@function addColorSet($colorName, $colorValue, $colorHoverValue: null) {
  $colorHoverValue: if($colorHoverValue == null, darken( $colorValue, 10% ), $colorHoverValue);

  $colors: map-merge($colors, (
    $colorName: $colorValue,
    $colorName#{-hover}: $colorHoverValue
  ));

  @return $colors;
}

@each $color in blue, red {
  @if not map-has-key($colors, $color) {
    $colors: addColorSet($color, $color);
  }
  a {
    &.#{$color} { @include colorSet($color); }
  }
}

ผลลัพธ์เป็น:

a.blue { color: #007dc6; }
a.blue:hover { color: #3da1e0; }
a.red { color: red; }
a.red:hover { color: #cc0000; }

เมื่อใดก็ตามที่ฉันต้องใช้ค่าตามเงื่อนไขฉันพึ่งพาฟังก์ชัน นี่คือตัวอย่างง่ายๆ

$foo: 2em;
$bar: 1.5em;

@function foo-or-bar($value) {
  @if $value == "foo" {
    @return $foo;
  }
  @else {
    @return $bar;
  }
}

@mixin do-this($thing) {
  width: foo-or-bar($thing);
}

นี่เป็นอีกทางเลือกหนึ่งหากคุณกำลังทำงานกับรางรถไฟและอาจอยู่ภายใต้สถานการณ์อื่น ๆ

หากคุณเพิ่ม. erb ต่อท้ายนามสกุลไฟล์ Rails จะประมวลผล erb บนไฟล์ก่อนที่จะส่งไปยังตัวแปล SASS สิ่งนี้ทำให้คุณมีโอกาสทำในสิ่งที่คุณต้องการใน Ruby ได้

ตัวอย่างเช่น: (File: foo.css.scss.erb)

// Set up variable and mixin
$foo-baz: 20px; // variable

<%
def do_this(bar)
  "width: $foo-#{bar};"
end
%>

#target {
  <%= do_this('baz') %>
}

ผลลัพธ์ใน scss ต่อไปนี้:

// Set up variable and mixin
$foo-baz: 20px; // variable

#target {
  width: $foo-baz;
}

ซึ่งของหยาบส่งผลให้เกิด css ต่อไปนี้:

#target {
  width: 20px;
}

ฉันเจอความจำเป็นในการอ้างอิงสีแบบไดนามิกเมื่อเร็ว ๆ นี้

ฉันมีไฟล์ _colours.scss สำหรับทุกโปรเจ็กต์ซึ่งฉันกำหนดสีทั้งหมดของฉันเพียงครั้งเดียวและอ้างอิงเป็นตัวแปรตลอด

ในไฟล์ _forms.scss ของฉันฉันต้องการตั้งค่ารูปแบบปุ่มสำหรับแต่ละสีที่มี มักจะเป็นงานที่น่าเบื่อ สิ่งนี้ช่วยให้ฉันหลีกเลี่ยงการเขียนโค้ดเดียวกันสำหรับแต่ละสีที่ต่างกัน

ข้อเสียเพียงอย่างเดียวคือคุณต้องระบุชื่อสีและค่าแต่ละสีก่อนที่จะเขียน css จริง

// $red, $blue - variables defined in _colours.scss
$colours: 
  'red' $red,
  'blue' $blue;

@each $name, $colour in $colours {
  .button.has-#{$name}-background-color:hover {
    background-color: lighten($colour, 15%);
  }
}

ในการสร้างตัวแปรแบบไดนามิกเป็นไปไม่ได้ใน SASS ณ ตอนนี้เนื่องจากคุณจะเพิ่ม / เชื่อมต่อตัวแปรอื่นที่ต้องแยกวิเคราะห์หนึ่งครั้งเมื่อคุณรันคำสั่ง sass

ทันทีที่คำสั่งทำงานคำสั่งจะแสดงข้อผิดพลาดสำหรับ Invalid CSS เนื่องจากตัวแปรที่ประกาศทั้งหมดของคุณจะตามมา

เมื่อเรียกใช้แล้วคุณจะไม่สามารถประกาศตัวแปรได้อีกทันที

เพื่อให้ทราบว่าฉันเข้าใจสิ่งนี้แล้วโปรดระบุว่าสิ่งต่อไปนี้ถูกต้องหรือไม่:

คุณต้องการประกาศตัวแปรโดยที่ส่วนถัดไป (word) เป็นแบบไดนามิก

สิ่งที่ต้องการ

$list: 100 200 300;

@each $n in $list {
    $font-$n: normal $n 12px/1 Arial;
}

// should result in something like

$font-100: normal 100 12px/1 Arial;
$font-200: normal 200 12px/1 Arial;
$font-300: normal 300 12px/1 Arial;

// So that we can use it as follows when needed

.span {
    font: $font-200;
    p {
       font: $font-100
    }
}

หากนี่คือสิ่งที่คุณต้องการฉันกลัว ณ ตอนนี้สิ่งนี้ไม่ได้รับอนุญาต