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

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

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.

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.

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.

Figure - 10.3

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

Figure - 10.4

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.

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.

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.

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.

Figure - 10.8

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.

Figure - 10.10

Also, as an alternative, you can run this project with Selenium in AngularJS by clicking the following link below.