SCSS

Question 1

What is sass/scss?

Answer 1

Syntactically Awesome Style Sheets - a superset of CSS

Sass code is transpiled to regular css

install sass package, can now do transpilation. Write sass code in .scss file, to transpile to .css file

Question 2

Variables example

Answer 2

$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
font: 100% $font-stack;
color: $primary-color;
}

Question 3

Nesting example

Answer 3

`
body{
background:green;

.container{
 border:1px solid red;
} } `

Question 4

What are mixins used for?

Answer 4

Basically like functions that generate a list of rules to apply wherever the mixin is used.

`
// defaults to DarkGray

@mixin theme($theme: DarkGray) {
background: $theme;
box-shadow: 0 0 1px rgba($theme, .25);
color: #fff;
}

.info {
@include theme;
}
.alert {
@include theme($theme: DarkRed);
}
.success {
@include theme($theme: DarkGreen);
}

`

Question 5

What are partials?

Answer 5

Create files that contain some SCSS code and import and apply it wherever it’s included.

Naming convention _something.scss

Any CSS code will be inserted where @import is used, and mixins/variables will become available for use.

`
// _base.scss
$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
font: 100% $font-stack;
color: $primary-color;
}

// styles.scss
@import ‘base’;

.inverse {
background-color: base.$primary-color;
color: white;
}

becomes

body {
font: 100% Helvetica, sans-serif;
color: #333;
}

.inverse {
background-color: #333;
color: white;
}

`