Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 3c58d5f

Browse files
chapter 1 - 1.6 uploaded
chapter 1 - 1.6 uploaded
1 parent 741e9d7 commit 3c58d5f

File tree

1 file changed

+23
-4
lines changed

1 file changed

+23
-4
lines changed

‎README.md

Lines changed: 23 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ After completing/attending/finishing this Course/Tutorial, participants should b
4242
- Write CSS with less repetition, better readability, and more flexibility
4343
- Use and follow the power of advanced CSS Variables features in huge websites/applications
4444
- Declare and use the CSS variables in the Global and Local Scope
45-
- Understand the difference between CSS variables and Preprocessors like SASS, LESS variables
45+
- Understand the difference between CSS variables and Preprocessors (like SASS, LESS) variables
4646

4747
Prerequisites for current course / What you need to know
4848
---------------------
@@ -59,8 +59,9 @@ Topics included/covered
5959
- 1.3. [Why CSS Variables](#13-why-css-variables) |
6060
[CSS Variable Benefits](#13-css-variable-benefits)
6161
- 1.4. [Browser support](#14-browser-support)
62-
- 1.5. [Declaring CSS Variables](#15-declaring-css-variables) |
62+
- 1.5. [Declaring CSS Variables](#15-declaring-css-variables) |
6363
[Using CSS Variables](#15-using-css-variables)
64+
- 1.6. [CSS Variables vs Preprocessor Variables](#16-css-variables-vs-preprocessor-variables) | [Difference Between CSS Variables and Preprocessor Variables](#16-difference-between-css-variables-and-preprocessor-variables)
6465

6566
1 Introduction to CSS Variables Custom Properties
6667
=====================
@@ -521,7 +522,7 @@ ul > li {
521522
1.5.1.2. Declaring a global / globally scoped CSS Variables - Convert above Green Theme to Blue Theme
522523
---------------------
523524

524-
Its pretty easy to change the variable values once at central place and it simply modify the themes or base properties look/feel/appearance
525+
It is pretty easy to change the variable values once at a central place and it simply modifies the themes or base properties look/feel/appearance
525526

526527
- To convert above metioned Green Theme into Blue Theme, just change: `--base-bg-color: #6696f9; --base-text-color: #37327b` and you are done.
527528

@@ -638,7 +639,7 @@ ul > li {
638639
---------------------
639640

640641
- We can also declare/create local variables, which are `accessible only to the declared element and it’s children`
641-
- Local scoped CSS Variables are useful and make sense when we want to apply some properties and values only to specific part(s) of app
642+
- Local scoped CSS Variables are useful and make sense when we want to apply some properties and values only to a specific part(s) of app
642643

643644
> **Syntax & Example**: `1.5.2.1-define-variables-local.html`
644645
@@ -749,3 +750,21 @@ ul > li {
749750
<figcaption>&nbsp;&nbsp;&nbsp; Image 1.5.2.1 - Styles Declaring & Using CSS Variables - Create local scoped variables </figcaption>
750751
</figure>
751752
</p>
753+
754+
1.6. CSS Variables vs Preprocessor Variables
755+
---------------------
756+
1.6. Difference Between CSS Variables and Preprocessor Variables
757+
---------------------
758+
759+
Variables are one of the major reasons why CSS preprocessors like `SASS` or `LESS` introduced and exist at all in the web world. There are many differences between CSS Variables and Preprocessor Variables, some important differences are mentioned below:
760+
761+
| CSS Variables | Preprocessor Variables |
762+
| --------------------------------------------------| --------------------------------------------------|
763+
| Browser understand CSS, so no need for compilation as we are working with pure/native CSS | We need to convert/compile .SASS, .SCSS and .LESS source files into .CSS every time, so that the browser can understand compiled .CSS code|
764+
| More recently, native CSS has started supporting CSS variables, or "CSS Custom Properties". It allows you to work with variables directly in CSS. There are no compiling | Preprocessors introduced to use programming features like Variable, Functions, Loops into CSS styling, so Preprocessors source files must compile into .CSS |
765+
| CSS variables are actually a part of the DOM | The variable was part of the preprocessor language (.SASS, .SCSS and .LESS files), not CSS itself. Once the code compiles, the variables are gone |
766+
| CSS variables are always available and accessible while debugging with Inspect Element and one can easily change it from `Inspect -> Element -> Source` | The preprocessor code/variables would do nothing in a browser, The browser wouldn't understand the declarations and toss them out (.SASS, .SCSS and .LESS variables are not available in browser) |
767+
| We can access and manipulate native CSS variables with JavaScript | As preprocessor uses (.SASS, .SCSS and .LESS) a separate file it is not accessible with JavaScript |
768+
| One can easily access and overwrite CSS variables inside Media Query (as and when media or resolution changes the browser recheck/reassign/repaints the variable if needed | Sometimes it is not possible with preprocessor variables |
769+
770+
> **Note**: As Browser understands only CSS styling, the preprocessor code/variables would do nothing in a browser, The browser wouldn't understand the declarations and toss them out, that's the reason why Preprocessors files need to compile/converted into native CSS before sending/viewing into the browser

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /