{
"cells": [
{
"attachments": {},
"cell_type": "markdown",
"metadata": {},
"source": [
"# P4-Y 4/25 Guide to SASS \n",
"> An guide on how to use SASS to build a more customized frontend.\n",
"- toc: true\n",
"- comments: true\n",
"- badges: false\n",
"- author: Aniket Chakradeo, Ryan Hakimipour, Max Tullius, Jaden Nguyen, Nathan Kim, Kalani Cabral-Omana, Evan Appari, Max Wu, \n",
"- categories: [student]\n",
"- type: ap\n",
"- week: 31"
]
},
{
"attachments": {},
"cell_type": "markdown",
"metadata": {},
"source": [
"# Classwork: \n",
"\n",
"### What are 5 Basic UI Elements?:\n",
"\n",
"1. Color \n",
"2. Font\n",
"3. Layout\n",
"4. Icons\n",
"5. Interactivity\n",
"- Bonus. Accessibility\n",
"\n",
"### In your own words, explain what SASS does:\n",
"- SASS is an addition to css that reduces the complex of the code and allows you to create your own style.\n",
"\n",
"### What are some benefits to SASS?: \n",
"- Some benefits of SASS is that it has many usable variables, more build in functions, and can easly convert the code to the normal CSS. The build in functions and features are also easy to understand and use for formating a page.\n",
"\n",
"### Describe/Explain one of the more \"advanced\" SASS properties below in detail:\n",
"- One of the more advanced SASS properties is @keyframes fade-in {}. This properties allows a programmer to display an images, gif, or video by first fading that object in. animation-delay: Ns; also sets the fade in of the object to a certain speed. \n",
"\n",
"- .grid-container is another advanced SASS property that uses the lines grid-item-N {} to format an object in a grid. \n",
"\n",
"- @import is used to pull different types of themes for you to use for yuor own webpages.\n",
"\n",
"## [Link to Number Guesser Game](https://anicricket.github.io/tmv4/_pages/numberguesser_v3.html)\n",
"\n",
"\n",
"### How does the number guesser game work?\n",
"- The number guesser game works by first using math.random to get a number that is from 1 to 100. Then it checks to see if each guess by the user is that number using the function checkguess. If not, the code with display too high or too low until the user gets it right. Once the right number is clicked, the game ends and displays the number of attempts taken.\n",
"\n",
"### Explain how SASS can be used to make the number guesser game look more visually appealing?\n",
"- SASS can make the number guesser game look more visually appealing by using variables to define colors or rgb values. You can also use JavaScript to change the formating of a page or game with the SASS features."
]
},
{
"attachments": {},
"cell_type": "markdown",
"metadata": {},
"source": [
"# Hacks - Insert any screenshots, code segments, etc. that you need to in order to demonstrate an understanding of the hacks\n",
"\n",
"## Hacks Part 1\n",
"\n",
"[Unique element](https://q-tipwithaface.github.io/Q-tip/)\n",
"\n",
"The uniques element I made was adding SASS to my fastpage homepage(index file)\n",
"\n",
"code used below:\n",
""
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {
"vscode": {
"languageId": "html"
}
},
"outputs": [],
"source": [
"---\n",
"layout: home\n",
"search_exclude: true\n",
"image: images/logo.png\n",
"---\n",
"\n",
" \n",
"\n",
"\n",
"
![](\"/Q-tip/images/Screenshot)