├── .vscode └── settings.json ├── README.md ├── Sass-minfide-folder.md ├── image ├── compiler.png ├── css-scss.png ├── link-in-html.png ├── sass-css.png ├── sass-file.png ├── sass-guidelines.png ├── sass-in-html.png ├── variable.png └── watch-now.png ├── index.css ├── index.css.map ├── index.html └── index.scss /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "cSpell.words": ["Catlin", "Haml", "Weizenbaum"] 3 | } 4 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # The Ultimate Git Repository for learning Sass 2 | 3 | ![thumbnail](./image/sass-guidelines.png) 4 | 5 | ## Shortcuts 6 | 7 | - [The Ultimate Git Repository for learning Sass](#the-ultimate-git-repository-for-learning-sass) 8 | - [Shortcuts](#shortcuts) 9 | - [Advantages of using Sass](#advantages-of-using-sass) 10 | - [Prerequisites for learning Sass](#prerequisites-for-learning-sass) 11 | - [Why we use Sass?](#why-we-use-sass) 12 | - [How to use SASS in your HTML?](#how-to-use-sass-in-your-html) 13 | - [Step 01](#step-01) 14 | - [Step 02](#step-02) 15 | - [Step 03](#step-03) 16 | - [Step 04](#step-04) 17 | - [Step 05](#step-05) 18 | - [Step 06](#step-06) 19 | - [Differences between Scss, Sass and Css extension](#differences-between-scss-sass-and-css-extension) 20 | - [Scss variables](#scss-variables) 21 | - [Scope of variables](#scope-of-variables) 22 | - [Sass Nesting CSS rules](#sass-nesting-css-rules) 23 | - [Sass Nested Properties](#sass-nested-properties) 24 | - [Now view those videos step by step then you will be able to confident about Sass](#now-view-those-videos-step-by-step-then-you-will-be-able-to-confident-about-sass) 25 | 26 | ## Advantages of using Sass 27 | 28 | - **Accessibility:** Ability to run via an internet browser 24/7 from any device 29 | - **Operational Management:** No installation, equipment updates or traditional licensing management 30 | - **Cost Effective:** No upfront hardware costs and flexible payment methods such as pay-as-you-go models 31 | - **Scalability:** Easily scale a solution to accommodate changing needs 32 | - **Data Storage:** Data is routinely saved in the cloud 33 | - **Analytics:** Access to data reporting and intelligence tools 34 | - **Increase Security:** SaaS providers invest heavily in security technology and expertise 35 | 36 | ## Prerequisites for learning Sass 37 | 38 | - HTML 39 | - CSS 40 | - Javascript (Fundamental) 41 | 42 | **_SASS Stand for_** 43 | 44 | ```markdown 45 | Syntactically Awesome Stylesheet 46 | ``` 47 | 48 | ## Why we use Sass? 49 | 50 | **Sass (Syntactically Awesome Stylesheets) is a CSS pre-processor that lets you use variables, mathematical operations, mixins, loops, functions, imports, and other interesting functionalities that make writing CSS much more powerful.** 51 | 52 | _Some more information about SASS._ 53 | 54 | - Sass is an extension to CSS 55 | - Sass is a CSS pre-processor 56 | - Sass is completely compatible with all versions of CSS 57 | - Sass reduces repetition of CSS and therefore saves time 58 | - Sass was designed by Hampton Catlin and developed by Natalie Weizenbaum in 2006 59 | - Sass is free to download and use 60 | 61 | ## How to use SASS in your HTML? 62 | 63 | ### Step 01 64 | 65 | ```html 66 | Install the Live Sass Compiler extension. 67 | ``` 68 | 69 | If you are in **VS code editor** you need to install an extensions called **[Live SASS compiler](https://marketplace.visualstudio.com/items?itemName=ritwickdey.live-sass)** from extension marketplace in your code editor, as you can see in the image. 70 | 71 | ![Live sass compiler](./image/compiler.png) 72 | 73 | ### Step 02 74 | 75 | ```html 76 | Create your HTML file and name it index.html. Include the 77 |

element that we want to style with SASS.

78 | ``` 79 | 80 | ![sass in html](./image/sass-in-html.png) 81 | 82 | [**_Please note that browsers do not recognize SASS, so a compiler needs to compile it to CSS._**] 83 | 84 | ### Step 03 85 | 86 | ```text 87 | Create a .scss file at the same root level as your index.html 88 | file and name it index.scss This is our SASS file. 89 | ``` 90 | 91 | ![sass file](./image/sass-file.png) 92 | 93 | ### Step 04 94 | 95 | ```html 96 | Add the following code that will style your 97 |

element.

98 | ``` 99 | 100 | ```css 101 | $red-bg: red; 102 | h1 { 103 | background-color: $red-bg; 104 | } 105 | ``` 106 | 107 | ### Step 05 108 | 109 | **_Don't forget to write .css extension_** 110 | 111 | ```html 112 | Add the following to the tag of your HTML file. 113 | 114 | 115 | 116 | ``` 117 | 118 | **_It's look like this_** 119 | 120 | ![link tag in html head](./image/link-in-html.png) 121 | 122 | ### Step 06 123 | 124 | Now, to start the compiler, click “Watch Sass”. This will compile the SASS code to CSS. 125 | 126 | ![Watch now sass compiler](./image/watch-now.png) 127 | 128 | **_Now You are done with Sass_** 129 | 130 | ## Differences between Scss, Sass and Css extension 131 | 132 | - Scss and Css syntax are the same 133 | - But sass extension syntaxes are not same 134 | 135 | Sass has two options for using different syntax although both will be written like programming language. One is SCSS, which uses the same syntax as CSS but adds Sass features, this syntax has eased every developer’s problem when dealing with “Ruby syntax”. SASS was a part of another preprocessor called Haml(HTML abstraction markup language), designed and written by Ruby developers. Therefore, Sass stylesheets use the same syntax as Ruby with no curly braces {}, semicolons; and strict indentation. This is not similar to CSS, variables are declared by using “!” not “$”, the assignment is “=” not “:”. So, if you are not familiar with Ruby language, SCSS is a good choice. This topic uses SCSS. 136 | 137 | ```sass 138 | /*SASS*/ 139 | 140 | $color1: red 141 | $color2: blue 142 | 143 | a 144 | color: $color1 145 | &:hover 146 | color: $color2 147 | 148 | 149 | 150 | /*SCSS*/ 151 | 152 | $color1: red; 153 | $color2: blue; 154 | 155 | a { 156 | color: $color1; 157 | &:hover { 158 | color: $color2; 159 | } 160 | } 161 | 162 | 163 | /*CSS*/ 164 | 165 | a { 166 | color: red; 167 | } 168 | a:hover { 169 | color: blue; 170 | } 171 | ``` 172 | 173 | **_Scss and Css is the same syntax_** 174 | ![css and scss](./image/css-scss.png) 175 | 176 | **_Sass and Css isn't same syntax_** 177 | 178 | ![css and sass](./image/sass-css.png) 179 | 180 | ## Scss variables 181 | 182 | **_Variables are a way to store information that you can re-use later. With Sass, you can store information in variables are those types of data_** 183 | 184 | - strings 185 | - numbers 186 | - colors 187 | - booleans 188 | - lists 189 | - nulls 190 | 191 | ```text 192 | In order to declare variables, we use the “$” sign and variable’s name 193 | and “:” after that. After “:” the value will be assigned by then and 194 | finish with “;”. For example, we can declare a $main-color variable, 195 | and the value of this variable is #0033cc (blue color). As simple as that. 196 | ``` 197 | 198 | ![variable declare](./image/variable.png) 199 | 200 | Declaring variables help programmers save a ton of time. For example, in a website layout, there are many positions, and each position has its own background, if we write CSS code like before, this could be very difficult when changing. There are also cases where many locations use the same background, so if the normal CSS code is changed, each position will have to replace many locations. But if we use the variable to store the background, we only need to replace the correct one position. 201 | 202 | ### Scope of variables 203 | 204 | The variable declared at the top of the stylesheet is a global variable. This means it can be used anywhere in your module after it is declared. Variables declared in blocks (brackets in SCSS or indent in SASS) are usually local and can only be used in blocks in which they are declared. 205 | 206 | ```scss 207 | $global-variable: red; 208 | 209 | .login-text { 210 | $local-variable: blue; 211 | color: $local-variable; 212 | } 213 | .about-text { 214 | color: $local-variable; 215 | } 216 | ``` 217 | 218 | ## Sass Nesting CSS rules 219 | 220 | **_You can nest properties in Sass, it is cleaner and easier to read than standard CSS._** 221 | 222 | - Notice that in Sass, the ul, li, and a selectors are nested inside the nav selector. 223 | 224 | ```scss 225 | nav { 226 | ul { 227 | margin: 0; 228 | padding: 0; 229 | list-style: none; 230 | } 231 | li { 232 | display: inline-block; 233 | } 234 | a { 235 | display: block; 236 | padding: 6px 12px; 237 | text-decoration: none; 238 | } 239 | } 240 | ``` 241 | 242 | - While in CSS, the rules are defined one by one (not nested): 243 | 244 | ```css 245 | nav ul { 246 | margin: 0; 247 | padding: 0; 248 | list-style: none; 249 | } 250 | nav li { 251 | display: inline-block; 252 | } 253 | nav a { 254 | display: block; 255 | padding: 6px 12px; 256 | text-decoration: none; 257 | } 258 | ``` 259 | 260 | ### Sass Nested Properties 261 | 262 | Many CSS properties have the same prefix, like font-family, font-size and font-weight or text-align, text-transform and text-overflow. 263 | 264 | - With Sass you can write them as nested properties: 265 | 266 | ```scss 267 | font: { 268 | family: Helvetica, sans-serif; 269 | size: 18px; 270 | weight: bold; 271 | } 272 | 273 | text: { 274 | align: center; 275 | transform: lowercase; 276 | overflow: hidden; 277 | } 278 | ``` 279 | 280 | - On the other hand in CSS properties syntax is like that 281 | 282 | ```css 283 | font-family: Helvetica, sans-serif; 284 | font-size: 18px; 285 | font-weight: bold; 286 | 287 | text-align: center; 288 | text-transform: lowercase; 289 | text-overflow: hidden; 290 | ``` 291 | 292 | ## Now view those videos step by step then you will be able to confident about Sass 293 | 294 | - [Sass @import and Partials](https://www.youtube.com/@codewithmohaimin) 295 | - [Sass @mixin and @include](https://www.youtube.com/@codewithmohaimin) 296 | - [Sass @extend and Inheritance](https://www.youtube.com/@codewithmohaimin) 297 | - [Sass String Functions](https://www.youtube.com/@codewithmohaimin) 298 | -------------------------------------------------------------------------------- /Sass-minfide-folder.md: -------------------------------------------------------------------------------- 1 | # This code change your folder structure when you use it in your VS-CODE settings.json file 2 | 3 | "liveSassCompile.settings.generateMap": false, 4 | "liveSassCompile.settings.formats": [ 5 | { 6 | "format": "compressed", 7 | "extensionName": ".min.css", 8 | "savePath": "/css" 9 | } 10 | ], 11 | -------------------------------------------------------------------------------- /image/compiler.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeWithMohaimin/get-started-with-sass/3fb63a82a69cee920af75e83a525b50ecdf0c950/image/compiler.png -------------------------------------------------------------------------------- /image/css-scss.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeWithMohaimin/get-started-with-sass/3fb63a82a69cee920af75e83a525b50ecdf0c950/image/css-scss.png -------------------------------------------------------------------------------- /image/link-in-html.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeWithMohaimin/get-started-with-sass/3fb63a82a69cee920af75e83a525b50ecdf0c950/image/link-in-html.png -------------------------------------------------------------------------------- /image/sass-css.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeWithMohaimin/get-started-with-sass/3fb63a82a69cee920af75e83a525b50ecdf0c950/image/sass-css.png -------------------------------------------------------------------------------- /image/sass-file.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeWithMohaimin/get-started-with-sass/3fb63a82a69cee920af75e83a525b50ecdf0c950/image/sass-file.png -------------------------------------------------------------------------------- /image/sass-guidelines.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeWithMohaimin/get-started-with-sass/3fb63a82a69cee920af75e83a525b50ecdf0c950/image/sass-guidelines.png -------------------------------------------------------------------------------- /image/sass-in-html.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeWithMohaimin/get-started-with-sass/3fb63a82a69cee920af75e83a525b50ecdf0c950/image/sass-in-html.png -------------------------------------------------------------------------------- /image/variable.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeWithMohaimin/get-started-with-sass/3fb63a82a69cee920af75e83a525b50ecdf0c950/image/variable.png -------------------------------------------------------------------------------- /image/watch-now.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeWithMohaimin/get-started-with-sass/3fb63a82a69cee920af75e83a525b50ecdf0c950/image/watch-now.png -------------------------------------------------------------------------------- /index.css: -------------------------------------------------------------------------------- 1 | body { 2 | font: 100% Helvetica, sans-serif; 3 | color: #333; 4 | } 5 | 6 | nav ul { 7 | margin: 0; 8 | padding: 0; 9 | list-style: none; 10 | } 11 | nav li { 12 | display: inline-block; 13 | } 14 | nav a { 15 | display: block; 16 | padding: 6px 12px; 17 | text-decoration: none; 18 | }/*# sourceMappingURL=index.css.map */ -------------------------------------------------------------------------------- /index.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sourceRoot":"","sources":["index.scss"],"names":[],"mappings":"AAGA;EACE;EACA,OAJc;;;AASd;EACE;EACA;EACA;;AAGF;EACE;;AAGF;EACE;EACA;EACA","file":"index.css"} -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 |

Hello Sass from HTML

12 |

this is h2

13 |

14 | Here you find many kinds of Navbar, Cards and Images for developer uses. 15 | Here you get all source code for develop an navbar, cards and much more. 16 | Don't just copy and past those codes, But also try to understand those 17 | codes. 18 |

19 |

20 | Here you find many kinds of Navbar, Cards and Images for developer uses. 21 | Here you get all source code for develop an navbar, cards and much more. 22 | Don't just copy and past those codes, But also try to understand those 23 | codes. 24 |

25 | 26 | 27 | -------------------------------------------------------------------------------- /index.scss: -------------------------------------------------------------------------------- 1 | $font-stack: Helvetica, sans-serif; 2 | $primary-color: #333; 3 | 4 | body { 5 | font: 100% $font-stack; 6 | color: $primary-color; 7 | } 8 | 9 | // Sass syntax 10 | nav { 11 | ul { 12 | margin: 0; 13 | padding: 0; 14 | list-style: none; 15 | } 16 | 17 | li { 18 | display: inline-block; 19 | } 20 | 21 | a { 22 | display: block; 23 | padding: 6px 12px; 24 | text-decoration: none; 25 | } 26 | } 27 | --------------------------------------------------------------------------------