Learn the basics of SCSS – BEM – Typescript

Tram Ho

A. Learn about SCSS

1. SASS – SCSS

SASS SCSS is a CSS Prepocessor, it helps us to write CSS code faster and with a clearer structure. In general, the two above mentioned things help us to write the CSS code more easily. But there are a few differences between them

SASSSCSS
Syntactically Awesome Style SheetsSassy Css
Original language, shoter syntaxNewer syntax, closer to css, defactor standard
IndextationCurly braces & semi-colons
Strict rules for whitespaceIgnores whitespace
= my-mixinmixin my-mixin
+ my-mixininclude my-mixin
import fooimport foo
extend fooextend foo

2. Some of the features

2.1. Variables

We can declare variables to be used in many different places in the .scss file. For example:

When our project writes a lot of CSS fragments that need a lot of color, the characteristic is that we will have to reuse the concept defined. We will separate a file that can be named _colors.scss – which declare the common colors of our project to share.

When we want to use variables with this color value we can import this file _color.scss and use them normally.

For example, we create a file _colors.scss as follows:

And when you need to use, you just need to import and courage as usual

2.2. Mixin

Mixin is a utility, applying this to css writing is very free. Understand it as a function, can be used everywhere if you include it in the file we need to use, and we can pass parameters to customize it.

Mixins come in two types: parametric and non-parametric.

  1. No parameter passing

  1. When passing parameters

And when we want to use the mixin in the main.scss file, we have to import the _mixins.scss file into the main.scss file to use, and use include named-mixin-in-file-_mixins.scss

2.3. Import

As the examples above are already using import

2.4. Function

In scss we can define funtcions and use them normally just like in programming languages. Then here we have two types of functions: built-in and functions that we define ourselves:

  1. Built-in

Those are the built-in functions that sass supports, we just need to name and pass the variables corresponding to the required functions and use them normally. We can refer to the available functions that sass it supports at: https://sass-lang.com/documentation/modules/color#darken

  1. The function defines itself

We can create a file ourselves, where you will define all the functions that you plan to leave to use. For example, I define a file _functions.scss as follows:

Then I will import the main.scss file to use the em function in the body

2.5. Inheritance with extend

This is an important feature that we use a lot. Feature it will inherit all the properties of a class or something the code we have declared available. For example

The above code when writing css will be written as

As we can see above, we will use extend keyword so that we can use all properties of class error in the critical-error class. Moderate utility allows us to avoid repeating the same CSS code while writing CSS, the CSS code will look a lot clearer.

2.6. Conditional Directives

One utility that we must mention is that if else in Scss, we will be allowed to use normally as conditional statements in other programming languages. For example :

2.7. Loops

If in the .scss file we assume that many classes are defined like this

Instead we have to code too much like above we just need to write with loop syntax in Scss

Next is the each loop

The result will be

B. Learn about BEM

1. What is BEM?

  • Is a naming convention for classes in HTML and CSS
  • BEM stands for Block, Element, Modifier.
  • BEM is created by the team of Yandex

2. Naming convention

  • .block The largest -level element of the abstraction or component.
  • .blockelement The inner child of the block
  • .block – modifier Is a # version of the block. Or other style changes from the original style

3. Example

3.1. Modifier

Here btn is block .btn — green is the modifier. Our style is as follows

Modifirer: Understand that style changes of .btn have some style points different from the original .btn. Here btn – green changes the background from gray to blue. You can change the background color, font-size, padding …. Depending on how you set

3.2. Element

Here info__title, info__description is a child element within info.

4. Why use BEM

  • Have you ever had a headache thinking about how to put the html class? BEM is a solution to help you easily place classes
  • Make the code simple, easy to understand, and easy to fix. Sometimes when you finish styling, you do not even know where it is to be edited, but with the BEM writing you will know where HTML elements are located through it and then edit. With normal writing, you correct fear of affecting elsewhere.

C. Understanding Typescript

1. What is Typescript?

  • TypeScript is an open source project developed by Microsoft. It can be thought of as an enhanced version of Javascript because of the addition of static type options and object oriented classes that are not available in Javascript.
  • TypeScript can be used to develop applications that run on client-side (Angular) and server-side (NodeJS).
  • TypeScript uses all the features of ECMAScript 2015 (ES6) such as classes, modules.
  • The lead of this project is Anders Hejlsberg, who has contributed to and created other languages ​​C #, Turbo Pascal and Delphi.
  • TypeScript was not first released, but there were some libraries like CoffeScript and Dart developed by Google, but the weakness is that these two libraries use completely new syntax, which is completely different from TypeScript. Therefore, even though TypeScript was born later, TypeScript is still gaining popularity from programmers.

2. Why should I use Typescript?

  • Easy to develop large projects: With the use of the latest in object-oriented programming techniques, TypeScript makes it easy to develop large projects with ease.
  • Multiple Framework options: Currently the Javascript Frameworks have gradually encouraged to use TypeScript for development, for example AngularJS 2.0 and Ionic 2.0.
  • Support features of the latest version of Javascript: TypeScript always ensures the full use of the latest Javascript techniques, for example the current version is ECMAScript 2015 (ES6).
  • Open source: TypeScript is open source, so you can use it at no cost, and it is also supported by the community.
  • TypeScript is Javascript: The essence of TypeScript is to compile and generate javascript code, so you can run it anywhere as long as there is Javascript translation support. In addition, you can use blending Javascript syntax into TypeScript, which makes it easier for programmers to approach TypeScript.

3. Basic knowledge of Typescript

3.1. Data type and variable declaration

  • Typescript is still Javascript in essence, so the basic data types of java script Typescript are available in addition Typescript has some other data types such as enum, tuple, any, void …
  • As for the syntax of declaring variables in Typescript a little bit differently, that is when declaring we need to declare more for it to see what type of data is.

Above are some basic data types in Typescript, there are some data types other than Javascript:

  • Enum is the keyword used to declare an enumeration (Enumeration). An enumeration is a collection of user-defined constants.
  • Tuple is a mixed array but has a declared number of elements.

3.2. Function in TypeScript

  • In the typescript functions all return a result, that result will belong to some data type (eg number, string, void, …).
  • We must always specify the return data type for the function from the start.

For example:

There are also some function declaration syntax such as:

3.3. Object-oriented in Typescript

Typescript supports us object-oriented properties such as:

  1. Class

  1. Access Modifier Access scope in class: private, protected, public. By default, when not declared, it is public
  2. Inheritance

  1. Interface

  1. Namespace

  1. Generic Generic Understand a simple way of declaring, but without specifying the data type when used to define the data type.

Through the example we can see that when the functions view1 (), see2 (), see3 () are the same in terms of processes only the return data type and the params data type instead of defining 3 functions we only need to write a function see () can be used for the above.

Another example:

In the above example, the ViewThongTin () function takes an array of generic data type as the parameter passed. When we call the ViewThongTin () function, we have to indicate what type T is in this case, string, then when we pass the parameter, we must also have a string array if the program will fail. Like sometimes you want the other data type T to be not a string but instead a certain data type like any, but now you have to write a new function while the code behaves the same, look In the example we see, thanks to generics, everything is easier, you just need to define it as any type and pass an array of type to any.

summary

My article here is the end. Hope it will be somewhat useful for you in the process of learning as well as working. The article is also hard to avoid mistakes, hope everyone sympathizes, and hopes for everyone’s comments to make the article more complete.

Share the news now

Source : Viblo