সাসে পরিবর্তনশীল ভেরিয়েবলগুলি তৈরি করা বা উল্লেখ করা

Question 1

আমি অন্য ভেরিয়েবলের রেফারেন্স দিতে আমার ভেরিয়েবলের স্ট্রিং ইন্টারপোলেশন ব্যবহার করার চেষ্টা করছি:

// 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');

তবে আমি যখন এটি করি তখন আমি নিম্নলিখিত ত্রুটিটি পাই:

অপরিজ্ঞাত পরিবর্তনশীল: "oo foo-"।

সাস কি পিএইচপি-স্টাইলের পরিবর্তনশীল ভেরিয়েবলগুলি সমর্থন করে?

Question 2

সাস ভেরিয়েবলগুলি তৈরি করতে বা গতিশীলভাবে অ্যাক্সেস করতে দেয় না। তবে, আপনি অনুরূপ আচরণের জন্য তালিকা ব্যবহার করতে পারেন।

scss:

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

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

সিএসএস উত্পন্ন:

#smth {
  width: 30px; 
}

Question 3

ভেরিয়েবলের পরিবর্তে 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; }

Question 4

যে কোনও সময় আমার শর্তসাপেক্ষ মান ব্যবহার করা দরকার, আমি ফাংশনগুলিতে ঝুঁকছি। এখানে একটি সহজ উদাহরণ।

$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);
}

Question 5

আপনি যদি রেলগুলির সাথে কাজ করছেন এবং সম্ভবত অন্যান্য পরিস্থিতিতে এটি ব্যবহার করছেন তবে এখানে আরেকটি বিকল্প রয়েছে।

আপনি যদি ফাইল এক্সটেনশনের শেষে .erb যুক্ত করেন, ব্যর্থতা SASS দোভাষীকে প্রেরণের আগে ফাইলটিতে erb প্রক্রিয়া করবে। এটি আপনাকে রুবিতে যা করতে চান তা করার সুযোগ দেয়।

উদাহরণস্বরূপ: (ফাইল: 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;
}

কোনটি মোটা, নিম্নলিখিত সিএসএসের ফলাফল:

#target {
  width: 20px;
}

Question 6

আমি সম্প্রতি একটি রঙকে ডায়নামিকভাবে উল্লেখ করার প্রয়োজনটি করেছি।

আমার কাছে প্রতিটি প্রকল্পের জন্য একটি _colours.scss ফাইল রয়েছে, যেখানে আমি আমার সমস্ত রঙ একবারে সংজ্ঞায়িত করি এবং তাদের জুড়ে চলক হিসাবে উল্লেখ করি।

আমার _forms.scss ফাইলটিতে আমি প্রতিটি রঙের জন্য বাটন শৈলী সেটআপ করতে চেয়েছিলাম। সাধারণত একটি ক্লান্তিকর কাজ। এটি আমাকে প্রতিটি ভিন্ন রঙের জন্য একই কোড লিখতে এড়াতে সহায়তা করেছিল।

একমাত্র ক্ষতি হ'ল আসল সিএসএস লেখার আগে আপনাকে প্রতিটি রঙের নাম এবং মান তালিকাভুক্ত করতে হবে।

// $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%);
  }
}

Question 7

ডায়নামিক ভেরিয়েবল তৈরি করা এখন পর্যন্ত SASS তে সম্ভব নয়, যেহেতু আপনি স্যাস কমান্ডটি চালানোর পরে আপনি একবারে আরও একটি ভার্স যুক্ত করতে / সংযোগ স্থাপন করবেন p

কমান্ডটি চালানোর সাথে সাথে এটি অবৈধ সিএসএসের জন্য একটি ত্রুটি ছুঁড়ে দেবে, কারণ আপনার সমস্ত ঘোষিত ভেরিয়েবলগুলি উত্তোলন অনুসরণ করবে।

একবার চালানোর পরে, আপনি উড়ে আবার ভেরিয়েবল ঘোষণা করতে পারবেন না

আমি এটি বুঝতে পেরেছি তা জানতে, নিম্নলিখিতটি সঠিক হলে দয়া করে বলুন:

আপনি পরেরটি ঘোষণা করতে চান যেখানে পরের অংশটি (শব্দ) গতিশীল

কিছুটা এইরকম

$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
    }
}

আপনি যদি এটি চান তবে আমি এখনই ভয় পাচ্ছি, এটি অনুমোদিত নয়