SASS Example 2

This example is a continuation of the navigation coding. Also it includes, mixins, functions and extends. Just play around with the code and ensure you understand how they are used. https://codepen.io/tracey_jane/pen/RdGzOx?editors=1100

The step of SASS example: Variables and Nesting..

Instead of showing you the theoretical part, i want you to take a look at my code pen example. You can also edit it and play around as you try to understand. https://codepen.io/tracey_jane/pen/pYEjQM?editors=1100#0

What is SASS and how does it work?

SASS (Syntactically Awesome Style Sheet) Sass is a CSS preprocessor, an extension of CSS that adds power and elegance to the basic language.Examples of the 3 major CSS processorsSassLessStylusWe use Sass handy features and tools that CSS doesn't have but at the same time not changing the fundamental of CSS. First we write Sass code …

CSS Architecture: Component and BEM

The Think - Build - Architect Mindset Think Think about the layout of your webpage or web app before writing code. Modular building blocks that make up interfaces.Held together by the layout of the page.Re-usable across a project and between different projects.Independent, allowing us to use them anywhere on the page. Build Build your layout …

How CSS renders a website:

The visual formatting model This model, is an algorithm that calculates boxes and determines the layout of these boxes, for each element in the render tree, in order to determine the final layout of the page. This model includes: Dimensions of boxes: the box model.Box type: inline, inline-block, block.Positioning scheme: floats and positioning.Stacking contexts.Other elements …

How CSS values are processed….

For you to be able to know which is the cascade value you have to look at highest specificity...Take a look at the code pen below ✒. https://codepen.io/tracey_jane/pen/MLREXN Between the element p and class amazing, the cascade value will be (.amazing) . Cause it has the highest specificity. The width of the whole section is …

Practical Specificity

Check out the example in the code pen to fully understand how specificity is really important. If you want to change or over ride this code, you can use !importance. But this is not a good practice if you want your code to be reusable... Run the pen and do some practice... https://codepen.io/tracey_jane/pen/GzePNo?editors=1100

Tricks to make your life easier in Illustrator….

Using the pen tool

When tracing a logo use the pen tool..., Increase your stroke to increase the thickness, for the image above this applies very well. It helps us to use less time when tracing the image ... Use reflect to make your work easier...Go to the object, then transform, use will see the reflect option.. If you …

The Cascade and Specificity

The is CSS rule has Selector Property Declared value Eg h1{ color: red; } Selector - h1, property -color, value -red Cascade is the process of combining different stylesheets and resolving conflict between different css rule and declaration, when one or more rule applies to one element. Source of cascade Author -the ones you write …