Sass

Question 1

Sass stands for…

Answer 1

Syntactically Awesome StyleSheets

Question 2

Sass to CSS is

Answer 2

a language extension

Question 3

what Sass does in a nutshell

Answer 3

adds features that aren’t available using basic CSS syntax

Question 4

Sass makes it easier for…

Answer 4

developers to simplify and maintain the style sheets for projects

Question 5

Sass is a…

Answer 5

preprocessor, it takes code written in Sass syntax and converts to basic CSS

Question 6

With Sass you can…

Answer 6

create variables, nest CSS rules into others, import other Sass files

creates more compact, easier to read code

Question 7

how many syntaxes available for Sass?

Answer 7

2:

• SCSS (sassy CSS)
• indented syntax or just Sass

Question 8

SCSS

Answer 8

extension of CSS synatx. every valid CSS stylesheet is a valid SCSS file with the same meaning.

have .scss extension

Question 9

Indented Sass

Answer 9

older syntax, uses indentation rather than brackets to indicate nesting of selectors,
newlines rather than semicolons to separate properties

have .sass extension

Question 10

in Sass, variables start with

Answer 10

$ followed by the variable name

Question 11

set style tag to use sass

Question 12

nesting in Sass

Answer 12

parent {

child {};
}

Question 13

a mixin in Sass is

Answer 13

a group of CSS declarations that can be reused throughout the stylesheet

Question 14

use case for mixin

Answer 14

the treatment of box-shadow by different browsers has to be handled by prefixes like -webkit or -moz

Question 15

implement mixin (box shadow example)

Answer 15

starts with @mixin then name (parameters optional)
{all the basic CSS code that you would have used}

@mixin box-shadow($x, $y, $blur, $c){ 
  -webkit-box-shadow: $x $y $blur $c;
  -moz-box-shadow: $x $y $blur $c;
  -ms-box-shadow: $x $y $blur $c;
  box-shadow: $x $y $blur $c;
}

Question 16

a mixin is called with

Answer 16

@include directive

div {
@include box-shadow(0px, 0px, 4px, #fff);
}

Question 17

add logic to style

Answer 17

@if, @else if, @else

@mixin text-effect($val) {
  @if $val == danger {
    color: red;
  }
  @else if $val == alert {
    color: yellow;
  }
  @else if $val == success {
    color: green;
  }
  @else {
    color: black;
  }
}

Question 18

create a Sass loop

Answer 18

@for

Question 19

@for is used 2 ways

Answer 19

start through end

start to end

Question 20

the main difference between start to end and start through end in @for loop is

Answer 20

start to end excludes the end number

start through end includes the end number

Question 21

syntax for @for loop (start through end)

Answer 21

@for $i from 1 through 12 {
.col-#{$i} { width: 100%/12 * $i; }
}

this is a powerful way to create a grid layout

Question 22

@each

Answer 22

loops over each item in a list or map.

On each iteration, the variable gets assigned to the current value from the list or map.

Question 23

@each example (assign color to blue, red, green) – using list

Answer 23

@each $color in blue, red, green {
.#{$color}-text {color: $color;}
}

Question 24

@each example (assign color to blue, red, green) – using map

Answer 24

$colors: (color1: blue, color2: red, color3: green);

@each $key, $color in $colors {
.#{$color}-text {color: $color;}
}

Question 25

@while example to create a grid of 12 columns

Answer 25

$x: 1; //seed the x variable
@while $x < 13 { // while x is less than 13
.col-#{$x} { width: 100%/12 * $x;} //same code as in @for
$x: $x + 1; // increment x
}

Question 26

Partials in Sass are

Answer 26

separate files that hold segments of CSS code. This is a great way to group similar code into a module to keep it organized.

Question 27

Names for partials start with

Answer 27

the underscore (_) character, which tells Sass it is a small segment of CSS and not to convert it into a CSS file.

Question 28

To bring the code in the partial into another Sass file,

Answer 28

use the @import directive.

if all your mixins are saved in a partial named “_mixins.scss”, and they are needed in the “main.scss” file, this is how to use them in the main file:

// In the main.scss file

@import ‘mixins’

Question 29

borrow the CSS rules from one element and build upon them in another with …

Answer 29

extend feature

Question 30

how to use extend

Answer 30

.new-class {
@extend .class; // note! no colon
// new rules
}