Help with understanding sass


#1

<PLEASE USE THE FOLLOWING TEMPLATE TO HELP YOU CREATE A GREAT POST!>

<Below this line, add a link to the EXACT exercise that you are stuck at.>
https://www.codecademy.com/courses/learn-sass/lessons/functions-and-operations/exercises/if-vs-if?action=resume_content_item

<In what way does your code behave incorrectly? Include ALL error messages.>

Ive completed the codecademy classes for html and css and everything was easy-breezy. now im on to Sass. Nesting and variables i get. I get mixins but now i am noticing quite a bit of code or syntax that i haven’t come across before. Ive stumbled my way through Functions and Operations and while i know basically whats being done the code or syntax is still very foreign to me making it difficult to completely grasp.

Would anyone like to break down the syntax of the following Sass code for me? I undersatnd a lot of it but a fresh breakdown would help especially the line $i % 2 == 0

i really appreciate any help in this.

```

$total: 10; //Number of .ray divs in our html
$step: 360deg / $total; //Used to compute the hue based on color-wheel

.ray {
height: 30px;
}

@for $i from 1 through $total{
.ray:nth-child(#{$i}) {
background: adjust-hue(blue, $i * $step);
width: if($i % 2 == 0, 300px, 350px);
margin-left: if($i % 2 == 0, 0px, 50px);
}
}

<do not remove the three backticks above>

#2

Hello @dustindegase,

I will explain you about the whole code syntax as you requested:

$total: 10; //Number of .ray divs in our html
$step: 360deg / $total; //Used to compute the hue based on color-wheel

.ray {
  height: 30px;
}

@for $i from 1 through $total {
  .ray:nth-child(#{$i}){
    background: adjust-hue(blue, $i*$step);  
  	width: if($i%2 == 0, 300px, 350px);
  	margin-left: if($i%2 == 0, 0px, 50px);
  }
}

The firs line is a for loop that uses a variable called $i, which increases by one starting from 1 to $total (10). Each iteration executes the code block inside the curly braces { ...code here... }.

.ray:nth-child(#{$i}) selects the html element with class name "ray" and the nth-child(n) selector matches every element that is the nth child, regardless of type, of its parent. In other words, it selects the n element "ray". In this case, it takes as input the variable $i from the for loop.

Inside these inner curly braces, there is another code block that assign a background property to the div class "ray" and also set the width and margin-left based on conditional statement (if).

From the exercise instructions:

if( $condition, $value-if-true, $value-if-false);

That’s all. Hope you got it :smiley:


#3

Thank you Kingdarboja.

It is much clearer now. One thing i don’t understand yet is the equation for the if condition.

‘’‘margin-left: if($i%2 == 0, 300px, 350px);’’’

I understand there is a condition, followed by a true, or false.
the condition or equation above looks to me like $i is divided by 2 and equals 0.

I don’t understand how to tell if this is true or false.
Are these style of coding or syntax rules just for SCSS or are they learned from another language that i should study first?

like i said once i started the SASS lessons there are a lot of syntax used that i haven’t learned or even seen yet. how am i to know how they behave?

always thankful,
Dustin


#4

Yes, it is divided by 2 but the % operator (modulus) gives the remainder of the division of one number by another.

In this case, every time the modulus of $i % 2 is equal to zero, it will set the margin-left property to 300px, if it isn’t, will set to 350px.

The syntax rules are for SCSS but those things can be similar to other programming languages with different symbols. Regarding to general programming syntax, the purpose of these CC courses is to learn how a programming language works on his basis level (variables, types, object programming, loops), so feel free to ask on the forums like you do :smiley:


#5

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.