SASS

SASS
1.What is SASS?

* SASS (Syntactically Awesome Stylesheet) is a CSS pre-processor, which helps to reduce repetition with CSS and saves time. It is more stable and powerful CSS extension language that describes the style of a document cleanly and structurally.


2.Why to Use SASS?

  • It is a pre-processing language which provides indented syntax (its own syntax) for CSS.
  • It provides some features, which are used for creating stylesheets that allows writing code more efficiently and is easy to maintain.
  • It is a super set of CSS, which means it contains all the features of CSS and is an open source pre-processor, coded in Ruby.
  • It provides the document style in a good, structured format than flat CSS. It uses re-usable methods, logic statements and some of the built-in functions such as color manipulation, mathematics and parameter lists.
      
      

3. What are the Features of SASS.?
  • It is more stable, powerful, and compatible with versions of CSS.
  • It is a super set of CSS and is based on JavaScript.
  • It is known as syntactic sugar for CSS, which means it makes easier way for user to read or express the things more clearly.
  • It uses its own syntax and compiles to readable CSS.
  • You can easily write CSS in less code within less time.
  • It is an open source pre-processor, which is interpreted into CSS.

4.what are the Advantages of SASS..?

  • It allows writing clean CSS in a programming construct.
  • It helps in writing CSS quickly.
  • It is a superset of CSS, which helps designers and developers work more efficiently and quickly.
  • As Sass is compatible with all versions of CSS, we can use any available CSS libraries.
  • It is possible to use nested syntax and useful functions such as color manipulation, mathematics and other values.

 5.what are Disadvantages of SASS..?
  • It takes time for a developer to learn new features present in this pre-processor.
  • If many people are working on the same site, then should use the same preprocessor. Some people use Sass and some people use CSS to edit the files directly. Therefore, it becomes difficult to work on the site.
  • There are chances of losing benefits of browser's built-in element inspector.


    SYNTAX

    SASS Indented Syntax

    * SASS Indented syntax or just SASS is an alternative to CSS based SCSS syntax.

    • It uses indentation rather than { and } to delimit blocks.
     
    • To separate statements, it uses newlines instead of semicolons(;)
     
    •  Property declaration and selectors must be placed on its own line and statements within { and } must be placed on new line and indented 

    Syntax Differences of SASS

   * Most CSS and SCSS syntaxes work perfectly in  SASS. However, there are some differences, which are explained in the following sections −

Property Syntax

* CSS properties can be declared in two ways −

  • Properties can be declared similar to CSS but without semicolon(;).
  • colon(:) will be prefixed to every property name.

 

Comments

Post a Comment

Popular posts from this blog

How to build a Wall Mounted Family Calendar and Dashboard

Image
  How to build a Wall Mounted Family Calendar and Dashboard with a Raspberry Pi and cheap monitor Sponsored By I love dashboards. I love Raspberry Pis (tiny $35 computers the size of a set of playing cards). And I'm   cheap   frugal. I found a 24" old LCD at Goodwill (a local thrift shop) and bought it but it's been sitting unused in my garage. Then I stumbled on  DakBoard . The idea is simple - A wifi connected wall display for your photos, calendar, news, weather and to-do. The implementation is simple genius. It's a browser that starts up full screen (kiosk mode) and just sits there and updates occasionally. DakBoard provides the private webpage and tools to make that happen. You can certainly build this yourself with any number of open source tools. I chose  DakBoard  because it was simple, beautiful, and I was able to get the whole thing done in less than an hour. I'm sure I'll spend many hours tweaking it through. There's also the very popular  M...
Read more

Build a Node.js API

Image
Build a Node.js API Node.js can be intimidating to beginners. But its flexible structure and lack of strict guidelines makes it seem more complicated than it is. This tutorial is a quick and simple guide to Node.js, the Express framework, and MongoDB, focusing on the fundamental REST routes and basic database interaction. You’ll build a simple API boilerplate that can then be used as the foundation for any app. Who This Tutorial Is For : You should have a basic understanding of REST APIs and CRUD operations, plus basic JavaScript knowledge. I use ES6 (mainly fat-arrow functions), but nothing too complex. For this tutorial, you’ll create the skeleton of a back-end for a note-taking application — think You want to be able to do all four CRUD actions on your notes: create, read, update, and delete. Setting Up If you don’t have Node installed, . In a new directory, run npm init, and follow along with the prompts, giving your app the name of ‘notable’ (or whatever ...
Read more

Using the SoundCloud API with the JavaScript SDK

Image
Using the SoundCloud API Setup a Basic HTML Document We will create a basic HTML page which will serve as our homepage. We will also include the SDK here, so we can make use of its functionality. <!DOCTYPE html> < html > < head > < title > Include SDK - Using SoundCloud API </ title > < script src = " //connect.soundcloud.com/sdk.js " > </ script > </ head > < body > </ body > </ html > Notice that we have included the SDK in our page directly from SoundCloud’s servers. You can also download the SDK and reference to it like: < script src = " sdk.js " > </ script > To test if the SDK gets loaded in your webpage correctly: Open up the page in a browser (Chrome recommended). Open up Developer Console in the browser ( Ctrl + Shift + J , in Chrome). In the Console, type SC and press enter. SC is a Javascript Object created by the SDK which we just inc...
Read more