1) Explain what is Sass? How it can be used?
Sass stands for Syntactically Awesome Stylesheets and was
created by Hampton Catlin. It is an extension of CSS3, adding nested rules,
mixins, variables, selector inheritance, etc.
Sass can be used in three ways
·
As a command line tool
·
As a standalone Ruby
module
·
As a plugin for any
Rack-enabled framework
2) List out the key features for Sass?
Key features for Sass include
·
Full CSS3-compatible
·
Language extensions
such as nesting, variables, and mixins
·
Many useful functions
for manipulating colors and other values
·
Advanced features like
control directives for libraries
·
Well-formatted,
customizable output
3) List out the Data Types that SassScript supports?
SassScript supports seven main data types
1.
Numbers ( eg; 1,5
,10px)
2.
Strings of texts ( g.,
“foo”, ‘bar’, etc.)
3.
Colors (blue, #04a3f9)
4.
Booleans (true or
false)
5.
Nulls (e.g; null)
6.
List of values,
separated by space or commas (g., 1.5em, Arial, Helvetica etc.)
7.
Maps from one value to
another (g., ( key 1: value1, key 2: Value 2))
4) Explain how to define a variable in Sass?
Variables in Sass begin with a ($) sign and variable assignment
is done with a colon(:).
5) Explain what is the difference between Sass and SCSS?
The difference between Sass and SCSS is that,
·
Sass is a CSS pre-processor
with syntax advancements and an extension of CSS3
·
Sass has two syntax
·
The first syntax is
“SCSS” and it uses the .scss extension
·
The other syntax is
indented syntax or just “Sass” and it uses the .sass extension
·
While Sass has loose
syntax with white space and no semicolons, the SCSS resembles more to CSS
Any CSS valid document can be converted to Sass by simply
changing the extension from.CSS to.SCSS.
6) What Selector Nesting in Sass is used for?
In Sass, selector nesting offers a way for stylesheet authors to
compute long selectors by nesting shorter selectors within each other.
7) Explain what is a @extend function used for in Sass?
In Sass, the @EXTEND directive provides a simple way to allow a
selector to inherit the styles of another one. It aims at providing a way for a
selector A to extend the styles from a selector B. When doing so, the selector
A will be added to selector B so they both share the same declarations.
@EXTEND prevents code bloat by grouping selectors that share the same
style into one rule.
8) Explain what is the use of the @IMPORT function in Sass?
The @IMPORT function in Sass
·
Extends the CSS import
rule by enabling import of SCSS and Sass files
·
All imported files are
merged into a single outputted CSS file
·
Can virtually mix and
match any file and be certain of all your styles
·
@IMPORT takes a
filename to import
9) Why Sass is considered better than LESS?
·
Saas allows you to
write reusable methods and use logic statements, e., loops, and conditionals
·
Saas user can access
Compass library and use some awesome features like dynamic sprite map
generation, legacy browser hacks and cross-browser support for CSS3 features
·
Compass also allows
you to add an external framework like Blueprint, Foundation or Bootstrap on top
·
In LESS, you can write
a basic logic statement using a ‘guarded mixin’, which is equivalent to Sass if
statements
·
In LESS, you can loop
through numeric values using recursive functions while Sass allows you to
iterate any kind of data
·
In Sass, you can write
your own handy functions
10) Explain what is the use of Mixin function in Sass? What is the meaning of DRY-ing out a mixin?
Mixin allows you to define styles that can be re-used throughout
the stylesheet without needing to resort to non-semantic classes like
.float-left.
DRY-ing out of a mixing means splitting it into dynamic and
static parts. The dynamic mixin is the one that the user actually going
to call, and the static mixin is the pieces of information that would otherwise
get duplicated.
11) Explain what Sass Maps is and what is the use of Sass Maps?
Sass map is a structured data in a hierarchical way and not just
a bunch of variables. It can help in organizing the code. Some great use of
Sass are
·
It is very useful when
dealing with layers of elements in your project
·
It can be helpful in
color management when there is long list of different color and shade
·
Use icon map for
various social media icons for example: facebook: ‘\e607’ or twitter: ‘\e602’
·
Unlike other
programming libraries, Sass map will consist only of code that is going to be
used
12) Explain how Sass comments are different from regular CSS?
Syntax for comments in regular CSS starts with /* comments…*/,
while in SASS there are two type of comment, the single line comments // and
the multiline CSS comments with /* */.
13) Does Sass support inline comments?
Single line comments // will be removed by the .scss
pre-processor and won’t appear in your .css file
While the comment */ are valid CSS, and will be preserved
between the translation from .scss to your .css file
14) How interpolation is used in Sass?
In Sass, you can define an element in a variable and interpolate
it inside the Sass code. It is useful when you keep your modules in
separate files.
15) Explain when can you use the %placeholders in Sass?
%placeholders in Sass is useful when you want to write styles
that were meant to be extended, but you don’t want the base styles to be seen
in output CSS styles
No comments:
Post a Comment