SASS
Exercises 1
1.Explain how traditional CSS and Preprocessed CSS workflows are different.
Answer:
CSS and SASS compile to the same CSS but we must go through an extra step to with SASS. We need to convert the SASS to CSS in order to get the variables and other SASS functions to work.
2. Explain why variables are useful. You may refer to the example code given above.
Answer:
Variables are useful because they allow us to change one value and it will update all those values in the style sheet, this is useful for many applications. Also we don’t have to remember long hex numbers for color values like #ef453ed. Instead we could remember $red much easier.
3.Write a @mixin (like the box-shadow mixin in the example). Some you may like to try are: A mixin that adds a vendor prefix, a mixin that adds a fixed margin and padding, or a mixin that adds border properties.
Answer:
@mixin margin-padding {
margin: 0 auto;
padding: 10px;
}
Exercises 2
1.Install Sass in your computer, remember to install Ruby if it is not already installed. .
Answer:
N/A
2. Familiarize yourself with the Sass command. Run sass -h and read the command help.
Answer:
N/A
3.Pick the SCSS Sass example seen above and write it in a file named example.scss. Run the command sass example.scss and examine the output. Run the same command with other output styles (using the -t option as in: sass -t expanded example.scss) and examine the output again. Feel free to try further edits to the example.scss file and see the results.
Answer:
N/A
Exercises 3
1.Use the –watch option to watch for changes in your SCSS files. Make some changes in those files and see how the CSS files are regenerated. .
Answer:
N/A
2. Combine the –watch option with the -t option and examine the resulting CSS files.
Answer:
N/A
3.Combine the –watch option with the -l option and examine the resulting CSS files. You can experiment with other options too.
Answer:
N/A
Exercises 4
1.Write one .scss file of your own for the following features: variables.scss, nesting.scss, mixins.scss, inheritance.scss, operators.scss. Each file should contain an example of the feature.
Answer:
_variables.scss
$dark-red: #911111;
$Roboto-font: 'Roboto', sans-serif;
.message {
color: $dark-red;
font-family: $Roboto-font;
}
nesting.scss
$dark-red: #911111;
$Roboto-font: 'Roboto', sans-serif;
$font-size__small: .9rem;
.message {
color: $dark-red;
font-family: $Roboto-font;
&:hover {
background: compliment($dark-red);
}
& .message-item {
padding: 10px;
margin: 2px;
font {
size: $font-size__small;
weight: bold;
family: sans-serif;
}
}
}
_mixins.scss
$dark-red: #911111;
$Roboto-font: 'Roboto', sans-serif;
$font-size__small: .9rem;
@mixin border($radius, $padding) {
padding: $padding;
border-radius: $radius;
}
.message {
color: $dark-red;
font-family: $Roboto-font;
@include border(5px, 10px);
&:hover {
background: compliment($dark-red);
}
& .message-item {
@include border(5px, 10px);
margin: 2px;
font {
size: $font-size__small;
weight: bold;
family: sans-serif;
}
}
}
_inheritance.scss
$dark-red: #911111;
$Roboto-font: 'Roboto', sans-serif;
$font-size__small: .9rem;
.button {
color: blue;
border: 1px solid currentColor;
}
.button-warning {
@extend .button;
color: blue;
}
.button-positive {
@extend .button;
color: green;
}
_operators.scss
$dark-red: #911111;
$Roboto-font: 'Roboto', sans-serif;
$font-size__small: .9rem;
$border-padding: 10px;
.button {
color: blue;
border: 2px / $border-padding solid currentColor;
}
.button-warning {
@extend .button;
color: blue;
}
.button-positive {
@extend .button;
color: green;
}
2.Add partials and use the @import directive. Rename the files to _name.scss and write a file named main.scss containing all the relevant @import directives.
Answer:
For demonstration purposes only :
main.scss
@import "reset";
@import "name";
@import "operators";
@import "inheritance", "mixins", "variables", "nesting";
<!-- will output code in that order -->
3.Add an index.html which links to the resulting .css file and use it to demonstrate the Sass files you have written.
Answer:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="dist/main.css">
<title>Document</title>
</head>
<body>
<!-- css styles will be used on this page they will all be compiled into one css file -->
</body>
</html>
Exercises 5
1.Pick at least two features and write a .scss file to demonstrate them. You may not pick @each, @for, or @while. Try to be as original as possible.
Answer:
Maps
$animals: (
dog: #fff,
cat: #000,
bird: #fefefe
);
@each $animal, $color in $animals {
.#{$animal} {
color: $color;
}
}
Functions
$total: 8,
$col: 3;
@function column-width() {
@return percentage($col/$total);
}
<!--
.col-3 {
width: column-width();
}
// output
.col-3 {
width: 37.5%;
}
-->
2. Write a loop to create new classes, for example, use it to create and to style a class for each day of the week: .monday, .tuesday, … .sunday. You may use lists, maps, etc.
Answer:
$colorsForWeek : (
monday: #fffefc,
tuesday: #fbfcf7,
wednesday: #fefaf0,
thursday: #fef7e5,
friday: #fffbda,
saturday: #fffbda,
sunday: #fef9e3
);
@each $day, $color in $colorsForWeek {
.#{$day} {
color: $color;
}
}
3.Write a @function that, given a day of the week, returns a color (or whatever you want). Use the return value to style an attribute on your day classes. (Hint: You have to call the function inside your loop for every iteration.)
Answer:
monday: #fffefc,
tuesday: #fbfcf7,
wednesday: #fefaf0,
thursday: #fef7e5,
friday: #fffbda,
saturday: #fffbda,
sunday: #fef9e3
)
@each $day, $color in $colorsForWeek {
.#{$day} {
color: $color;
}
}
Exercises 6
1.Create a 7-1 architecture project, its folders, and its main file and add a few .scss files. You can get your inspiration from this GitHub repository, but do not clone it.
Answer:
2. Add a layout file; for example, a header.
Answer:
3.Add a new button component to your architecture and define new styles for states, etc. Use mixins, inheritance, variables, etc., as long as you need it.
Answer:
Decided to skip this will show this in the next project Github link