Introduction

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...


Tags

Share

Make a TicTacToe HomeScreen in SCSS

Advertisement:

Read Later


Read Later

Introduction

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...

Tags

Share






Advertisement

Introduction

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. 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.

project-image
Figure - 10.1

SCSS code structure and variables in tictactoe.scss

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);

project-image
Figure - 10.2

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.

project-image
Figure - 10.3

In SCSS, you are allowed to nest CSS selectors in a way that follows the same visual hierarchy of HTML.

project-image
Figure - 10.4

CSS declarations groups is easy to create in SCSS because of mixins(@mixin) letting you to specify an element in a predefined situation by using @include method.

project-image
Figure - 10.5

Compile tictactoe.scss to tictactoe.css

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.

project-image
Figure - 10.6

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.

project-image
Figure - 10.7

Execute SCSS in index.html

After compilation, you now have a css file named tictactoe.css and all remaining process is to link tictactoe.css to index.html.

project-image
Figure - 10.8


project-image
Figure - 10.9

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.

project-image
Figure - 10.10

Conclusion


Source Code

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";
    }
}