Make a TicTacToe HomeScreen in SCSS is, actually, a tutorial for you to comprehend all SCSS functions and variables by using them in a home screen design project, and therefore I choose to use a TicTacToe game template as the home screen...
Advertisement:
Read Later
Make a TicTacToe HomeScreen in SCSS is, actually, a tutorial for you to comprehend all SCSS functions and variables by using them in a home screen design project, and therefore I choose to use a TicTacToe game template as the home screen...
Related Links :
SASSMake a TicTacToe HomeScreen in SCSS is, actually, a tutorial for you to comprehend all SCSS functions and variables by using them in a home screen design project, and therefore I choose to use a TicTacToe game template as the home screen. By following the given steps below, you could learn a few common features of SCSS in a basic level even if SCSS code structure is not familiar to you. TicTacToe template is designed in pure SCSS, but I merely implemented javascript code to make it more stylish by changing Xs to Os – it is explained below.
For more information about the code files, please visit Source Code section below.
SCSS is a CSS preprocessor that gives you a opportunity to use variables, functions math equations in creating a stylesheet for your project without needing any javascript code. Also, it is exceptional in altering all design – color, height, width and so on – with only a few line of code.
You can easily create a variable with a dollar sign in SCSS, and assign it a value such as #cccccc, 12px or 12px + 10px.
$template_height: 50%;
Also, you can create arrays and call it with map-get($arrayName, variable); function.
$colorDesign: (
body-color: #e6e6e6,
main-primary: #002699,
template: #cccccc);
map-get($colorDesign, body-color);
In a SCSS function(@function name {}), you can return(@return) whatever value you want with math operations, such as function justify that centers a div horizontally and vertically.
In SCSS, you are allowed to nest CSS selectors in a way that follows the same visual hierarchy of HTML.
CSS declarations groups are easy to create in SCSS because of mixins(@mixin) letting you to specify an element in a predefined situation by using @include method.
First of all, you need to activate SCSS features on your computer to execute tictactoe.scss file. I recommend you to download Sass (Syntactically Awesome Style Sheets) environment via Ruby for executing, but you can also use other options.
https://sass-lang.com/guide
Windows:
Download Ruby( https://rubyinstaller.org/ ).
Write gem install sass and press enter.
Linux:
You do not need to install Ruby, just go to your terminal and write $sudo gem install sass.
Now, you have to download a compiler – e.g. Gulp, Koala GUI – to compile SCSS to CSS through an extension. However, I suggest you to use WebStorm IDE having an embedded compiler in its features that ,simultaneously, compiles SCSS in a second.
After compilation, you now have a css file named tictactoe.css and all remaining process is to link tictactoe.css to index.html.
Rotating divs and clip-path background is ready to run, but if you want to change Xs to Os with a basic javascript function, you can add the following code – tictactoe.js.
Also, as an alternative, you can run this project with Selenium in AngularJS by clicking the following link below.
https://www.guru99.com/protractor-testing.html
Please sign in to download source code files below as zip folder, including index.html.
Zip Folder
Download
tictactoe.scss
Download
$colorDesign :(
body-color: #e6e6e6,
main-primary: #002699,
template: #cccccc,
span: #1a53ff,
span-text: #b3b3b3
);
$template_height: 50%; $template_width: 60%;
$template-section-height:100%;$template-section-width:95%;
@function justify($value, $size){
$justify: $size - $value;
@return $justify / 2
}
$screenWidth: 700px;
@mixin screenWidth{
@media (max-width: #{$screenWidth}) {
@content;
}
}
body {
background-color: map-get($colorDesign, body-color);
.background{
position:absolute;top:0;left:0;
background-color: map_get($colorDesign, main-primary);
width:100%;
height:100%;
clip-path: polygon(0 0, 23% 0, 77% 100%, 0 100%);
}
#template{
position:absolute;
top: justify($template_height, 100%);
left: justify($template_width, 100%);
background-color: map_get($colorDesign, template);
height: $template_height;
width: $template_width;
margin:auto;
box-shadow: 10px 10px 5px rgba(0,0,0,0.8);
border-radius: 10px;
@include screenWidth {
height:70%;width:90%;
top: justify(70%, 100%);left: justify(90%, 100%);
}
section{
height:$template-section-height;
width: $template-section-width;
background-color: map_get($colorDesign, template);
margin:auto;
text-align: center;
}
}
}
.tictactoe-box{
height:$template-section-height / 3;
width:$template-section-width / 3;
background-color: map_get($colorDesign, template);
display:inline-block;
span{
display:block;margin:auto;background-color:map_get($colorDesign, span);font-size:100px;font-weight:bold;text-align:center;
height:100%;user-select: none;cursor:pointer;color:map_get($colorDesign, span-text);
transition: 2s ease;text-shadow: 5px 5px rgba(230, 230 , 230, 0.2);
}
span:hover{
transform: rotateY(180deg);
}
}
tictactoe.css
Download
body {
background-color: #e6e6e6; }
body .background {
position: absolute;
top: 0;
left: 0;
background-color: #002699;
width: 100%;
height: 100%;
clip-path: polygon(0 0, 23% 0, 77% 100%, 0 100%); }
body #template {
position: absolute;
top: 25%;
left: 20%;
background-color: #cccccc;
height: 50%;
width: 60%;
margin: auto;
box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.8);
border-radius: 10px; }
@media (max-width: 700px) {
body #template {
height: 70%;
width: 90%;
top: 15%;
left: 5%; } }
body #template section {
height: 100%;
width: 95%;
background-color: #cccccc;
margin: auto;
text-align: center; }
.tictactoe-box {
height: 33.3333333333%;
width: 31.6666666667%;
background-color: #cccccc;
display: inline-block; }
.tictactoe-box span {
display: block;
margin: auto;
background-color: #1a53ff;
font-size: 100px;
font-weight: bold;
text-align: center;
height: 100%;
user-select: none;
cursor: pointer;
color: #b3b3b3;
transition: 2s ease;
text-shadow: 5px 5px rgba(230, 230, 230, 0.2); }
.tictactoe-box span:hover {
transform: rotateY(180deg); }
/*# sourceMappingURL=tictactoe.css.map */
tictactoe.js
Download
function X_to_O(text){
if(text.innerHTML == "X"){
text.innerHTML = "O";
}else if(text.innerHTML == "O"){
text.innerHTML = "X";
}
}