In my SCSS file I have this:
#for $i from 1 to 100 {
$percent : $i + '%';
[fxFlex='$percent'] {
flex: 1 1 $percent ;
}
}
I want 1%, then 2% etc but I get this. I wish to remove the double quotes and have $percent display as 1%, 2% not $percent:
[fxFlex=' $percent '] {
flex: 1 1 "1%";
}
[fxFlex=' $percent '] {
flex: 1 1 "2%";
}
You're almost there.
You need to use variable interpolation, meaning you have to write #{$percent} instead of $percent:
Interpolation can be used almost anywhere in a Sass stylesheet to embed the result of a SassScript expression into a chunk of CSS. Just wrap an expression in #{} in any of the following places:
Source: sass-lang
Second thing, you probably want to remove the quotes in the flex property. You can do it with the string function string.unquote(), but first you need to import it with the use keyword.
#use "sass:string";
#for $i from 1 to 100 {
$percent: $i + '%';
[fxFlex='#{$percent}'] {
flex: 1 1 string.unquote($percent);
}
}
Related
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'm trying to get a sass function going:
$times: 0.10 0.20 0.30 0.40 0.50 0.60 0.70 0.75 0.80 0.90;
#each $value in $times{
.is-hidden-#{$value}{
#include hide( $value + s );
}
}
The problem is this: somehow, it doesn't accept decimal numbers. It works perfectly with 1, 2, 3, etc. I even tried this:
$times: 10 20 30 40 50 60 70 80 90;
#each $value in $times{
.is-hidden-#{$value}{
#include hide( ($value / 100) + s );
}
}
But sass doesn't do anything with that last calculation there. He just ignores the '/ 100'. Is there some way I can pass decimal numbers through a function like this? The output would be this:
.is-hidden-0.1s{
}
.is-hidden-0.2s{
}
.is-hidden-0.3s{
}
etc....
Thanks!
--- EDIT ---
This is the hide mixin:
#mixin hide( $time ){
opacity: 0;
visibility: hidden;
#include transition( $time );
}
Your desired output is invalid CSS. From the CSS validator:
In CSS1, a class name could start with a digit (".55ft"), unless it was a dimension (".55in"). In CSS2, such classes are parsed as unknown dimensions (to allow for future additions of new units) To make "1s" a valid class, CSS2 requires the first digit to be escaped ".\31s" [1s]
There are many times where Sass will give you errors when you try to generate invalid CSS. To generate valid results, you need to compose the selector using integers and adding the escaped decimal point like this:
#for $i from 1 through 9 {
.is-hidden-0\.#{$i}s {
#include hide($i / 10 * 1s);
}
}
Here's a general way to escape decimal numbers for class names (replacing . with -)
#function strip-units ( $number ) {
#return $number / ( $number * 0 + 1 );
}
#function escape-number ( $value ) {
#if type-of( $value ) != 'number' {
#return $value;
}
$int: floor( strip-units( $value ) );
$fract: $value - $int;
#if ( $fract == 0 ) {
#return $int;
}
#while ( $fract != floor( $fract ) ) {
$fract: $fract * 10;
}
#return $int + '-' + $fract;
}
I have few file similar to below, and I am trying to do numeric profiling as mentioned in the image
>File Sample
attttttttttttttacgatgccgggggatgcggggaaatttccctctctctctcttcttctcgcgcgcg
aaaaaaaaaaaaaaagcgcggcggcgcggasasasasasasaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
I have to map each substring of size 2 and then map it to 33 value for different ptoperties and then add as per the window size of 5.
my %temp = (
aCount => {
aa =>2
}
cCount => {
aa => 0
}
);
My current implementation include as per below ,
while (<FILE>) {
my $line = $_;
chomp $line;
while ($line=~/(.{2})/og) {
$subStr = $1;
if (exists $temp{aCount}{$subStr}) {
push #{$temp{aCount_array}},$temp{aCount}{$subStr};
if (scalar(#{$temp{aCount_array}}) == $WINDOW_SIZE) {
my $sum = eval (join('+',#{$temp{aCount_array}}));
shift #{$temp{aCount_array}};
#Similar approach has been taken to other 33 rules
}
}
if (exists $temp{cCount}{$subStr}) {
#similar approach
}
$line =~s/.{1}//og;
}
}
is there any other approach to increase the speed of the overall process
Regular expressions are awesome, but they can be overkill when all you need are fixed width substrings. Alternatives are substr
$len = length($line);
for ($i=0; $i<$len; $i+=2) {
$subStr = substr($line,$i,2);
...
}
or unpack
foreach $subStr (unpack "(A2)*", $line) {
...
}
I don't know how much faster either of these will be than regular expressions, but I know how I would find out.