With Sass' ability to use variables, one would hope there is a large set of logic functions we can do with them.
Is there a way to do something like this?
$someVar: someValue !default;
#switch $someVar
{
#case 'red':
.arbitrary-css here {}
#break;
#case 'green':
.arbitrary-css here {}
#break;
#case 'blue':
.arbitrary-css here {}
#break;
}
However, I can't find anything in the Sass reference about this.
No there isn't any supported switch statement in sass but if you only need to use the switch statement to tweak a variable, you can use sass maps in a switch statement sort of way.
Using SASS maps in place of a switch statement
$newVar: map-get((
case_1_test_name : case_1_return_value,
case_2_test_name : case_2_return_value,
), $testVar);
So here's an example:
$vehicle: car;
$vehicleSeating: map-get((
car : 4,
bus : 20,
), $vehicle);
//$vehicleSeating = 4
The above example translated into if/else statements:
$vehicle: car;
#if ($vehicle == 'car') {
$vehicleSeating: 4;
} #else if ($vehicle == 'bus'){
$vehicleSeating: 20;
}
//$vehicleSeating = 4
Sass doesn't support Switch Case.
Sass only support four control directives:
#if
#for
#each
#while
Related
I am working on an angular library and am trying to create a function that takes a color pallet and a name and returns a list so I can create CSS variables. Any help or ideas is appreciated!
$violets-palette: (
100: #e1cced,
200: #9064b3,
300: #6a408a,
400: #5d357e,
500: $violet,
600: #311a52,
700: #2d054c,
800: #28053d,
900: #1f0532
);
$reds-palette: (
50: #fee9e8,
100: #fbc8c6,
200: #f9a4a1,
300: #f77f7b,
400: #f5635e,
500: $precise-red,
600: #f1413c,
700: #ef3833,
800: #ed302b,
900: #ea211d
);
#function createVariables($palette, $name){
#each $key, $value in $palette {
#if $key != 'contrast' {
#if $key == 500 {
#return '--' + $name + ':' + #{$value};
} #else {
#return #{'--' + $name + '-' + $key} + ':' + #{$value};
}
}
}
}
:root{
//This would loop over the returned list
createVariables($reds-palette, 'precise-red');
}
I want it to add this to the style sheet...
--precise-red-50
--precise-red-100
--precise-red-200
--precise-red-300
--precise-red-400
--precise-red
--precise-red-600
--precise-red-700
--precise-red-800
--precise-red-900
Why your #function not works: With #return you end the function and #return's the result ... so your #function will stop on the first step in your loop.
So, if you really want to use a function first write the values to a map and return the map to a var.
But note: in SASS a #function is not the best choice to write code to css. It is more used to return a single value. If you would need a multiused solution use a #mixin (it is to write calculated code to the css file) or if it is a single task in your project a simple #each loop does the job as well.
One more thinking:
Only writing var names to css does not even helps without advising a value to it. So maybe you like to do:
:root {
--precise-red-50: #fee9e8;
--precise-red-100: #fbc8c6;
...
}
However. We had a very similar question here some days ago. Maybe you like to have a look ... It was about writing css color vars based on lists/maps similar to yours to css file. If with or without advising color to the css vars ... please adapt the code to your needs:
https://stackoverflow.com/a/66854088/9268485
Update: Additional Example
Here is another similar example from the last days. In this case the task was to write the color swatch build on a color direct to css vars. The shades had been calculated in same process:
https://stackoverflow.com/a/66850423/9268485
(If you are not confirm with Bootstrap colors and color maps here is a short overview to this example: https://getbootstrap.com/docs/5.0/customize/color/)
I have issue Operators % in Sass when i use a for loop
#for $i from 1 to 10 {
.colu-md-#{$i}{
width: #{$i} * 10%;
}
}
But it results into:
Error: Undefined operation "1 * 10%".
Has anyone ever seen this before?
Got syntax error. code is attached below. Hope this will be helpful for you
#for $i from 1 to 10 {
.colu-md-#{$i}{
width: #{$i * 10%};
}
}
Seems like I must have some syntax error with my function?
Defined as so:
#function v($i, $a: $ba) {
$ca: $i*$a;
$x: $r*(sin($ca) + $p*sin($q*$ca));
$y: $r*(cos($ca) - $p*cos($q*$ca));
$z: $r*sin(($q + 1)*$ca);
#return $x, $y, $z;
}
in my output style.css document I still see the function calls:
--v: v($i)
In this case, you need to use interpolation where you call your function:
.selector {
--v: #{v($i)};
}
.myclass {
position: absolute;
$positions: 0 1 2 3 4 5 6 7;
#each $position in $positions {
&.x#{$position} {
top: #{$position}%;
}
&.y#{$position} {
left: #{$position}%;
}
}
}
Did i make something wrong? VsCode tells me [scss] term expected aftr the % signs, can you tell me is it a bug or did i make a mistake?
That should work just fine:
#{$position}#{"%"}
UPDATE:
I think compiler recognizes % as start of placeholder selector (so it expects placeholder name after percent sign), it's required in this case that you declare "%" as string.
"Placeholder selectors" # sass-lang.com/documentation/file.SASS_REFERENCE.html
I have 2 xml files 1 with 115mb size and another with 34mb size.
Wiile reading file A there is 1 field called desc that relations it with file B where I retrieve the field id from file B where desc.file A is iqual to name.file B.
file A is already too big then I have to search inside file B and it takes a very long time to complete.
How could I speed up this proccess or what would be a better approch to do it ?
current code I am using:
#!/usr/bin/perl
use strict;
use warnings;
use XML::Simple qw(:strict XMLin);
my $npcs = XMLin('Client/client_npcs.xml', KeyAttr => { }, ForceArray => [ 'npc_client' ]);
my $strings = XMLin('Client/client_strings.xml', KeyAttr => { }, ForceArray => [ 'string' ]);
my ($nameid,$rank);
open (my $fh, '>>', 'Output/npc_templates.xml');
print $fh "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<npc_templates xmlns:xsi=\"http://www.w3.org/2001/XMLSchema-instance\" xsi:noNamespaceSchemaLocation=\"npcs.xsd\">\n";
foreach my $npc ( #{ $npcs->{npc_client} } ) {
if (defined $npc->{desc}) {
foreach my $string (#{$strings->{string}}) {
if (defined $string->{name} && $string->{name} =~ /$npc->{desc}/i) {
$nameid = $string->{id};
last;
}
}
} else {
$nameid = "";
}
if (defined $npc->{hpgauge_level} && $npc->{hpgauge_level} > 25 && $npc->{hpgauge_level} < 28) {
$rank = 'LEGENDARY';
} elsif (defined $npc->{hpgauge_level} && $npc->{hpgauge_level} > 21 && $npc->{hpgauge_level} < 23) {
$rank = 'HERO';
} elsif (defined $npc->{hpgauge_level} && $npc->{hpgauge_level} > 10 && $npc->{hpgauge_level} < 15) {
$rank = 'ELITE';
} elsif (defined $npc->{hpgauge_level} && $npc->{hpgauge_level} > 0 && $npc->{hpgauge_level} < 11) {
$rank = 'NORMAL';
} else {
$rank = $gauge;
}
print $fh qq|\t<npc_template npc_id="$npc->{id}" name="$npc->{name}" name_id="$nameid" height="$npc->{scale}" rank="$rank" tribe="$npc->{tribe}" race="$npc->{race_type}" hp_gauge="$npc->{hpgauge_level}"/>\n|;
}
print $fh "</<npc_templates>";
close($fh);
example of file A.xml:
<?xml version="1.0" encoding="utf-16"?>
<npc_clients>
<npc_client>
<id>200000</id>
<name>SkillZone</name>
<desc>STR_NPC_NO_NAME</desc>
<dir>Monster/Worm</dir>
<mesh>Worm</mesh>
<material>mat_mob_reptile</material>
<show_dmg_decal>0</show_dmg_decal>
<ui_type>general</ui_type>
<cursor_type>none</cursor_type>
<hide_path>0</hide_path>
<erect>1</erect>
<bound_radius>
<front>1.200000</front>
<side>3.456000</side>
<upper>3.000000</upper>
</bound_radius>
<scale>10</scale>
<weapon_scale>100</weapon_scale>
<altitude>0.000000</altitude>
<stare_angle>75.000000</stare_angle>
<stare_distance>20.000000</stare_distance>
<move_speed_normal_walk>0.000000</move_speed_normal_walk>
<art_org_move_speed_normal_walk>0.000000</art_org_move_speed_normal_walk>
<move_speed_normal_run>0.000000</move_speed_normal_run>
<move_speed_combat_run>0.000000</move_speed_combat_run>
<art_org_speed_combat_run>0.000000</art_org_speed_combat_run>
<in_time>0.100000</in_time>
<out_time>0.500000</out_time>
<neck_angle>90.000000</neck_angle>
<spine_angle>10.000000</spine_angle>
<ammo_bone>Bip01 Head</ammo_bone>
<ammo_fx>skill_stoneshard.stoneshard.ammo</ammo_fx>
<ammo_speed>50</ammo_speed>
<pushed_range>0.000000</pushed_range>
<hpgauge_level>3</hpgauge_level>
<magical_skill_boost>0</magical_skill_boost>
<attack_delay>2000</attack_delay>
<ai_name>SummonSkillArea</ai_name>
<tribe>General</tribe>
<pet_ai_name>Pet</pet_ai_name>
<sensory_range>15.000000</sensory_range>
</npc_client>
</npc_clients>
example of file B.xml:
<?xml version="1.0" encoding="utf-16"?>
<strings>
<string>
<id>350000</id>
<name>STR_NPC_NO_NAME</name>
<body> </body>
</string>
</strings>
Here is example of XML::Twig usage. The main advantage is that it is not holding whole file in memory, so processing is much faster. The code below is trying to emulate operation of script from question.
use XML::Twig;
my %strings = ();
XML::Twig->new(
twig_handlers => {
'strings/string' => sub {
$strings{ lc $_->first_child('name')->text }
= $_->first_child('id')->text
},
}
)->parsefile('B.xml');
print "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<npc_templates xmlns:xsi=\"http://www.w3.org/2001/XMLSchema-instance\" xsi:noNamespaceSchemaLocation=\"npcs.xsd\">\n";
XML::Twig->new(
twig_handlers => {
'npc_client' => sub {
my $nameid = eval { $strings{ lc $_->first_child('desc')->text } };
# calculate rank as needed
my $hpgauge_level = eval { $_->first_child('hpgauge_level')->text };
$rank = $hpgauge_level >= 28 ? 'ERROR'
: $hpgauge_level > 25 ? 'LEGENDARY'
: $hpgauge_level > 21 ? 'HERO'
: $hpgauge_level > 10 ? 'ELITE'
: $hpgauge_level > 0 ? 'NORMAL'
: $hpgauge_level;
my $npc_id = eval { $_->first_child('id')->text };
my $name = eval { $_->first_child('name')->text };
my $tribe = eval { $_->first_child('tribe')->text };
my $scale = eval { $_->first_child('scale')->text };
my $race_type = eval { $_->first_child('race_type')->text };
print
qq|\t<npc_template npc_id="$npc_id" name="$name" name_id="$nameid" height="$scale" rank="$rank" tribe="$tribe" race="$race_type" hp_gauge="$hpgauge_level"/>\n|;
$_->purge;
}
}
)->parsefile('A.xml');
print "</<npc_templates>";
Grab all the interesting 'desc' fields from file A and put them in a hash. You only have to parse it once, but if it still takes too long have a look at XML::Twig.
Parse file B. once and extract the stuff you need. Use the hash.
Looks like you only need parts of the xml files. XML::Twig can parse only the elements you are interested in and throw away the rest using the "twig_roots" parameter. XML::Simple is easier to get started with though..
Although I can't help you with the specifics of your Perl code, there are some general guidelines when dealing with large volumes of XML data. There are, broadly speaking, 2 kinds of XML APIs - DOM based and Stream based. Dom based API's (like XML DOM) will parse an entire XML document in to memory before the user-level API becomes "available", whereas with a stream based API (like SAX) the implementation doesn't need to parse the whole XML document. One benefit of Stream based parsers are that they typically use much less memory, as they don't need to hold the entire XML document in memory at once - this is obviously a good thing when dealing with large XML documents. Looking at the XML::Simple docs here, it's seems there may be SAX support available - have you tried this?
I'm not a perl guy, so take this with a grain of salt, but I see 2 problems:
The fact that you are iterating over all of the values in file B until you find the correct value for each element in file A is inefficient. Instead, you should be using some sort of map/dictionary for the values in file B.
It looks like you are parsing the both files in memory before you even start processing. File A would be better processed as a stream instead of loading the entire document into memory.