Explore topic-wise InterviewSolutions in .

SassScript supports seven main data types:

• NUMBERS (1, 5, 10)
• Strings of texts ("foo", "bar")
• Colors (blue, #04a3f9)
• Booleans (true or false)
• NULLS (null)
• List of VALUES, separated by space or commas (1.5em, Arial, Helvetica)
• Maps from one value to ANOTHER ( (KEY 1: value1, key 2: Value 2) )

SassScript supports seven main data types:

It displays the SASSSCRIPT EXPRESSION value as fatal ERROR.

It displays the SassScript expression value as fatal error.

It detects the ERRORS and display the SassScript expression values to the STANDARD error OUTPUT stream.

It detects the errors and display the SassScript expression values to the standard error output stream.

It EVALUATES SASSSCRIPT expression USING command line. You can RUN the SHELL with the sass command line along with -i option.

It evaluates SassScript expression using command line. You can run the shell with the sass command line along with -i option.

SASS SUPPORTS two types of comments −

• Multiline comments − These are written using /* and */. Multiline comments are PRESERVED in CSS output.
• Single line comments − These are written using // FOLLOWED by comments. single line comments are not preserved in CSS output.

Sass supports two types of comments −

• First it checks for Unicode BYTE, next @charset declaration and then RUBY string encoding.
• Next if nothing is SET, then it considers charset encoding as UTF-8.
• Determine character encoding explicitly by USING @charset declaration. Just use "@charset encoding NAME" at the beginning of the stylesheet and SASS will assume that this is the given character encoding.
• If output file of SASS contains non ASCII characters, then it will use the @charset declaration.

SASS input.scss output.css

sass input.scss output.css

Comments take up entire line and enclose all the TEXT NESTED under them and they are line-based in INDENTED SYNTAX.

Comments take up entire line and enclose all the text nested under them and they are line-based in indented syntax.

SASS --WATCH C:rubylibsassstyle.scss:style.css

sass --watch C:rubylibsassstyle.scss:style.css

You can USE = for @MIXIN directive and + for @include directive which REQUIRES LESS typing and MAKES your code simpler, and easier to read.

You can use = for @mixin directive and + for @include directive which requires less typing and makes your code simpler, and easier to read.

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.

CSS properties can be declared in two ways −

• 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.

COMPRESSED CSS style TAKES least AMOUNT of space compared to all other styles. It provides whitespaces only to SEPARATE selectors and newline at the end of the file.

Compressed CSS style takes least amount of space compared to all other styles. It provides whitespaces only to separate selectors and newline at the end of the file.

COMPACT CSS style competitively takes LESS SPACE than Expanded and Nested. It focuses mainly on SELECTORS rather than its PROPERTIES.

Compact CSS style competitively takes less space than Expanded and Nested. It focuses mainly on selectors rather than its properties.

In expanded output styling, each PROPERTY and RULE has its own line. It takes more space COMPARED to nested CSS STYLE.

In expanded output styling, each property and rule has its own line. It takes more space compared to nested CSS style.

Nested style is default STYLING of SASS. This WAY of styling is very useful when you are dealing with large CSS files.

Nested style is default styling of SASS. This way of styling is very useful when you are dealing with large CSS files.

The CSS file that the SASS generates consists of default CSS STYLE which REFLECTS the structure of DOCUMENT. The default CSS styling is good but might not be suitable for all SITUATIONS.

The CSS file that the SASS generates consists of default CSS style which reflects the structure of document. The default CSS styling is good but might not be suitable for all situations.

USING function DIRECTIVE, you can CREATE your own function and USE them in your script context or can be used with any value.

Using function directive, you can create your own function and use them in your script context or can be used with any value.

Variable ARGUMENTS are used to pass any NUMBER of arguments to MIXIN. It CONTAINS keyword arguments passed to the function or mixin.

Variable arguments are used to pass any number of arguments to mixin. It contains keyword arguments passed to the function or mixin.

It is used to INCLUDE arguments in the MIXINS. The arguments which are NAMED can be passed in any ORDER and the default VALUES of argument can be omitted.

It is used to include arguments in the mixins. The arguments which are named can be passed in any order and the default values of argument can be omitted.

There are two types of MIXIN arguments:

• KEYWORD Arguments
• Variable Arguments

There are two types of mixin arguments:

The SassScript VALUES can be taken as arguments in mixins which are GIVEN when MIXIN is INCLUDE and are available as variable WITHIN the mixin.

The SassScript values can be taken as arguments in mixins which are given when mixin is include and are available as variable within the mixin.

It is used to include the MIXIN in the document and STYLES defined by the mixin can be included into the CURRENT rule.

It is used to include the mixin in the document and styles defined by the mixin can be included into the current rule.

It is used to DEFINE the mixins that includes optionally the VARIABLES and argument after the name of the MIXIN.

It is used to define the mixins that includes optionally the variables and argument after the name of the mixin.

In @each directive, a VARIABLE is defined which CONTAINS the value of each ITEM in a list.

In @each directive, a variable is defined which contains the value of each item in a list.

It allows you to generate styles in a LOOP. The counter VARIABLE is USED to set the output for each iteration.

It allows you to generate styles in a loop. The counter variable is used to set the output for each iteration.

The @ELSE if statements are used with the @if directive, whenever the @if statement fails then the @else if statements are tried and if they ALSO fails then the @else is EXECUTED.

The @else if statements are used with the @if directive, whenever the @if statement fails then the @else if statements are tried and if they also fails then the @else is executed.

It is used to selectively EXECUTE the code STATEMENTS BASED on the result of the EVALUATING an expression.

It is used to selectively execute the code statements based on the result of the evaluating an expression.

It is a collection of NESTED RULES which is ABLE to MAKE STYLE block at root of the document.

It is a collection of nested rules which is able to make style block at root of the document.

It is USED to share rules and relationships between SELECTORS. It can extend all another class STYLES in one class and can also apply its own SPECIFIC styles.

It is used to share rules and relationships between selectors. It can extend all another class styles in one class and can also apply its own specific styles.

It set STYLE RULE to DIFFERENT media TYPES.

It set style rule to different media types.

It directly takes the FILENAME to import and all the imported FILES will get COMBINED in a single CSS FILE.

It directly takes the filename to import and all the imported files will get combined in a single CSS file.

You can SET DEFAULT values for VARIABLES by adding !default flag to the end of the variable value. It will not re-assign the value, if it is ALREADY assigned to the variable.

You can set default values for variables by adding !default flag to the end of the variable value. It will not re-assign the value, if it is already assigned to the variable.

It PROVIDES SassScript variables in selectors and property NAMES USING #{ } syntax. You can specify variables or property names WITHIN the CURLY braces.

It provides SassScript variables in selectors and property names using #{ } syntax. You can specify variables or property names within the curly braces.

Parentheses is pair of SIGNS which are usually marked off by round BRACKETS ( ) or square brackets [] which provides symbolic LOGIC that affect the order of OPERATIONS.

Parentheses is pair of signs which are usually marked off by round brackets ( ) or square brackets [] which provides symbolic logic that affect the order of operations.

You can perform boolean OPERATIONS on Sass SCRIPT by using and, or and not OPERATORS.

You can perform boolean operations on Sass script by using and, or and not operators.

Lists REPRESENT SERIES of values which are SEPARATED using COMMAS or SPACE.

Lists represent series of values which are separated using commas or space.

It allows USING COLOR COMPONENTS ALONG with arithmetic operations.

It allows using color components along with arithmetic operations.

It ALLOWS for mathematical OPERATIONS such as addition, subtraction, multiplication and DIVISION.

It allows for mathematical operations such as addition, subtraction, multiplication and division.

There are 5 TYPES of OPERATIONS:

• Number Operations
• COLOR Operations
• STRING Operations
• Boolean Operations
• List Operations

There are 5 types of operations:

SASS SUPPORTS PLACEHOLDER selector USING CLASS or id selector. In normal CSS, these are specified with "#" or ".", but in SASS they are REPLACED with "%".

SASS supports placeholder selector using class or id selector. In normal CSS, these are specified with "#" or ".", but in SASS they are replaced with "%".

You can SELECT the PARENT SELECTOR by using the & character. It tells where the parent selector should be INSERTED.

You can select the parent selector by using the & character. It tells where the parent selector should be inserted.

Nesting is COMBINING of different logic STRUCTURES. Using SASS, we can combine MULTIPLE CSS rules within one ANOTHER. If you are using multiple selectors, then you can use one SELECTOR inside another to create compound selectors.

Nesting is combining of different logic structures. Using SASS, we can combine multiple CSS rules within one another. If you are using multiple selectors, then you can use one selector inside another to create compound selectors.

You can use SASS in three DIFFERENT ways:

• As a command line tool
• As a Ruby MODULE
• As a PLUGIN for Rack ENABLE FRAMEWORK

You can use SASS in three different ways:

SASS supports TWO SYNTAXES namely SCSS and Indented syntax.

• The SCSS (SASSY CSS) is an extension of CSS syntax that makes much easier to maintain large stylesheets and can recognize vendor SPECIFIC syntax and many CSS. SCSS files use the extension .scss.
• The Indented is an older syntax and sometimes just called as Sass. Using this form of syntax, CSS can be written concisely. SASS files use the extension .sass.

SASS supports two syntaxes namely SCSS and Indented syntax.

• It takes time for developer to learn new features present in this pre-processor.
• If more number of people working on the same SITE, then will use the same preprocessor. Some people use the Sass and some people use the CSS to edit the FILES directly. So it will become difficult to WORK with site.
• There are chances of losing benefits of BROWSER's built-in element INSPECTOR.

• It allows writing clean CSS in a programming construct.
• It helps in writing CSS quicker.
• It is 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.

• It is more stable, powerful and compatible with versions of CSS.
• It is super set of CSS and is based on the 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.

• It is pre-processing language which provides indented syntax (its own syntax) for CSS.
• It allows writing code more EFFICIENTLY and easy to maintain.
• It is super set of CSS which contains all the features of CSS and is an open source pre-processor, coded in RUBY.
• It provides document style in GOOD structure 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.

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 STYLE of document cleanly and STRUCTURALLY.

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 style of document cleanly and structurally.