- : Introduction To SASS-SCSS Pre - Processors : - NOTE: - TopicsExpress

- : Introduction To SASS-SCSS Pre - Processors : - NOTE: Download Code N Articles Frome Here: hts.io/1hdQl Introduction To SASS/SCSS: Being introduced to this comparatively new style sheet language (appeared in 2007) me recently, I decided Id tutorialize it and get users acquainted with its functionality. A preliminary knowledge and understanding of HTML/CSS (and especially CSS is required). To begin with, think of SASS as a dynamic implementation of CSS. It falls under two categories: a style sheet language and a scripting one. By far SASS is nothing more but an extension for CSS3, allowing for a few extra features and element manipulations to be present and performed. The difference between SASS (Syntactically Awesome Style Sheets) and SCSS is that SASS does not require the usage of semicolons at the end of each line where a style has been applied and does not allow for parenthesis to define the scope of styles chosen. This makes any SCSS (Sassy CSS) syntax a fully valid CSS3 file as it, on the other hand, requires the usage of semicolons and parenthesis. Obvious as it may seem - respectively, SASS uses the .sass extension and SCSS - .scss. Setup/Installation: Before we proceed with the syntax and sample usage through examples, let us first setup SASS and prepare our working environment. It can be used through either command line or with the help of a few framework applications. I personally use Koala as its free and has a nice, light GUI. You can download Koala from here koala-app/. For those that prefer the CLI, you need Ruby and could then install SASS as a gem. Refer to this page sass-lang/install Once installed, add a folder as the base of the project and store your .sass/.scss files along with the HTML index there. Basics: Using SASS is basically compiling SASS/SCSS code which converts it into a CSS3 syntax format. It supports four data types which are perfectly enough to help boost CSS3s performance and features. Those being: [*] Numbers (integers and floats) [*] Strings [*] Colors (in the form of strings) [*] Booleans Now, while a regular CSS3 stylesheet would look like this: - : CODE : - hts.io/1hdQl A SASS implementation can look like the following: - : CODE : - hts.io/1hdQl Sample Project: Lets carry on with forging a simple web page using SASS. - : CODE : - hts.io/1hdQl Four div elements to cover the whole document. A global one for marking the whole body, a header, content, and the footer. Now for the styling with SASS, lets first declare the variables that will be holding some of the values. - : CODE : - hts.io/1hdQl Before anything else, we have to define a height for the document itself (so that we can adjust the div elements depending on it), hide the scrollbar and define a background. - : CODE : - hts.io/1hdQl The document class represents the div element that contains the paragraphs and all the content inside it. Declare the width and height in percentage so that the layout becomes responsive and adaptive for all devices and resolutions and specify a few color changes to fit the overall design and structure of the document. - : CODE : - hts.io/1hdQl I believe here is the moment where I should say that SASS/S[b]CSS[/b] also provide in-built functions for easier adjustment of colors and elements. For example weve used the functions darken() and lighten(). Their names are more than self-explanatory and so is their functionality. For a thorough reference on all functions refer to SASS-lang/documentation/SASS/Script/Functions.HTML. Now we need to style the header, content and footer. Defining a margin to positionate the paragraphs and align them appropriately and a few borders do set aside the content from the miscellaneous. - : CODE : - hts.io/1hdQl Youve probably noticed the box-shadow property and its value. The $shadow variable is simply a list of values. If the blur is always going to be the 3rd item in the list (such as in our example), then what were looking at is something like this: (shadow blur) - 15 pixels. We subtract 15 pixels from the total value of the blur. In that way we eliminate any duplicate values which is why SASS/S[b]CSS[/b] were invented in the first place. However, the above code assumes that the blur value is the 3rd value in the property box-shadow. What if the blue value is positionated in a different place (could be an inset shadow)? Then what we could do is start doing things like checking the length of the list and/or examine the first element to see if it is inset: - : CODE : - hts.io/1hdQl - : CODE : - hts.io/1hdQl Nonetheless, I highly recommend the usage of the first example as you may never know the position of a certain value. In other words, dynamic allocation is better than static for a number of reasons. The final thing we should consider about the project is the scrollbar of the center box. This we style the following way: - : CODE : - hts.io/1hdQl At-Rules (@): This, however, applies only for Chrome hence the usage of the -webkit property. Another thing you should consider with gravity are at-rules. Despite the fact that in most cases their usage is unnecessary, you should be aware of those that apply for HTML/CSS before we proceed with the SASS/SCSS ones. They exist ever since the first version of CSS and define rules by covering an amount of properties and applying them to a certain thing (element, attribute etc). Below Ive organized a list with all of them and briefly explained their functionality. - : CODE : - hts.io/1hdQl Example: - : CODE : - hts.io/1hdQl Example: - : CODE : - hts.io/1hdQl Example: - : CODE : - hts.io/1hdQl Example: - : CODE : - hts.io/1hdQl Example: - : CODE : - hts.io/1hdQl Example: - : CODE : - hts.io/1hdQl Example: - : CODE : - hts.io/1hdQl Example: - : CODE : - hts.io/1hdQl Example: - : CODE : - hts.io/1hdQl Now that weve gone through all of these, lets move on to the SASS/S[b]CSS[/b] ones. The first thing to be aware of are mixins. They enable us to make a list of styles that apply throughout the site. A typical example would be the following which is forming a custom function with a parameter. - : CODE : - hts.io/1hdQl So now we can apply this certain element, class or identifier. Using the @include rule, we can do this the following way by specifying an argument of 4 seconds for the transition: - : CODE : - hts.io/1hdQl If no parameter has been supplied, the function works with the default value which is specified in the declaration of the function itself (in our case $default: 3s). The next feature were gonna look at is @extend. It allows for an element to inherit styles from another element, class or identifier. As well as that, we can specify extra declaration afterwards. This is made so that properties with the same values are not repeated over and over again throughout the entire cascading style sheets. Heres how we use it: - : CODE : - hts.io/1hdQl This would force the footer class to inherit all styles from div elements that have been specified above. In addition, we could add more styles after it as Ive already mentioned above. So now, perhaps something which I should have talked about at first, is nesting. This is one of the main reasons for the acronym of SASS because it adds to the overall code structure layout and makes SASS syntax easier to read and manipulate. The two types of nesting are selector nesting and property nesting. As you may guess from their name, they allow for the indentation to make a valid CSS selection or property declaration. Example for selector nesting: - : CODE : - hts.io/1hdQl This compiled as SASS would result in the following CSS syntax: - : CODE : - hts.io/1hdQl I was uncertain whether to include SASS/SCSS operators as well because they are pretty easy to catch up with, especially when once has already reached to this part of the tutorial but nonetheless Ill allocate a bit of space for them too. There are five of them and those being: +, -, *, /, %. Some brief examples can be found below: - : CODE : - hts.io/1hdQl Thats pretty much all about it. Briefly went through all SASS/S[b]CSS[/b] features so that you main gain a general perception of what concept is hidden behind these pre-processors for CSS3. Also keep in note that indentation is required for SASS/SCSS but HTS does not allow for spacing in code blocks so it messes up the code. ################### Mumbai Hacker Team ###################