Well, I have a problem with Sass function lighten(), this is my code:
#for $i from 1 through 4{
.par-#{$i}{
background: lighten(#08725D, #{$i}0%);
padding: 10px;
border-radius: 5px;
}
}
I think it's pretty obvious what I want to do, I just want to go through that variable and increment the lightening of the bg color (while I increment the number in the class), but I have this error in console:
error main.scss (Line 111: $amount: "10%" is not a number for `lighten')
I need help please.
$i contains a number. Keep using it as a number instead of using concatenation :
#for $i from 1 through 4{
.par-#{$i}{
background: lighten(#08725D, $i * 10);
padding: 10px;
border-radius: 5px;
}
}
Related
My code:
#for $j from 1 to 6 {
.text-#($j) { font-size: 15px * $j; }
}
doesn't run. I even changed it to be more similar to the answers formatting with "through" by trying:
#for $j from 1 through 5 {
.text-#($j) { font-size: 15px * $j; }
}
Neither of those run, I get invalid css errors.
Error: Invalid CSS after "...m 1 through 5 {": expected 1 selector or at-rule, was ".text-#($j) { font-"
on line 2:27 of /stdin
#for $j from 1 through 5 {
Then I check the solution (this is on freecodecamp), and it's this:
#for $j from 1 through 5 {
.text-#{$j} { font-size: 15px * $j; }
}
So... what the hell. It runs just find when I copy and paste the listed solution, even though by all I can see, it's identical to my code. Mine doesn't work, the other one does. Not joking, I have looked this over several times and see no difference, how could this be?
SASS uses #{$var} for declaring the variables so change that
FROM
.text-#($j)
TO
.text-#{$j}
the difference is braces
Note:
I'm new to web development and object oriented programming. I am brand new to SCSS and haven't yet grasped a solid understanding of the syntax. I have a basic understanding of how to use functions in SCSS.
Let me start off by defining the result I want to achieve.
_body.scss
body {
background-color: red;
}
Now I know if I wanted to obtain this result in Javascript I could:
Option 1: write a string of HTML code and replace the existing html tag.
Not going to code this, as this is a messy way of writing Javascript, but essentially using document.write() method.
Option 2: use the "setAttribute()" method
// assuming <head> and <body> are the only tags within <html>
var bodyTag = document.firstElementChild.lastElementChild;
bodyTag.setAttribute( "bgcolor", "red" );
I know there are additional ways to do this in Javascript, but for this example, I will focus on these two.
So I want to create a SCSS function that can return both the attribute and the value.
_body.scss ( Pseudocode string example )
#function makeAttribute( $attribute, $value )
{
#return $attribute + ":" + $value + ";";
}
body {
makeAttribute( background-color, red );
}
I have yet to find a built in function that addresses this ( similar to the "setAttribute()" method in Javascript ), or the string example above.
I know that functions can take: number, string, bool, color, list, map or null; but what I don't know is if an attribute fits into any of these value types ( for instance: string ).
I feel as if the article: Bringing Configuration Objects To Sass may be explaining what I am trying to do, but I'm having difficulty understanding this article ( so it may not be an explanation to a solution ).
My end goal is to create a function that would write the following css. I did not mention the browser support previously as it adds another layer of complexity that may or may not be easily explained.
body {
background-color: red;
-o-background-color: red;
-ms-background-color: red;
-moz-background-color: red;
-webkit-background-color: red;
}
i don't know if this have to be a function, i found it more logic use a mixin instead:
// Option 1
#mixin makeRule($value: red, $property: background-color) {
#{$property}: $value;
}
// Option 2:
#mixin makeRuleWithPrefixes($value: red, $property: background-color) {
#{-ms- + $property}: $value;
#{-o- + $property}: $value;
#{-moz- + $property}: $value;
#{-webkit- + $property}: $value;
#{$property}: $value;
}
/////////
body {
#include makeRule;
}
article {
#include makeRule(black);
}
p {
#include makeRule(2px solid blue, border)
}
span {
#include makeRuleWithPrefixes;
}
i changed the name, because is no right say - makeAttribute, when you are creating a cssRule ( selector + property name + property value ), well this is up to you ;)
ok the first,you need interpolation to use a variable as a property name.
The value is the first argument, so now you can use the default property, and just pass different values ( like the article :) )
or you can now set all the properties you want it, just pass the property as the second value ( like p )
body {
background-color: red;
}
article {
background-color: black;
}
p {
border: 2px solid blue;
}
span {
-ms-background-color: red;
-o-background-color: red;
-moz-background-color: red;
-webkit-background-color: red;
background-color: red;
}
I made the option two, because you ask it but i warn you, this is not a good approach. You could use a build tool ( webpack, gulp, grunt.. whatever ) than use a autoprefixer package that do this prefix automatically, this way is a pain because you have to be updating the #mixin eventually.
When i'm writing the following operations
#a: 2px
#variable: #a + 5;
.margin-style{
margin-left: #variable;
}
This above code compiles to
.margin-style{
margin-left: 2px + 5;
}
instead of
margin-left:7px;
What seems to be going wrong?
Using Bootstrap and Grunt
setting strictMath:false in the Gruntfile.js under the less compiler settings solved the issue
I am trying to code my own responsive grid system using SASS. Using this simple Tutorial I was able to make a simple grid.
Currently, I am calculating the widths of all the columns according to their media query using this code:
#media #{$breakpoint-medium} {
.wrapper {
width: 95%;
max-width: $grid-max-width;
}
#for $i from 1 through $grid-columns {
.col-#{$i} {
width: 100% / $grid-columns * $i;
}
}
}
Where $grid-columns = 12
This works well, however, I'd like to center a block of text that I have designated as 8-columns wide, so I need to push, or offset this column by 2 columns.
I'm new to SASS so I'm still getting my bearings with using math in my CSS and such, but how can I adapt this code so that I can make a similar class, "push-#" that will automatically know to push the content properly?
Thanks so much in advance!
It is essentially the same math, you are just applying margin instead of width.
#for $i from 1 through $grid-columns {
.push-#{$i} {
margin-left: 100% / $grid-columns * $i;
}
}
I'm wondering if there's a simple way to re use a mixin simply by comma separating the passed information?
Example, if I wanted to output css based on how many things are passed through the mixin.
MIXIN
#mixin generate($number...){
.item-#{$number} {#content}
}
INCLUDE
#include generate(1, 2){color:red;}
I'd like this to output:
.item-1 {color:red;}
.item-2 {color:red;}
Example 2
#include generate(1, 5, 6){color:red;}
Which would output:
.item-1 {color:red;}
.item-5 {color:red;}
.item-6 {color:red;}
This is a VERY simplified version of what I actually want, I don't care what the mixin looks like, or how it handles it, however I do want the include to look like this #include generate(1,2,6,5){color:red;}.
Thankyou!
Shannon
Basic usage
Use the #each loop.
#mixin generate($numbers...){
#each $number in $numbers {
.item-#{$number} {#content;}
}
}
#include generate(1, 2, 6);
Demo: http://sassbin.com/gist/5999585/
Advanced usage
You can use the #for loop to have both item and its index. Also, you can use a list of lists to pass multiple values for each element:
=generate($items...)
#for $i from 1 through length($items)
$item: nth($items, $i)
$offset: nth($item, 1)
$color: nth($item, 2)
.block-#{$i}
margin-left: $offset
background-color: $color
+generate(10 red, 20 green, 60 blue)
I've switched to the indented .sass syntax to get rid of curly braces and semicolons nuisance.
Demo: http://sassbin.com/gist/6007849/
Precaution
I hope that your example is synthetic. If you use it like that in production, you're doing it wrong! Use extends instead:
%item { color: red};
.item-1, .item-2, .item-6 {
#extend %item;
}
The resulting CSS will appear different (shorter but with same functionality):
.item-1, .item-2, .item-6 {
color: red;
}
Demo: http://sassbin.com/gist/5999603/