Sass For Beginners The Ultimate Beginners Guide To Learn Sass Step by Step B089MCD36D

Sass for Beginners
The Ultimate Beginner's Guide to Learn Sass Step by Step
2020
1st edition
By John Bach
SASS
INTRODUCTION
QUICK SETUP
VARIABLES
PARTIALS
NESTING
MIXINS + ARGUMENTS
FUNCTIONS
FEATURES
SYNTAX
CHAPTER I
CSS EXTENSIONS IN SASS
NESTED RULES
REFERENCING PARENT SELECTORS USING THE & SYMBOL
NESTED PROPERTIES
PLACEHOLDER SELECTORS:% FOO
CHAPTER II
COMMENTS IN SASS
CHAPTER III
SASSSCRIPT FORMULATION
INTERACTIVE SHELL
VARIABLES: $
DATA TYPES
TEXT STRINGS
LISTS
SQUARE BRACKETS
MAPS
COLORS
FIRST CLASS FUNCTIONS
OPERATIONS
OPERATIONS ON NUMEROLOGY
DIVISION AND COEFFICIENT /
SUBTRACTION, NEGATIVE NUMBERS, AND COEFFICIENTS -
COLOR OPERATIONS
STRING OPERATIONS
BOOLEAN OPERATIONS
LIST OPERATIONS
PARENTHESES
FUNCTIONS
NAMED MEDIA (KEYWORD ARGUMENTS)
INTERPOLATION: # {}
SYMBOL & IN SASSSCRIPT
VARIABLES DEFAULT VALUE:! DEFAULT
CHAPTER IV
SASS / @ RULES
@IMPORT RULE
FRAGMENTS (PARTIALS)
@IMPORT MANIFOLD RULE
FAQ @MEDIA
@EXTEND RULE
HOW THE RULE WORKS @EXTEND
EXTENDING COMPOUND PARAMETERS
MULTIPLE EXTENDS
CHAINING EXTENDS
SELECTOR SEQUENCES
MERGING SELECTOR SEQUENCES
EXPANSION SELECTORS (@ EXTEND-ONLY SELECTORS)
ENSIGN! OPTIONAL
USE @EXTEND INSIDE THE INSTRUCTIONS
INSTRUCTION @ AT-ROOT
THE RULE @ AT-ROOT (WITHOUT: ...) AND THE RULE @ AT-ROOT (WITH: ...)
@DEBUG INSTRUCTION
INSTRUCTION @WARN
@ERROR
CHAPTER V
SASS CONTROL INSTRUCTIONS
()
IF
@IF
@FOR
@EACH
MULTIPLE ASSIGNMENT
@WHILE
CHAPTER VI
MIXTURES IN SASS
DEFINING A MIXIN: @MIXIN

MIXTURES INCLUDED: @INCLUDE
MEDIA (ARGUMENTS)
NAMED MEDIA (KEYWORD ARGUMENTS)
TRAILING COMMAS
VARIABLE ARGUMENTS
PASS THE STYLE BLOCKS TO THE MIXTURE
VARIABLE SCOPE AND CONTENT BLOCKS
CHAPTER VII
SASS FUNCTION INSTRUCTIONS
CHAPTER VIII
OUTPUT STYLES IN SASS
BIFURCATED STYLE NESTED

EXPANDED STYLE
COMPACT STYLE
COMPRESSED MODE
CHAPTER IX
SASS EXPANSION
DEFINE CUSTOM FUNCTIONS IN SASS

CACHE STORES
CUSTOM IMPORTERS
CHAPTER X
SASS FUNCTIONS
DECLARE ()
RANDOM_NUMBER_GENERATOR ()
RANDOM_SEED ()
SIGNATURE ()
ABS ()
ADJUST_COLOR ()
ADJUST_HUE ()
ALPHA ()
APPEND ()
BLUE ()
CALL ()
CEIL ()
CHANGE_COLOR ()
COMPARABLE ()
COMPLEMENT ()
CONTENT_EXISTS ()
COUNTER ()
COUNTERS ()
DARKEN ()
DESATURATE ()
FEATURE_EXISTS ()
FLOOR ()
FUNCTION_EXISTS ()
GET_FUNCTION ()
GLOBAL_VARIABLE_EXISTS ()
GRAYSCALE ()
GREEN ()
HSL ()
HSLA ()
HUE ()
IE_HEX_STR ()
IF ()
INDEX ()
INSPECT ()
INVERT ()
IS_BRACKETED ()
IS_SUPERSELECTOR ()
JOIN ()
KEYWORDS ()
LENGTH ()
LIGHTEN ()
LIGHTNESS ()
LIST_SEPARATOR ()
MAP_GET ()
MAP_HAS_KEY ()
MAP_KEYS ()
MAP_MERGE ()
MAP_REMOVE ()
MAP_VALUES ()
MAX ()
MIN ()
MIX ()
MIXIN_EXISTS ()
NTH ()
OPACIFY ()
OPACITY ()
PERCENTAGE ()
QUOTE ()
RANDOM ()
RED ()
RGB ()
RGBA ()
ROUND ()
SATURATE ()
SATURATION ()
SCALE_COLOR ()
SELECTOR_APPEND ()
SELECTOR_EXTEND ()
SELECTOR_NEST ()
SELECTOR_PARSE ()
SELECTOR_REPLACE ()
SELECTOR_UNIFY ()
SET_NTH ()
SIMPLE_SELECTORS ()
STR_INDEX ()
STR_INSERT ()
STR_LENGTH ()
STR_SLICE ()
TO_LOWER_CASE ()
TO_UPPER_CASE ()
TRANSPARENTIZE ()
TYPE_OF ()
UNIQUE_ID ()
UNIT ()
UNITLESS()
UNQUOTE ()
VARIABLE_EXISTS ()
ZIP ()
Introduction
Sass stands for Syntactically Awesome Stylesheets. Sass and is basically just
an extension to CSS that help us write more flexible styles.
It helps us make larger and complicated stylesheets clearer to understand and

easier to maintain. Thanks to features like variables, mixins, nesting,
inheritance the code is more organized, allowing us to work quicker.
Be aware that when we write in sass, browsers are not going to understand
our code, because it’s not CSS we’re writing, so we need to use a compiler to
compile our sass code to CSS.
There are several apps that help you achieve this:
* Hammer
* CodeKit
* Compass
* Koala
We’re not going to cover the whole process of installing and compiling sass
in this section. If you want to experiment and follow me through this book, I
suggest using an online editor such as Codepad or whatever you prefer,
without installing it on your machine.
A preprocessor like Sass or Less can help modularize your style sheets and
add a lot of useful functionality lacking in native CSS. It’s a lot easier to get
started than you might think, so here’s a quick overview of setup and
commonly used functions.
Quick setup
Check the specific install for your setup, but for a typical Node.js or React
project with styling within src folder, setup is as easy as running npm install -
-save node-sass-chokidar *bugfree wrapper for node-sass. Then in your
package.json add underscripts:
"scripts": {
"build-css": "node-sass-chokidar src/ -o src/",
"watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive",
change your .css files to .scss and run npm run watch-css and you’re good to
start DRYing up your CSS with the following:
Variables
Save any normal CSS value into a reusable variable, by adding $variable-
name:
$sky: skyblue;
$grass: lawngreen;header {
background-color: $sky;
}footer {
background-color: $grass;
}
A bonus feature with variables is their local scope within a CSS selectors, so
you can stop worrying about global namespace.
Partials
Clean up your files by seperating into partials labeled with an underscore to

alert SCSS of a partial, ex. _variables.scss and then place @import ‘variables'
at top of any base file where you’ll use those rules. An advantage over CSS’s
native @import being your Sass compiles all down to one CSS file —
reducing HTTP requests and page load times for users.
Nesting
Mimicking HTML’s visually nested hierarchy that CSS lacks, you can nest
your styles within a parent for more clarity. Child selectors inherit styles from
their parent.
@import ‘variables';.container {
font-family: Arial, Helvetica, sans-serif; .child1 {
color: $sky;
font-size: 10px;
}
.child2 {
color: $grass;
font-size: 40px;
}}
Mixins + Arguments
Group common bundles of CSS declarations into a @mixin, then reuse them
throughout your files with @include. Optionally, you can add arguments and
default parameters, to help customize. A simple button for example:
@mixin button-color($color: green) {

background-color: $color;
color: white;
text-align: center;
font-size: 16px;
}// example use of mixin below replacing default green with red.green-btn {
@include button-color();
}.delete-btn {
$red: #ff4500;
@include button-color($red)
}
Functions
Though you can roll your own functions with use of @mixin method above,
Sass comes with tons of prebuilt functions ready to use in any SCSS file. An
example of a few interesting ones:
lighten($color, $amount) : Makes a color lighterdarken($color, $amount) :

Makes a color darkeradjust-hue($color, $degrees) : Changes the hue of a
colormix($color1, $color2, [$weight]) : Mixes colors + weight of first// also
below return values of a color to use for conditionalshue($color) : Gets the
hue component of a colorsaturation($color) : Gets the saturation component
of a colorlightness($color) : Gets the lightness component of a color
Other key features of Sass are@function for creating your own functions and
control directives like @if, @for, @each, and @while to guide your function
logic. There are also tons of amazing libraries of mixins like bourbon,
breakpoint (for media queries), and buttons (for…buttons).
Features
- Full CSS compatibility.

- Extending the CSS language such as adding variables, bifurcation,
mixins, etc.
- There are many useful functions for color manipulation and other
values.
- Enjoy advanced features like control directives for libraries.
- Well coordinated with the ability to customize outputs.
Syntax
There are two formats available for Sass technology. First, the syntax known
as SCSS (for Sassy CSS) that we will use in this documentation. This syntax
is an extension of the CSS language, meaning that every valid CSS file is an
automatically valid SCSS file without changing the meaning. In addition, the
SCSS syntax understands most of the CSS tricks and browser-specific
formats, such as the old filter feature of IE. This format is enhanced by the
Sass features shown below. The file extension using this format is scss.
The second syntax is old and is known as the indented syntax (or “Sass”
only), and provides a more concise way to write CSS by using the offset
instead of the curly brackets to denote bifurcation and selectors, and new
lines instead of the semicolon to separate the properties. Some people find
this easier to read and faster to write than SCSS. The displacement wording
has the same advantages as the SCSS wording although some of it is
formulated in a slightly different way, and this is explained in the reference to
the oblique wording. The file extension for using this format is sass.
Both formats can import files written to the other, and files can be
automatically converted from one of the two formats to the other using the
sass-convert command-line tool:
# Convert Sass to SCSS

$ sass-convert style.sass style.scss
# Convert SCSS to Sass
$ sass-convert style.scss style.sass
Note that this command does not create CSS files. For that, use the Sass
command, which we will explain elsewhere.
Chapter I
CSS extensions in Sass
Nested Rules
Sass allows CSS rules to bifurcate within each other and in this case the
internal rule is applied only within the external specifier it contains (outer
rule's selector). For example, see the following code:
#main p {
color: # 00ff00;
width: 97%;
.redbox {
background-color: # ff0000;
color: # 000000;
}
}
You will be charged to:
#main p {
color: # 00ff00;
width: 97%; }
#main p .redbox {
color: # 000000; }
This helps avoid repeating parent selectors, and makes complicated CSS
layouts that contain a lot of manifold parameters simpler. For example, see
the following code:
#main {
width: 97%;
p, div {
font-size: 2em;
a {font-weight: bold; }
}
pre {font-size: 3em; }

}
#main {
width: 97%; }
#main p, #main div {
font-size: 2em; }
#main p a, #main div a {
font-weight: bold; }
#main pre {
font-size: 3em; }
Referencing Parent Selectors using the & symbol
Sometimes it is useful to use the parent parameter of a manifold rule in a way

other than the default method. For example, you may want to adopt special
patterns when the mouse pointer passes that marker (pseudo-class: hover) or
when the body element has a specific class. In these cases, you can explicitly
specify where the parent parameter should be inserted by using the & symbol.
For example, see the following code:
a{
font-weight: bold;
text-decoration: none;
&: hover {text-decoration: underline; }
body.firefox & {font-weight: normal; }
}
a{
font-weight: bold;
text-decoration: none; }
a: hover {
text-decoration: underline; }
body.firefox a {
font-weight: normal; }
The & symbol will be changed to the parent specifier as it appears in the CSS
lines. This means that if you have a deep branched rule (i.e. branched more
than one level), then the value of the parent parameter is fully recognized
before replacing the & character. For example, see the following code:
#main {
color: black;
a{
font-weight: bold;
&: hover {color: red; }
}
}
#main {
color: black; }
#main a {
#main a: hover {
color: red; }
In the case of compound selectors, they must appear & at the beginning, but
they can be followed by a suffix, which will be added to the parent
parameter. For example, see the following code:
#main {
color: black;
& -sidebar {border: 1px solid; }
}
#main {
color: black; }
# main-sidebar {
border: 1px solid; }
If a suffix cannot be applied to the parent specifier, Sass will launch an error.
Nested Properties
CSS has quite a few properties in namespaces; For example, the font-family,
font-size, and font-weight properties are all in the font namespace. In CSS, if
you want to set a set of features in the same domain name, you will have to
write it every time. Sass provides an abbreviation for this process, as it
suffices to write the namespace once and then put all of the sub-properties
within it. For example see the following code:
.funky {
font: {
family: fantasy;
size: 30em;
weight: bold;
}
}
.funky {
font-family: fantasy;
font-size: 30em;
The property propertypace itself can be given a value. See for example the
following:
.funky {
font: 20px / 24px fantasy {
weight: bold;
}
}
.funky {
font: 20px / 24px fantasy;
font-weight: bold;
}
Placeholder Selectors:% foo
Sass technology supports a special type of selector called a "placeholder."

These parameters look like class selectors and id selectors, except for the
symbol # and the symbol. They will be changed to%. These settings should
be used with the @extend instruction. Refer to more information for @
extended-Only Selectors.
Rules that use placeholders, without the @extend instruction, will not be
translated to CSS.
Chapter II
Comments in Sass
Sass supports the standard format for multi-line comments with / * * /

approved in CSS, as well as single-line comments using //. Multiline
comments are kept in CSS outputs wherever possible while single-line
comments are removed. For example, look at the following code:
/ * This comment
* Its length is several lines.
* CSS when using the comments structure in
* It will appear in the exported file. * /
body {color: black; }
// These comments are only one line in length.

// It will not appear in the compiled file
// CSS because it uses a format that is not supported by language
a {color: green; }
/ * This comment
* Its length is several lines.
* CSS when using the comments structure in
* It will appear in the exported file. * /
body {
color: black; }
a{
color: green; }
If the first character of a multi-line comment is!, This comment will always
be included in the CSS output even in compressed output modes. This is
useful if you want to add copyright notices to the resulting CSS file.
Multiline comments are inserted into the resulting CSS file after
interpolation. The following code explains this:
$ version: "1.2.3";
/ * This CSS is generated by My Snazzy Framework version # {$

version}. * /
/ * This CSS is generated by My Snazzy Framework version 1.2.3. * /

Chapter III
SassScript formulation
Sass, in addition to the CSS standard syntax, supports a small set of

extensions called SassScript. SassScript allows properties to use variables,
arithmetic operations, and other functions. SassScript can be used in the value
of any property.
It can also be used to generate selectors and attribute names, which is useful
when writing mixins, as this is done using interpolation.
Interactive Shell
You can try SassScript easily with the interactive shell. To run this shell, type
the sass command on the command line followed by the -i option, then enter
in the prompt any valid expression in SassScript to evaluate it and print the
results.
$ sass -i
>> "Hello, Sassy World!"
Hello, Sassy World!
>> 1px + 1px + 1px
3px
>> # 777 + # 777
#eeeeee
>> # 777 + # 888
white
Variables: $
The intuitive way to use SassScript is to use variables. Variables begin with
the dollar sign ($), and are set as well as CSS properties.
$ width: 5em;
You can then refer to it in features, such as:
#main {
width: $ width;
}
Variables will be visible only at the level of the branched setting where they
are defined or not. If you are defined outside all of the complex specifiers,
they will be available everywhere. It can also be made available everywhere
manually by using the Flags! Global. See for example:
#main {
$ width: 5em! global;
width: $ width;
}
#sidebar {
width: $ width;
}
#main {
width: 5em;
}
#sidebar {
width: 5em;
}
For historical reasons, there is no difference between hyphens and

underscores in variable names (and all other Sass identifiers). If you define a
variable example as $ main-width, you can access it with the name $
main_width as well, and vice versa.
Data types
SassScript supports eight types of data:
- numbers (eg 1.2, 13, 10px).

- Text strings, with and without the quotation mark (such as 'foo', 'bar', and baz).
- Colors (like blue, # 04a3f9, and rgba (255, 0, 0, 0.5)).
- Boolean values (such as true and false).
- Bad value (such as null).
- Lists with values separated by spaces or commas (such as 1.5em 1em 0 2em or Helvetica,
Arial, sans-serif).
- Maps that connect one value to another (such as (key1: value1, key2: value2)).
- Function references.
SassScript also supports all other types of CSS property values, such as
Unicode encoding fields and declarations! Important. However, these types
are not treated specially, but are treated as unquoted text strings.
Text strings
In CSS there are two types of strings: cited text strings, such as 'Lucida
Grande' or 'http://sass-lang.com', and non-cited text strings, such as sans-serif
or bold. SassScript recognizes both types and will be the same type used in
the sass file and the resulting CSS file.
There is one exception to that rule: when you use interpolation {{# #}, the
strings of text quoted will not be quoted. This makes it easier to use mixins'
names. See for example:
@mixin firefox-message ($ selector) {

body.firefox # {$ selector}: before {
content: "Hi, Firefox users!";
}
}
@include firefox-message (". header");
body.firefox .header: before {

content: "Hi, Firefox users!"; }
Lists
Sass uses menus to represent CSS declaration values such as margin: 10px
15px 0 0 or font-face: Helvetica, Arial, sans-serif. Lists are only a series of
other values separated by either spaces or commas. In fact, single values are
lists as well as single lists.
Menus are of no use without the SassScript menu functions. For example, the
nth function can access the elements in the list, the join function includes
several lists together, and the append function adds elements to the lists; The
@each statement can add styles to every element in the list.
In addition to simple values, lists can contain other lists. For example, the
1px 2px, 5px 6px list is a binary list that contains the 1px 2px list and the 6px
5px list. If the internal lists use the same comma as the external list, the
parentheses should be used to indicate the beginning and end of the internal
list. For example, the list (1px 2px) (5px 6px) is a binary list that contains the
1px 2px list and the 5px 6px list. The difference is that the outer and inner list
are separated by white spaces, unlike the previous example where the outer is
separated by a comma and the interior is white.
When converting lists to CSS, sass does not add parentheses as CSS does not
recognize parentheses. This means that the list (1px 2px) (5px 6px) and the
list 1px 2px 5px 6px will look the same when they are compiled into CSS.
However, you will not be the same when writing them in sass, as the first is a
list that contains two lists, while the second is a list that contains four
numbers.
Lists can be empty of any element and are represented only by parentheses ()
(which can also mean a blank [map]). This type of list cannot appear directly
in the CSS output. If you try using font-family: () for example, then sass will
make a mistake. If a list contains an empty list or null such as 2px 1px () 3px
or 1px 2px null 3px, empty lists and numeric values will be removed before
converting them to CSS.
Comma-separated lists may contain an extra comma, which is useful because

it allows you to represent a single-element list. For example, (, 1) is a list that
contains 1 and (1 2 3,) it is a comma-separated list that contains a list
separated by white spaces containing 1, 2 and 3.
Square brackets
Lists can also be written using square brackets. Square bracketed lists are
used as line names in CSS network charts, but they can also be used in sass
code, just like any other list. Square brackets can be separated by white
spaces or commas.
Maps
Maps are a link between values called keys and other values. The keys are
used to find values and make it easier to group them into named groups and
to reach those groups dynamically. Maps have no direct equivalent in CSS,
although their wording is similar to media query expressions.
$ map: (key1: value1, key2: value2, key3: value3);
Unlike lists, maps must always be enclosed in parentheses, and should be

separated by commas. The keys and their values can be any SassScript
object. It is not possible to associate more than one value on the map with the
same key (but that value can be set), while a specific value can be associated
with more than one key.
Maps are handled similarly to lists, using the SassScript functions. For
example, the map-get function looks for specific values on the map, and the
map-merge function adds values to the map. The @each instruction can be
used to add patterns to each key / value pair on the map. The order of pairs in
the map has not changed since its creation.
Maps can be used anywhere menus are used. When used by a menu function,
it will be treated as a list of pairs. List functions such as the map (key1:
value1, key2: value2) will be treated as the branched list key1 value1, key2
value2. Lists cannot be treated as maps except for the blank list. () Represents
a map that does not contain any pairs (key / value) and a list that does not
contain any elements at the same time.
It is worth noting that map keys can be any type of Sass data. The format
used to define the map allows the use of any SassScript expression that will
be evaluated and determined to identify the value of the key.
Maps cannot be translated to CSS as their use as variables or data for CSS
functions will cause an error. Use the inspect ($ value) function to produce a
text string when outputting maps in the resulting CSS file.
Colors
All color expressions in CSS return a color value in SassScript. This includes
a large number of named labels, which are indistinguishable from unquoted
text strings.
Sass will be compressed mode. The shortest possible color representation in

CSS. For example, # FF0000 will be translated to red, while blanchedalmond
will be translated to #FFEBCD.
A common problem with using named colors is that since sass prefers the
same output format as it did in other output modes, interpolated colors in a
specific parameter will become invalid when compressed at that time. This
problem can be avoided by always putting named colors in double quotes if
you want to use them to create a marker.
First Class Functions
The reference to a specific function reference can be obtained by using the

get-function ($ function-name) expression. When a function pointer is passed
to the call ($ function, $ args ...), then the function that it points to is called.
CSS does not translate first-degree functions directly, and any attempt to do
so will cause an error.
Operations
All types support equalization operators (== and =!). In addition, each type
supports its own parameters.
Operations on numerology
SassScript supports regular arithmetic operations on numbers (addition +,

subtraction -, multiplication *, division /, and the rest of division by%).
Mathematical sass functions store units during calculations. This means that,
as in practice, you cannot operate on numbers with incompatible units (such
as adding one value of one pixel to a value of one em), and one will be the
result of multiplying two numbers with the same one and one square (10px *
10px == 100px * px). Remember that one square px * px is not valid in CSS,
and Sass will launch an error if you try to use invalid units in CSS.
Comparative coefficients (<,>, = <, =>) are also supported by numbers, and
equalization coefficients (== and =!) Are supported by all types.
Division and Coefficient /
CSS allows the parameter / to appear in the property values as a way to

separate numbers. Since SassScript is an extension of properties formatting in
CSS, it must support this type of formatting, and also allow the use of the /
operator parameter at the same time. By default, this means that if two
numbers are separated by the / parameter in SassScript, they will appear the
same in the resulting CSS file.
There are three cases in which the symbol / will be interpreted as a division.
These cases include most of the uses of the division process:
1 If the value, or part of it, is stored in a variable or returned by a

function.
2 If the value is enclosed in parentheses, unless these parentheses are
outside a list and the value is inside them.
3 If the value is part of another mathematical expression.
For example see the following code:
p{
font: 10px / 8px; // regular, not a CSS division
$ width: 1000px;
width: $ width / 2; // Using a variable, division occurs
width: round (1.5) / 2; // Using a function, division occurs
height: (500px / 2); // Using parentheses, division occurs
margin-left: 5px + 8px / 2px; // Use +, division occurs
font: (italic bold 10px / 8px); // Inside a list, parentheses are not counted
}

p{
font: 10px / 8px;
width: 500px;
height: 250px;
margin-left: 9px; }
If you want to use variables while maintaining the regular formatting of the
parameter / in CSS, you can use the {} # interpolation to insert it directly. For
example, see the code:
p{
$ font-size: 12px;
$ line-height: 30px;
font: # {$ font-size} / # {$ line-height};
}
p{
font: 12px / 30px; }
Subtraction, negative numbers, and coefficients -
The parameter - can represent several different things in CSS and Sass. It can
be a minus operator (as in 5px - 3px), or the beginning of a negative number
(as in -3px), or it can be a single negative negation operator (such as - $ var),
and it can be part of an identifier (Such as font-weight). In most cases, the
function of the symbol can be known from the context, and some other cases
may be confused. Here are these recommendations as a general rule:
Always put a white space before and after labs when using to subtract.
Place a space before - but not after in the case of negative numbers or
single negation.
Put a single negative in parentheses if it is in a space-separated list, such as
10px (- $ var).
The precedence of the different meanings of the coefficient - is in the

following order:
Being part of an identifier. That is, a-1 is an unquoted text string with the
value of "a-1", and units are excluded only. Sass usually allows any valid
identifier to be used as an identifier, but it may not be correct for identifiers to
contain a condition followed by a number. That is, 5px-3px is like 5px-3px.
The presence of two numbers without a white space indicates a
subtraction, so expression 1-2 is exactly the same as expression 1-2.
It exists before a number but is unprecedented by a number indicating that
that number is a negative number, so the term 1 -2 is a list containing 1 and
-2.
Its presence between two numbers regardless of the existence of spaces
indicates the subtraction process, so the expression 1 - $ var is the same as
the expression 1 - $ var.
Its presence before a certain value means that it is a single negation factor.
In other words, the negative value of the number is returned when it was
before it.
Color Operations
Chromatic values support all mathematical operations, as these operations are

performed on the color composites of the fold. That is, the process is carried
out on a red, green and blue vehicle. See the following example:
p{
color: # 010203 + # 040506;
}
It will be calculated 01 + 04 = 05, 02 + 05 = 07 and 03 + 06 = 09, and will be

spent to:
p{
color: # 050709; }
The use of color functions is often preferred to the use of mathematical

operations to complete the process and obtain the same result. Mathematical
operations are also applied to numbers and colors, and also to the fold. See,
for example:
p{
color: # 010203 * 2;
}
It will be calculated 01 * 2 = 02, 02 * 2 = 04 and 03 * 2 = 06, and will be

spent to:
p{
color: # 020406; }
Colors with an alpha channel (that is, created by one of the rgba and hsla
functions) must have the same transparency value in order to perform the
arithmetic operations on them. These processes do not affect the value of
transparency. See for example:
p{
color: rgba (255, 0, 0, 0.75) + rgba (0, 255, 0, 0.75);
}
p{
color: rgba (255, 255, 0, 0.75); }
The opacity of a channel can be adjusted for a specific color using the opacify
and transparentize functions. See the following example:
$ translucent-red: rgba (255, 0, 0, 0.5);

p{
color: opacify ($ translucent-red, 0.3);
background-color: transparentize ($ translucent-red, 0.25);
}
The code will be spent to:
p{
color: rgba (255, 0, 0, 0.8);
background-color: rgba (255, 0, 0, 0.25); }
The filters feature in the IE browser requires all colors to include the
transparency channel, and to be exactly #AABBCCDD. You can easily
convert the color using the ie_hex_str function. See the following example:
$ translucent-red: rgba (255, 0, 0, 0.5);

$ green: # 00ff00;
div {
filter: progid: DXImageTransform.Microsoft.gradient (enabled =
'false', startColorstr = '# {ie-hex-str ($ green)}', endColorstr = '# {ie-hex-
str ($ translucent-red)} ');
}
div {
filter: progid: DXImageTransform.Microsoft.gradient (enabled =
'false', startColorstr = # FF00FF00, endColorstr = # 80FF0000);
}
String Operations
The plus operation can be used to combine text strings.
p{
cursor: e + -resize;
}
The above code will be translated to:
p{
cursor: e-resize; }
Note that if a quoted text string is added to a non-quoted one (i.e. the quoted
text string is to the left of the + sign), the result is a quoted text string.
Likewise, if an unquoted text string is added to a quoted one (the unquoted
text string to the left of the + sign), the result is an unquoted text string. For
example, see the following code:
p: before {
content: "Foo" + Bar;
font-family: sans- + "serif";
}
p: before {
content: "Foo Bar";
font-family: sans-serif; }
By default, if two values are placed next to each other, they will be combined
with one space. See, for example, the code:
p{
margin: 3px + 4px auto;
}
p{
margin: 7px auto; }
Interpolation ({} #) can be used within a text string to fill a dynamic value
inside a string, see for example the following code:
p: before {
content: "I ate # {5 + 10} pies!";
}
p: before {
content: "I ate 15 pies!"; }
Null is treated as an empty string when text strings are met.

$ value: null;
p: before {
content: "I ate # {$ value} pies!";
}
p: before {
content: "I ate pies!"; }
Boolean Operations
SassScript supports the use of the and operator and the or not operator with
Boolean values.
List Operations
Lists do not support any special transactions, but are handled using list
functions.
Parentheses
Brackets can be used to arrange operations. For example, see the following
code:
p{
width: 1em + (2em * 3);
}
p{
width: 7em; }
Functions
There are many useful functions defined in SassScript that can be called
using the regular syntax of CSS functions.
p{
color: hsl (0, 100%, 50%);
}
p{
color: # ff0000; }
Refer to the Sass functions page for a complete list of available functions.
Named media (Keyword Arguments)
Sass functions can be called using explicitly named arguments. The example
above can be written as:
p{
color: hsl ($ hue: 0, $ saturation: 100%, $ lightness: 50%);
}
This format may be less concise, but it can make the style file's readability
easier. It will also allow functions to provide more flexible interfaces, and
pass many media without having to call them.
The named arguments can be passed in any order, and data with default
values can be deleted. Since the named arguments are the names of variables,
there is no difference between using the underscores _ and using the regular
hyphens -.
Interpolation: # {}
You can also use variables in the SassScript language for selectors and
attribute names using the {} # interpolation syntax.
$ name: foo;
$ attr: border;
p. # {$ name} {
# {$ attr} -color: blue;
}
p.foo {
border-color: blue; }
Interpolation {} # can also be used in attribute values. In most cases, this is

not better than using variables, but using the formula {} # as all adjacent
operations will be treated as a regular CSS syntax. For example:
p{
$ font-size: 12px;
$ line-height: 30px;
font: # {$ font-size} / # {$ line-height};
}

p{
font: 12px / 30px; }
Symbol & in SassScript
The & symbol in SassScript indicates the current parent specifier, just as it is
used in the specifiers. It is a comma separated list of spaces separated lists.
See for example:
.foo.bar .baz.bang, .bip.qux {

$ selector: &;
}
The value of $ selector in the example is ((".foo.bar" ".baz.bang"),

".bip.qux"). Combined markers are enclosed in quotation marks to indicate
that they are text strings, but they may not be quoted.
Even if the parent parameter does not contain a comma or a distance, the
symbol value & will always have two levels of bifurcation, so that they can
be reached in a uniform way.
If there is no AP specifier, then the value & will be null. This means that you
can use it in a mixin to check for the presence of the parent parameter.
@mixin does-parent-exist {
@if & {
&: hover {
color: red;
}
} @else {
a{
color: red;
}
}
}
Variables default value:! Default
You can set a default value for the variable if it is not already set by adding
the banner! Default, track that value. This means that whenever you assign a
value to the variable, that value (the default) will not be assigned to it again.
If you do not assign a value to the variable, then its value will be the default
default value. See the following code for example:
$ content: "First content";

$ content: "Second content?" ! default;
$ new_content: "First time reference"! default;
#main {
content: $ content;
new-content: $ new_content;
}
#main {
content: "First content";
new-content: "First time reference"; }
The null value assigned to the variable is treated as an unlisted value, so the
default value will be assigned to it at that time.
$ content: null;
$ content: "Non-null content"! default;
#main {
content: $ content;
}
#main {
content: "Non-null content"; }
Chapter IV
Sass / @ rules
Sass supports all CSS rules that begin with the @ symbol, as well as other
Sass language called directives. These rules have different effects in Sass,
which we will discuss in a little while. See also control directives and mixin
directives.
@Import rule
Sass expands the usage of the @import rule for CSS to allow it to import
SCSS and Sass files. All imported SCSS and Sass files will be combined in
one CSS file. In addition, the variables defined in the imported files can be
used in the main file.
Sass searches for other Sass files in the current folder, and in the Sass files
folder in Rack, Rails, and Merb. Additional search folders can also be
specified using the: load_paths or --load-path option on the command line.
The rule @import takes the name of the file to import. By default, you search
for a Sass file to import directly, but there are some circumstances that cause
it to drain into the @import rule for CSS:
If the file name extension is .css.

If the file name starts with http: //.
If the filename is url ().
If @import has any media queries.
If none of the above conditions is met and the file extension is .scss or .sass,
then the specified Sass file or SCSS file will be imported. If there is no
extension, Sass will try to find a file according to the given name, whether it
is .scss or .sass to import it. See the following example:
@import "foo.scss";
or:
@import "foo";
Both will import the foo.scss file, while:
@import "foo.css";
@import "foo" screen;
@import "http://foo.com/bar";
@import url (foo);
@import "foo.css";
@import "foo" screen;
@import "http://foo.com/bar";
@import url (foo);
Multiple files can also be imported simultaneously using the @import rule.
For example see the following code:
@import "rounded-corners", "text-shadow";
The rounded-corners file and the text-shadow file will be imported. The
import statement may contain (# {}) but with some restrictions as it is not
possible to import a Sass file dynamically using variables; Compliance is
only valid for CSS imports. As such, it only works with url () imports. For
example see the following code:
$ family: unquote ("Droid + Sans");
@import url ("http://fonts.googleapis.com/css?family=#{$family}");
@import url ("http://fonts.googleapis.com/css?family=Droid+Sans");

Fragments (Partials)
If you want to import a SCSS or Sass file without being compiled into a CSS
file, add an underscore to the beginning of the file name as this will tell Sass
not to translate it into a regular CSS file. You can then import those files
without using the underscore.
For example, if you have a _colors.scss file, a file named _colors.css will not
be created and you can execute the command:
@import "colors";
Which will import the _colors.scss file.
It is worth noting that it is not permissible to use a partial and another

undivided file with the same name in the same folder. For example, the
_colors.scss file may not be in the same folder as colors.scss.
@Import manifold rule
Although it is often useful to import files using @import at the top level of
the file, it is possible to import them using CSS rules and @media rules. Like
@import at the base-level @import, this includes the contents of the file
imported by @import. However, the imported rules will branch out in the
same location as the original @import rule.
For example, if example.scss contains:
.example {
color: red;
}
So the code will run:
#main {
@import "example";
}
to me:
#main .example {
color: red;
}
Directives that are only allowed in the basic file level, such as @mixin or
@charset, may not be used in files imported via @import in forked context.
@Import may not be branched into mixins or control directives.
FAQ @media
@Media's instructions in Sass behave the same as you would in CSS with
one additional ability that it can bifurcate within CSS rules. If a @media
instruction appears within a CSS rule, it will be circulated up to the highest
level in the stylesheet, and all markers within its base will be placed inside
the rule. This will facilitate adding media-specific styles without having to
repeat the parameters or break the sequence of the styles file. For example,
see the following code:
.sidebar {
width: 300px;
@media screen and (orientation: landscape) {
width: 500px;
}
}
.sidebar {
width: 300px; }
.sidebar {
width: 500px; }}
@Media (@media queries) queries can also be branched into each other, and
the queries will then be aggregated using the and operator. For example, see
the code:
@media screen {
.sidebar {
@media (orientation: landscape) {
width: 500px;
}
}
}

.sidebar {
width: 500px; }}
Finally, @media queries can contain SassScript expressions (including

variables, functions, and operators) instead of feature names and values. See
the following example:
$ media: screen;
$ feature: -webkit-min-device-pixel-ratio;
$ value: 1.5;
@media # {$ media} and ($ feature: $ value) {

.sidebar {
width: 500px;
}
}
@media screen and (-webkit-min-device-pixel-ratio: 1.5) {

.sidebar {
width: 500px; }}
@Extend rule
In some cases when designing a page, you may need a particular class to have
all the styles of another class in addition to its own styles. The most common
way to do this is with the absolute general class and the custom class
specified in the HTML code. For example, suppose we have one design for
normal errors and one for serious errors, To do this, we can write in the
following HTML file:
<div class = "error seriousError">

Caution, you have been hacked
</div>
We write the format as follows:
.error {
border: 1px # f00;
background-color: #fdd;
}
.seriousError {
border-width: 3px;
}
Unfortunately, this means that we must always remember to use the .error
parameter with .seriousError. This will be a maintenance burden and lead to
software defects that are difficult to detect and can negatively affect the
readability of the HTML file. The @extend instruction will avoid these
problems by telling Sass that one of the selectors will inherit the other's
patterns. For example, see the following code:
.error {
border: 1px # f00;
}
.seriousError {
@extend .error;
border-width: 3px;
}
.error, .seriousError {
border: 1px # f00;
}
.seriousError {
border-width: 3px;
}
This means that all of the patterns defined in the .error parameter will also be
applied to the .seriousError parameter in addition to its. In fact, all elements
of the .seriousError class are also elements of .error. Other rules that use
.error will also apply to .seriousError. For example, we assign patterns to
hacker errors such as:
.error.intrusion {
background-image: url ("/ image / hacked.png");
}
Then the background image of <<div class = "seriousError intrusion"> will

also be hacked.png.
How the rule works @extend
The @extend rule works by inserting the extended specifier (for example
.seriousError) everywhere in the style file where the extended specifier (such
as .error) appears. Accordingly, the previous example:
.error {
border: 1px # f00;
}
.error.intrusion {
background-image: url ("/ image / hacked.png");
}
.seriousError {
@extend .error;
border-width: 3px;
}
Will be disbursed to:
border: 1px # f00;
background-color: #fdd; }
.error.intrusion, .seriousError.intrusion {
background-image: url ("/ image / hacked.png"); }
.seriousError {
border-width: 3px; }
When merging the specifiers, the @extend rule is smart enough to avoid
unnecessary repetition, so the expression .seriousError.seriousError will be
translated to .seriousError. In addition, it will not produce markers that
cannot match anything, such as the # main # footer.
.
Extending compound parameters
Class selectors are not the only ones that can be expanded because any
parameter can expand only one element, such as .special.cool, a: hover, or
.user [href ^ = "http: //"]. See the following example:
.hoverlink {
@extend a: hover;
}
This means that all patterns defined for a: hover will be applied, as is the case
with the classes, also to the .hoverlink parameter. For example, you will run
the following code:
.hoverlink {
@extend a: hover;
}
a: hover {
text-decoration: underline;
}
to me:
a: hover, .hoverlink {
As with the .error.intrusion parameter above, any rule that uses a: hover will
also work on .hoverlink even if it has other parameters. The following code:
.hoverlink {
@extend a: hover;
}
.comment a.user: hover {
font-weight: bold;
}
.comment a.user: hover, .comment .user.hoverlink {

Multiple Extends
A single marker can expand multiple markers. This means that it will inherit
the patterns of all the parameters that are extended. For example, you will run
the following code:
.error {
border: 1px # f00;
}
.attention {
font-size: 3em;
}
.seriousError {
@extend .error;
@extend .attention;
border-width: 3px;
}
to me:
border: 1px # f00;
.attention, .seriousError {
font-size: 3em;
background-color: # ff0; }
.seriousError {
In fact, every element of the .seriousError class will also be of the .error class
and .attention class and will then have priority over the styles defined last in
the file, meaning that the background color of the .seriousError parameter
will be # ff0 and not #fdd, because .Attention find out after .error.
Multiple expansion can also be written using a list of selectors separated by

commas. For example, the use of @extend .error, .attention would be exactly
the same as using @extend .error; @extend .attention.
Chaining Extends
It is possible to expand a predefined parameter such as the following code:
.error {
border: 1px # f00;
}
.seriousError {
@extend .error;
border-width: 3px;
}
.criticalError {
@extend .seriousError;
position: fixed;
top: 10%;
bottom: 10%;
left: 10%;
right: 10%;
}
Anything with the .seriousError class will also have the .error class; And
everything with the .criticalError class will also have the .seriousError class
and the .error class, the example above will be categorized into:
.error, .seriousError, .criticalError {

border: 1px # f00;
.seriousError, .criticalError {
.criticalError {
position: fixed;
top: 10%;
bottom: 10%;
left: 10%;
right: 10%; }
Selector Sequences
Sequential settings, such as .foo .bar or .foo + .bar currently cannot be

expanded, however branched settings can use the @extend rule. For example,
you will run the code:
# fake-links .link {
@extend a;
}
a{
color: blue;
&: hover {
}
}
to me:
a, # fake-links .link {
color: blue; }
a: hover, # fake-links .link: hover {
Merging Selector Sequences
Sometimes successive markers expand a marker that appears in another
sequence marker. In this case, the following selectors must be combined,
such as:
#admin .tabbar a {
font-weight: bold;
}
#demo .overview .fakelink {
@extend a;
}
It is true that it is technically possible to generate all of the parameters that

can match both of the successive parameters, but this will make the style file
very large. The example above would require ten markers, but Sass would
only generate potentially useful parameters. When there are no two common
parameters between the two consecutive determinants to be combined, two
new parameters will be created: one of which includes the first sequence of
the pre-second parameter, and the other of the second sequence of the pre-
first. Next example:
#admin .tabbar a {
font-weight: bold;
}
#demo .overview .fakelink {
@extend a;
}
#admin .tabbar a,
#admin .tabbar #demo .overview .fakelink,
#demo .overview #admin .tabbar .fakelink {
If the two successive parameters share some of the determinants, then those
determinants are combined with the differences being modified (if any). In
the following example, both successive parameters contain ID #admin, so the
resulting settings will combine these two identifiers:
#admin .tabbar a {
font-weight: bold;
}
#admin .overview .fakelink {
@extend a;
}
#admin .tabbar a,
#admin .tabbar .overview .fakelink,
#admin .overview .tabbar .fakelink {
Expansion selectors (@ extend-Only Selectors)
Sometimes you may need to write styles for only classes intended for
expansion, and you do not want to use them directly in the HTML code. This
is especially useful when you want to create a library for Sass, as it will then
provide patterns that users can extend if they like.
If you use regular classes for this, you'll end up creating a large CSS file with
the potential to overlap with other classes used in the HTML code. For this
reason, Sass supports placeholders selector (such as% foo).
Placeholders appear to be identifiers for classes and identifiers, except that
the symbols are # or. They are replaced by%. They can be used anywhere
classes or identifiers are used, and rulesets are not allowed to be included in a
CSS file. For example:
// This rule will not be shown on its own

#context a% extreme {
color: blue;
font-weight: bold;
font-size: 2em;
}
However, placeholders can be expanded just like classes and identifiers, as

extended parameters will be created, other than the base placeholder selector.
Next example:
.notice {
@extend% extreme;
}
#context a.notice {
color: blue;
font-weight: bold;
font-size: 2em; }
Ensign! Optional
If the @extend rule does not work with a parameter expansion, an error is
usually raised. For example, if you type important {@extend .notice}, an
error will occur if there is no parameter containing .notice. An error will also
occur if the only parameter containing .notice is h1.notice, because h1
overlaps with element a, so no new parameter is created.
Sometimes you may want to allow the @extend rule not to produce any new
specification. To do so, it is enough to add the flag optional! After the
parameter such as:
a.important {
@extend .notice! optional;
}
Use @extend inside the instructions
There are some limitations to using @extend within instructions like @media
as Sass is unable to have CSS rules outside of the @media block apply to the
settings inside them without making the style file be inflated due to copying
existing styles. This means that if you use @extend inside @media (or other
CSS instructions), only the parameters that appear inside the same instruction
block will be expanded.
For example, the following code works well:
@media print {
.error {
border: 1px # f00;
}
.seriousError {
@extend .error;
border-width: 3px;
}
}
But this is a mistake:
.error {
border: 1px # f00;
}
@media print {
.seriousError {
// INVALID EXTEND: .error is used outside of the "@media print"
directive
@extend .error;
border-width: 3px;
}
}
We hope @extend will be supported by default in browsers in the future,

which will allow it to be used in @media and other instructions.
Instruction @ at-root
The @ at-root statement shifts one or more rules to the root level of the
document, preventing them from bifurcating within the parent parameters. It
can be used either with a single inline selector, such as:
.parent {
...
@ at-root .child {...}
}
Which will be produced:
.parent {...}
.child {...}
Or it can be used with a block containing several determinants, such as:
.parent {
...
@ at-root {
.child1 {...}
.child2 {...}
}
.step-child {...}
}
Which will produce the following:

.parent {...}
.child1 {...}
.child2 {...}
.parent .step-child {...}
The rule @ at-root (without: ...) and the rule @ at-root (with: ...)
By default, @ at-root is used only to exclude settings. However, it can also be

used to exit ramified instructions like @media. For example, the following
example:
@media print {
.page {
width: 8in;
@ at-root (without: media) {
color: red;
}
}
}
It will produce:
@media print {
.page {
width: 8in;
}
}
.page {
color: red;
}
You can use @ at-root (without: ...) to exit any statement. You can also exit
several white space separated instructions such as @ at-root (without: media
supports) that will exit the parameter outside of the @media and @supports
queries.
You can pass two special values to @ at-root. "Rule" refers to regular CSS
rules, so @ at-root (without: rule) is the same as @ at-root without any query.
And @ at-root (without: all) means that patterns must be moved outside of all
CSS instructions and rules.
If you want to specify which instructions or rules should be included in place

of those that should be excluded, you can use with instead of without. For
example, the specified @ at-root (with: rule) will be moved out of all
directives, but will maintain CSS rules.
@Debug instruction
The @debug instruction prints an expression value from SassScript
expressions to standard error stream. This is useful for debugging Sass files
that include complex SassScript codes. For example, the following code
output:
@debug 10em + 12em;
it will be:
Line 1 DEBUG: 22em

Instruction @warn
The @warn instruction prints an expression value from SassScript

expressions to the standard error stream. This is useful for libraries that need
to warn users against neglecting some properties in the library or recovering
from minor errors in mixing. There are two main differences between @warn
and @debug:
- You can disable command-line warnings with the --quiet option or
the: quiet option.
- A trace of the stylesheet trace will be printed next to the message until
the user who is warned sees the error.
Illustrative example:
@mixin adjust-location ($ x, $ y) {
@if unitless ($ x) {
@warn "Assuming # {$ x} to be in pixels";
$ x: 1px * $ x;
}
@if unitless ($ y) {
@warn "Assuming # {$ y} to be in pixels";
$ y: 1px * $ y;
}
position: relative; left: $ x; top: $ y;
}
@Error
The @error directive denotes a value of an SassScript expression as a fatal

error, including the stack trace. This guide is useful for checking the
arguments and functions. For example, see the following example:
@mixin adjust-location ($ x, $ y) {
@if unitless ($ x) {
@error "$ x may not be unitless, was # {$ x}.";
}
@if unitless ($ y) {
@error "$ y may not be unitless, was # {$ y}.";
}
position: relative; left: $ x; top: $ y;
}
There is currently no way to fix errors in Sass.

Chapter V
Sass Control Instructions
SassScript supports control instructions and expressions that are used to

mortgage styles activation under certain conditions or to include the same
style but apply some variations to it.
Note: Control instructions are an advanced feature and are not very popular.
It was originally found to be used in mixins, especially those that are part of
libraries such as Compass, and therefore requires great flexibility in dealing
with them.
if ()
The built-in if () function returns one of two specific values based on a

specific condition, and can be used in any programming context. The if
function only checks the argument corresponding to the value that you will
return, and this allows you to refer to undefined variables or to perform
calculations that would normally cause an error (such as dividing by zero).
if (true, 1px, 2px) => 1px

if (false, 1px, 2px) => 2px
@If
The @if directive takes an expression from SassScript expressions and uses
the subforms below it when the expression returns any value other than false
or null, such as:
p{
@if 1 + 1 == 2 {border: 1px solid; }
@if 5 <3 {border: 2px dotted; }
@if null {border: 3px double; }
}
p{
border: 1px solid; }
You can manually check $ var == false or $ var == null if you want to
distinguish between them. The @if instruction can be followed by several
instructions, such as the @else if instruction and the @else instruction, which
is used once at the end. If the @if instruction does not fulfill the condition, it
will go to the @else if instructions in order until one of them succeeds in
fulfilling the condition or the @else instruction will apply if the condition
does not meet any of them. See the following code:
$ type: monster;
p{
@if $ type == ocean {
color: blue;
} @else if $ type == matador {
color: red;
} @else if $ type == monster {
color: green;
} @else {
color: black;
}
}
p{
color: green; }
@For
The @for instruction is used to show a set of patterns repeatedly, and is used
at each frequency counter (variable) in order to set the number of patterns in
the patterns. There are two ways to use this instruction. The first is @for $
var from <start> through <end>, and the second is @for $ var from <start> to
<end>. The difference between them is in the words through and to, which
will define the frequency field, as will be explained. $ Var can be any
variable such as $ i and <start> and <end> are two SassScript expressions
that return whole numbers. When <start> is greater than <end>, the
countdown will be descending rather than ascending.
The @for parameter sets the variable $ var to the values in the specified field
sequentially each time you output the branched patterns using the value of $
var. Note that you will enter in the form from ... through the value <start> and
the value <end> in the field of counting, while you will not enter in the form
from ... to the value <end> i.e. the count will stop at the previous or
subsequent value according to the type of count (upward) Or descending).
The following example illustrates the use of the wording through:
@for $ i from 1 through 3 {

.item - # {$ i} {width: 2em * $ i; }
}
.item-1 {
width: 2em; }
.item-2 {
width: 4em; }
.item-3 {
width: 6em; }
@Each
The regular form of the @each instruction is @each $ var in <list or map>. $
Var can be any variable, such as $ length or $ name, and <list or map> is an
SassScript expression that returns a list or map.
The @each statement gives the $ var variable all values in the list or map,
and then outputs the styles it contains using the value of $ var. See the
following example:
@each $ animal in puma, sea-slug, egret, salamander {

. # {$ animal} -icon {
background-image: url ('/ images / # {$ animal} .png');
}
}
.puma-icon {
background-image: url ('/ images / puma.png'); }
.sea-slug-icon {
background-image: url ('/ images / sea-slug.png'); }
.egret-icon {
background-image: url ('/ images / egret.png'); }
.salamander-icon {
background-image: url ('/ images / salamander.png'); }
Multiple Assignment
@Each can use multiple variables, as in @each $ var1, $ var2, ... in <list>. If
<list> is a list consisting of several lists, then each of the sub-menu items will
be assigned to the corresponding variable such as:
@each $ animal, $ color, $ cursor in (puma, black, default),

(sea-slug, blue, pointer),
(egret, white, move) {
. # {$ animal} -icon {
background-image: url ('/ images / # {$ animal} .png');
border: 2px solid $ color;
cursor: $ cursor;
}
}
.puma-icon {
background-image: url ('/ images / puma.png');
border: 2px solid black;
cursor: default; }
.sea-slug-icon {
background-image: url ('/ images / sea-slug.png');
border: 2px solid blue;
cursor: pointer; }
.egret-icon {
background-image: url ('/ images / egret.png');
border: 2px solid white;
cursor: move; }
Since maps are treated as lists of pairs, multiple cross-references can be

applied to them as well. The following code:
@each $ header, $ size in (h1: 2em, h2: 1.5em, h3: 1.2em) {

# {$ header} {
font-size: $ size;
}
}
h1 {
font-size: 2em; }
h2 {
font-size: 1.5em; }
h3 {
font-size: 1.2em; }
@While
The @while statement takes an SassScript expression and repeatedly

manifests styles until the value of that expression equals false. It can be used
to perform more complex iterations than the @for statement allows, although
this is rarely necessary. For example, see the following code:
$ i: 6;
@while $ i> 0 {
.item - # {$ i} {width: 2em * $ i; }
$ i: $ i - 2;
}
.item-6 {
width: 12em; }
.item-4 {
width: 8em; }
.item-2 {
width: 4em; }
Chapter VI
Mixtures in Sass
The mixtures allow the definition of patterns that can be reused in the
stylesheet without resorting to non-semantic items such as .float-left.
Mixtures can also contain all CSS rules and anything else permitted for use in
Sass files. Arguments can also be passed through, thus a wide range of
patterns can be produced with a small number of mixtures.
Defining a Mixin: @mixin
Mixins are defined by the @mixin instruction followed by the name of the
mixture, and it is optional to add media to it, then a block of patterns includes
the contents of the mixture. For example, the large-text mixture is defined as
follows:
@mixin large-text {
font: {
family: Arial;
size: 20px;
weight: bold;
}
color: # ff0000;
}
Mixtures may also contain markers, and sometimes properties. Rather,

limiters can contain parent references. For example, see the following code:
@mixin clearfix {
display: inline-block;
&: after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
* html & {height: 1px}
}
Mixture names (and all other Sass identifiers) can, for historical reasons,
contain hyphens and underscores without making a difference between them.
For example, if you define a mixture as add-column, you can also refer to it
as add_column, and vice versa.
Mixtures included: @include
Mixtures are included in the file via the @include instruction. This
instruction takes the name of a mixture and an optional medium, if any, and
includes patterns that the mixture defines in the current rule. For example, see
the following code:
.page-title {
@include large-text;
padding: 4px;
margin-top: 10px;
}
.page-title {
font-family: Arial;
font-size: 20px;
font-weight: bold;
color: # ff0000;
padding: 4px;
margin-top: 10px; }
Mixtures may also be inserted outside all the rules (i.e. at the root of the
document) as long as they do not directly define any properties or use any
parental indications such as:
@mixin silly-links {
a{
color: blue;
background-color: red;
}
}
@include silly-links;
a{
color: blue;
background-color: red; }
Other mixtures may be included when identifying the mixture, such as:
@mixin compound {
@include highlighted-background;
@include header-text;
}
@mixin highlighted-background {background-color: # fc0; }

@mixin header-text {font-size: 20px; }
Mixtures may be able to include themselves, but this is contrary to the

behavior of versions prior to Sass 3.3, as mixin recursion is prohibited.
Mixtures that only define descendant selectors can be mixed safely at the top
level of the document.
Media (Arguments)
Mixtures can take SassScript values as arguments that you pass to when
mixing a mixture, as they are available inside the mixture as variables.
When defining a mixture, the arguments are written as variable names
separated by commas and placed in parentheses after the name. Then the
values of those arguments are passed when the mixture is included in the
same way. See the following example:
@mixin beautiful-border ($ color, $ width) {

border: {
color: $ color;
width: $ width;
style: dashed;
}
}
p {@include beautiful-border (blue, 1in); }
p{
border-color: blue;
border-width: 1in;
border-style: dashed; }
Mixtures can also set media default values using the regular formula for
setting variables. If the medium is not passed then when mixing is included,
then this default value will be used. For example, see the following code:
@mixin beautiful-border ($ color, $ width: 1in) {
border: {
color: $ color;
width: $ width;
style: dashed;
}
}
p {@include beautiful-border (blue); }
h1 {@include beautiful-border (blue, 2in); }
p{
border-color: blue;
border-width: 1in;
h1 {
border-color: blue;
border-width: 2in;
Named media (Keyword Arguments)
Explicitly named media may also be used when mixtures are included. For
example, the previous example could be written as:
p {@include beautiful-border ($ color: blue); }

h1 {@include beautiful-border ($ color: blue, $ width: 2in); }
While this may be less succinct, it will make the stylesheet easier to read, and
will allow functions to offer more flexible interfaces to provide many media
without having to call it.
Named arguments can be passed in any order, and arguments with default
values may be deleted. Since the named arguments are the names of
variables, there is no difference between the use of regular dashes and the
dashes.
Trailing Commas
If the last median of a mixture or function is a positional or named mediator,

that mediator can be followed by an extra comma. Some people prefer this
method of programming because it can reduce the differences and errors in
formulation when the file is discharged.
Variable Arguments
Sometimes it is preferable not to specify the number of mixture or function

media. For example, a mixture devoted to creating shadow boxes may take
any number of shades as arguments. In these cases, Sass supports "variable
media", which is the media in a mixed statement or function that takes all the
remaining extra media and groups it in a list. These media look like regular
media, but they are followed by three dots (...). The following example
illustrates this:
@mixin box-shadow ($ shadows ...) {

-moz-box-shadow: $ shadows;
-webkit-box-shadow: $ shadows;
box-shadow: $ shadows;
}
.shadows {
@include box-shadow (0px 4px 5px # 666, 2px 6px 10px # 999);
}
.shadows {
-moz-box-shadow: 0px 4px 5px # 666, 2px 6px 10px # 999;
-webkit-box-shadow: 0px 4px 5px # 666, 2px 6px 10px # 999;
box-shadow: 0px 4px 5px # 666, 2px 6px 10px # 999;
}
Variable arguments also contain all named arguments passed to the mixture
or function, and can be accessed using the keywords ($ args) function, which
returns them as maps, linking media names (without $) to their values.
Variable media can also be used when calling a mixture. You can use the
same format to expand a list of values so that each value is passed as a
separate medium, or to expand a map of values so that each pair is treated as
a named medium. For example, see the following code:
@mixin colors ($ text, $ background, $ border) {

color: $ text;
background-color: $ background;
border-color: $ border;
}
$ values: # ff0000, # 00ff00, # 0000ff;

.primary {
@include colors ($ values ...);
}
$ value-map: (text: # 00ff00, background: # 0000ff, border: # ff0000);

.secondary {
@include colors ($ value-map ...);
}
.primary {
color: # ff0000;
background-color: # 00ff00;
border-color: # 0000ff;
}
.secondary {
color: # 00ff00;
background-color: # 0000ff;
border-color: # ff0000;
}
You can pass a list and a map of the media at the same time, provided that the
list is passed before the map, such as @include colors ($ values ..., $ map ...).
You can use the variable media to wrap the mixture and add additional
patterns without changing the shape of the mixture media. If you do this, the
named media will be passed directly to the wrapped mixin such as:
@mixin wrapped-stylish-mixin ($ args ...) {

font-weight: bold;
@include stylish-mixin ($ args ...);
}
.stylish {
// The broker will pass
// $ width
// As a medium to the mixture
// stylish-mixin
@include wrapped-stylish-mixin (# 00ff00, $ width: 100px);
}
Pass the style blocks to the mixture
It is possible to pass a block of patterns to the mixture to place it inside the

patterns listed in the mixture. Styles will appear at the location of the
@content inside the mixture, and this will make it possible to define abstract
shapes related to creating the markers and instructions. For example, see the
following example:
@mixin apply-to-ie6-only {
* html {
@content;
}
}
@include apply-to-ie6-only {
#logo {
background-image: url (/logo.gif);
}
}
* html #logo {
background-image: url (/logo.gif);
}
The same mixtures can be created using the abbreviated form of .sass files,
such as:
= apply-to-ie6-only
* html
@content
+ apply-to-ie6-only
#logo
background-image: url (/logo.gif)
Note: When the @content instruction exists more than once or is used in a
loop, then the pattern block will be repeated at each call.
Some mixtures may require a mass of patterns to pass through, otherwise you
will behave differently. The content_exists () function will return TRUE if a
block of patterns is passed to the current mixture, and can be used to see the
behavior performed at that time.
Variable Scope and Content Blocks
The value of the masses of patterns passed to the mixture is determined

within the range where the mass is defined and not in the mixture range. This
means that the local variables in the mixture cannot be used within the mass
of the patterns passed and the variables will be referred to the global value.
$ color: white;
@mixin colors ($ color: blue) {
background-color: $ color;
@content;
border-color: $ color;
}
.colors {
@include colors {color: $ color; }
}
.colors {
background-color: blue;
color: white;
border-color: blue;
}
In addition, this makes it clear that the variables and mixtures used within the
block of passing patterns relate to other neighboring patterns where the block
is defined as:
#sidebar {
$ sidebar-width: 300px;
width: $ sidebar-width;
@include smartphone {
width: $ sidebar-width / 3;
}
}
Chapter VII
Sass function instructions
You can define your own functions in Sass and use them in any context or
any value within the program such as:
$ grid-width: 40px;
$ gutter-width: 10px;
@function grid-width ($ n) {
@return $ n * $ grid-width + ($ n - 1) * $ gutter-width;
}
#sidebar {width: grid-width (5); }
After the code is cleared, it will become:
#sidebar {
width: 240px; }
Note that functions can access all general variables and accept arguments as
mixins do. The function may contain many programmatic statements, and
@return must be called to return the function to a specified value. As in
mixtures, you can call functions defined in Sass using the named arguments.
In the above example, we can call the function in the following way:
#sidebar {width: grid-width ($ n: 5); }

It is recommended that the function name contain a specific prefix to avoid
overlapping of names and to inform those who read your stylesheet that they
are not part of Sass or CSS. For example, if you work for a company called
Hsoub, you may want to give the above function the name -hsoub-grid-width.
User-defined functions also support variable media just like mixtures.
For historical reasons, there is no difference between the use of regular

dashes and underscores in function names (and all other Sass identifiers). For
example, if you define a function called grid-width, you can refer to it as
grid_width as well, and vice versa.
Chapter VIII
Output styles in Sass
Although the default style for CSS outputs in Sass is nice and reflects the
structure of the document, tastes and needs vary from person to person, so
Sass supports many other styles.
Sass allows you to choose between four different output modes by setting the
option: style or using the --style banner on the command line.
Note: Sass compiler that can be installed using the npm package manager
does not support the style: nested; If you want to use it, install the Sass code
as shown on the Sass setup, setup, and use page.
Bifurcated style nested
Hyperlink is the default Sass style, because it reflects the structure of your
CSS and HTML document patterns. Each characteristic in this pattern has its
own line, but the indentation is not fixed since each base is displaced based
on the depth of its branching. For example, see the following code:
#main {
color: #fff;
background-color: # 000; }
#main p {
width: 10em; }
.huge {
font-size: 10em;
font-weight: bold;
Hyper Style is very useful when reading large CSS files, as it makes it easier
for you to understand the file structure without actually reading anything.
Expanded style
Expanded mode is normal and more similar to regular CSS, with each
characteristic taking a single line. Attributes are immersed within the rules,
but the rules are not displaced in any other way. See the following example:
#main {
color: #fff;
background-color: # 000;
}
#main p {
width: 10em;
}
.huge {
font-size: 10em;
font-weight: bold;
}
Compact style
Compact mode takes less space balanced by the branched or expanded

pattern as it focuses on the determinants more than its properties. Each CSS
rule takes only one line, and all properties are defined on that line. Branched
rules are placed next to each other without returning to a new line, while
separate sets of rules are centered by a new line. For example, see the
following code:
#main {color: #fff; background-color: # 000; }

#main p {width: 10em; }
.huge {font-size: 10em; font-weight: bold; text-decoration: underline; }

Compressed mode
The compressed style takes the lowest possible amount of space, and there
are no white spaces except for it necessary to separate the parameters in
addition to a new line at the end of the file. It also includes some other
secondary compression techniques such as choosing the smallest possible
color representation. This style is not supposed to be readable by other users.
For example, see the following code:
#main {color: #fff; background-color: # 000} #main p {width: 10em} .huge

{font-size: 10em; font-weight: bold; text-decoration: underline}
Chapter IX
Sass expansion
Sass offers a number of advanced customizations for users with unique

requirements. Using these features requires a good understanding of Ruby.
Define custom functions in Sass
Users can define their own Sass functions using Ruby API. See for more
information Documenting functions.
Cache stores
Sass temporarily stores parsed documents so that they can be reused without
re-analyzing them unless changes occur to the file. By default, Sass will write
these temporary stored files to a location in the file system referenced in:
cache_location. If you are not able to write to the file system or need to share
the stored copy between system processes and Ruby operations, then you can
define your own cache store and set the option: cache_store. If you want
more information about creating a temporary store, please see the source
documentation.
Custom Importers
Sass Imports are responsible for taking the paths passed to @import and
creating the appropriate Sass code for those paths. By default, this code is
loaded from the file system, but imports can be made from a specific database
or via the HTTP protocol, or they can be made to use a different file system
naming than expected in Sass.
Each importer undertakes a single load path, or whatever the corresponding

concept is in the back bond. Imports can be placed in load_paths: along with
regular file system paths.
When questioning the value of @import, Sass will search upload paths for an
importer who has successfully imported the path. When one is found, the
imported file is used.
Imports created by users should inherit from Sass :: Importers :: Base.

decoration: underline}
Chapter X
Sass functions
This is a list of the functions in Sass.
1 declare ()
2 random_number_generator ()
3 random_seed ()
4 signature ()
5 abs ()
6 adjust_color ()
7 adjust_hue ()
8 alpha ()
9 append ()
10 blue ()
11 call ()
12 ceil ()
13 change_color ()
14 comparable ()
15 complement ()
16 content_exists ()
17 counter ()
18 counters ()
19 darken ()
20 desaturate ()
21 feature_exists ()
22 floor ()
23 function_exists ()
24 get_function ()
25 global_variable_exists ()
26 grayscale ()
27 green ()
28 hsl ()
29 hsla ()
30 hue ()
31 ie_hex_str ()
32 if ()
33 index ()
34 inspect ()
35 invert ()
36 is_bracketed ()
37 is_superselector ()
38 join ()
39 keywords ()
40 length ()
41 lighten ()
42 lightness ()
43 list_separator ()
44 map_get ()
45 map_has_key ()
46 map_keys ()
47 map_merge ()
48 map_remove ()
49 map_values ()
50 max ()
51 min ()
52 mix ()
53 mixin_exists ()
54 nth ()
55 opacify ()
56 opacity ()
57 percentage ()
58 quote ()
59 random ()
60 red ()
61 rgb ()
62 rgba ()
63 round ()
64 saturate ()
65 saturation ()
66 scale_color ()
67 selector_append ()
68 selector_extend ()
69 selector_nest ()
70 selector_parse ()
71 selector_replace ()
72 selector_unify ()
73 set_nth ()
74 simple_selectors ()
75 str_index ()
76 str_insert ()
77 str_length ()
78 str_slice ()
79 to_lower_case ()
80 to_upper_case ()
81 transparentize ()
82 type_of ()
83 unique_id ()
84 unit ()
85 unitless ()
86 unquote ()
87 variable_exists ()
88 zip()
declare ()
Authorize a Sass signature for Ruby functions. The signature includes the
media names, will the function take a variable number of arguments, and
whether the function will accept a random set of named arguments.
random_number_generator ()
Sass's internal random number generator is called to generate a random

number.
random_seed ()
Determines the value of the seed used by Sass's internal random number
generator.
signature ()
Determines the correct signature for the number of arguments passed to a

specific function.
abs ()
Returns the absolute value of a number passed to it.

adjust_color ()
Increases or decreases one or more of the specified color properties. It can

change the transparency, saturation, and value of red, green, and blue.
adjust_hue ()
Change the value of the hue component of the color it is passed to.
alpha ()
Returns the value of the alpha channel component for the color passed to it.
append ()
Adds a specific value to a list.

blue ()
Returns the blue component to the color passed to it.

call ()
It calls a dynamically defined function whether it is user-defined, or it is

included in the Sass language, or CSS function.
ceil ()
Returns the nearest integer greater than the number passed to it.
change_color ()
Change one or more of the properties of the given color: red, green, blue,
saturation, hue, and transparency.
comparable ()
Checks whether it is possible to add, subtract or balance the two numbers

passed to it.
complement ()
Returns the complement of a color passed to it.

content_exists ()
Checks whether a mass of the content is passed to the mixin.

counter ()
This function exists only as an alternative to the content: counter issue in IE7.
It works similarly with any CSS function except that it avoids adding spaces
between media separators.
counters ()
This function exists only as an alternative to the content: counter issue in IE7.
It works similarly with any CSS function except that it avoids adding spaces
between media separators.
darken ()
Makes the color darker. Pass it a color and number between 0% and 100%,
then restore that color after reducing the brightness according to the last
value.
desaturate ()
Makes color less saturated. Pass it a color and number between 0% and 100%
and then return that color after reducing the value of its saturation component
according to the last value.
feature_exists ()
Checks whether a particular feature is present at the Sass runtime.

floor ()
Returns the integer closest to the smallest number.

function_exists ()
Checks whether a function exists or not.

get_function ()
Returns a reference to a function for later call using the call () function.
global_variable_exists ()
Checks whether a variable is in the global scope, i.e. at the top level of the
file.
grayscale ()
The grayscale () function converts grayscale.

green ()
Returns the green component's value to its color.

hsl ()
Creates a new color based on the values of hue, saturation, and lightness.
hsla ()
Creates a color based on the values of hue, saturation, lightness, and alpha.
hue ()
Returns the value of the dye component to the color passed to.
ie_hex_str ()
The color has been converted to a format that IE filters in IE.

if ()
Returns one of the two values passed to it, depending on whether a certain
condition is true. Just like the @if statement, all values are valid except false
and null.
index ()
Reposition an item in the list. If the element is not present, it will return the
null value.
inspect ()
Returns a text string containing a value representing the value passed to it in

Sass.
invert ()
Reverse the color passed to it. That is, the values of the red, green and blue
compounds reflect the color passed to them without affecting the opacity
value.
is_bracketed ()
Checks whether the list uses square brackets.

is_superselector ()
Checks whether the $ super parameter is the superselector of the $ sub

parameter. This means that the $ super parameter matches all the elements
that $ sub matches in addition to other elements. Generally, the simpler
determinants tend to be super determinants of more complex specifiers.
join ()
Combine two lists into one list.

keywords ()
Returns a map containing the named arguments passed to a function or mixin, which requires passing a
variable list of arguments.
length ()
Returns the length of the list you passed to. This function can also return the
number of pairs in a map.
lighten ()
It makes the color more light as it passes a color and number between 0% and
100% and then returns that color after increasing the brightness according to
the last value.
lightness ()
Returns the brightness component to the color passed to it.

list_separator ()
Returns the type of comma used to separate the list items that are passed to. If
the function does not find a comma because the list contains less than two
elements, it will return the value space.
map_get ()
Returns the value in the map associated with the given key. If the map does
not contain that key, the function returns the null value.
map_has_key ()
Checks if the map you pass to has a specific key and this key is related to a
value.
map_keys ()
Returns a list containing only the map keys you pass to.
map_merge ()
Two maps are combined into one new map.

map_remove ()
It restores a new map after deleting certain keys from the map it is passed to.
map_values ()
Returns a list that contains only the map values you pass to (without the
keys).
max ()
Returns the largest value in the set of numbers passed to. This function
accepts an unlimited number of parameters.
min ()
Returns the smallest value from a set of numbers passed to it. This function
accepts an unlimited number of parameters.
mix ()
Mix two colors, as they specify the average of each RGB component for both
colors to give the resulting color. Optionally, the mixing ratio can be
determined. Transparency is taken into account when adjusting and mixing
components according to their proportion.
mixin_exists ()
Checks whether a mixin is present.

nth ()
Returns the item with the position specified in the list it is passed to.
opacify ()
Makes (also called fade_in) more opacity. Pass it a color and number
between 0 and 1, then return that color after increasing its opacity according
to the last value.
opacity ()
Returns the opacity value of the color passed to it. Their value is usually
equal to 1, unless modified.
percentage ()
Converts a number without a unit into a percentage.

quote ()
Quotation marks add to an unquoted text string. If the string is quoted, the
function will return it unchanged.
random ()
Returns a decimal random number with a range of 0 to 1 (the value 1 is not

included in the field) if no value is passed to it. If you pass a value to it, it
returns an integer random number whose range ranges from 1 to that value.
red ()
Returns the red component's value to its color.

rgb ()
Creates a color based on passing the value of the three components: red,
green, and blue.
rgba ()
Transparency changes a specific color or creates a color from passing the

value of the components: red, green, blue, and the alpha channel.
round ()
Bring the number passed to the nearest whole number.

saturate ()
Increases the color saturation as it passes a color and number between 0%

and 100%, and then returns that color after increasing its saturation value
according to the last value.
saturation ()
Returns the saturation value of the color passed to it.

scale_color ()
Adjust one or more components of the color passed to it in a fluid gradient

(Fluidly scales). That is, the value_ scale_color () function changes the value
of the specified color component based on how high or low the current value
of that component is within its field, which is contrary to the work of the
adjust_color () function, which replaces the value of the current color
component with a fixed value given.
selector_append ()
It returns a new parameter with all the $ selectors in the parameter being
added to each other as if it were branched in the stylesheet as $ selector1 {&
$ selector2 {...}}.
selector_extend ()
Returns a new version of $ selector with $ extendee expanded by $ extender.

selector_nest ()
Returns a new parameter with all the selectors in the $ selectors parameter
branched together as if they were branched in the style file as $ selector1 {$
selector2 {...}}.
selector_parse ()
It analyzes a user defined provided to a list of text strings as returned using

the & symbol.
selector_replace ()
The $ replacement parameter replaces the instances of the $ original

parameter wherever it is found in the $ selector parameter.
selector_unify ()
Two selectors unite in one selector that matches only identical elements in
both of these parameters. The function returns the null value if there is no
match between the two parameters.
set_nth ()
Returns a new list, based on the scrolled list, after replacing the value given
with the value of the $ n element.
simple_selectors ()
Returns the simple parameters that make up the composite parameter passed
to.
str_index ()
Returns the first occurrence of a specified text string within the given text
string.
str_insert ()
Insert a text string into another at a specified position.

str_length ()
Returns the number of characters of the text string passed to.

str_slice ()
Returns a portion of the text string that you pass to and that begins and ends
at a specified position.
to_lower_case ()
Converts all string characters passed to it into lowercase.

to_upper_case ()
All string characters that are passed to it are converted to uppercase.

transparentize ()
The transparentize () function (also called fade_out) makes the color more
transparent. Pass it a color and number between 0 and 1, and then return that
color after lowering its opacity by the last value.
type_of ()
Returns the type the value passed to.

unique_id ()
Returns a unique CSS identifier. This identifier is repeated as an unquoted

text string.
unit ()
Returns the unit (or units) associated with the number passed to. The complex
units are arranged in alphabetical order, by numerator and denominator.
unitless ()
Checks whether the number passed to it has a unit or not.

unquote ()
Removes quotes from the string you pass to. If that string is not quoted, the
function will return it unchanged.
variable_exists ()
Checks whether a variable is present in the current scope or in the global

scope.
zip ()
Combine two lists into one list.

Sass For Beginners The Ultimate Beginners Guide To Learn Sass Step by Step B089MCD36D

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Sass For Beginners The Ultimate Beginners Guide To Learn Sass Step by Step B089MCD36D

Uploaded by

Copyright:

Available Formats

Sass for Beginners

The Ultimate Beginner's Guide to Learn Sass Step by Step

CSS EXTENSIONS IN SASS

SASS CONTROL INSTRUCTIONS

DEFINING A MIXIN: @MIXIN

SASS FUNCTION INSTRUCTIONS

OUTPUT STYLES IN SASS

BIFURCATED STYLE NESTED

DEFINE CUSTOM FUNCTIONS IN SASS

It helps us make larger and complicated stylesheets clearer to understand and

There are several apps that help you achieve this:

Clean up your files by seperating into partials labeled with an underscore to

@mixin button-color($color: green) {

lighten($color, $amount) : Makes a color lighterdarken($color, $amount) :

- Full CSS compatibility.

# Convert Sass to SCSS

You will be charged to:

pre {font-size: 3em; }

You will be charged to:

Sometimes it is useful to use the parent parameter of a manifold rule in a way

You will be charged to:

You will be charged to:

You will be charged to:

You will be charged to:

Sass technology supports a special type of selector called a "placeholder."

Sass supports the standard format for multi-line comments with / * * /

// These comments are only one line in length.

You will be charged to:

/ * This CSS is generated by My Snazzy Framework version # {$

You will be charged to:

/ * This CSS is generated by My Snazzy Framework version 1.2.3. * /

Sass, in addition to the CSS standard syntax, supports a small set of

You can then refer to it in features, such as:

You will be charged to:

For historical reasons, there is no difference between hyphens and

- numbers (eg 1.2, 13, 10px).

@mixin firefox-message ($ selector) {

@include firefox-message (". header");

You will be charged to:

body.firefox .header: before {

Comma-separated lists may contain an extra comma, which is useful because

$ map: (key1: value1, key2: value2, key3: value3);

Unlike lists, maps must always be enclosed in parentheses, and should be

Sass will be compressed mode. The shortest possible color representation in

The reference to a specific function reference can be obtained by using the

SassScript supports regular arithmetic operations on numbers (addition +,

CSS allows the parameter / to appear in the property values as a way to

1 If the value, or part of it, is stored in a variable or returned by a

For example see the following code:

You will be charged to:

You will be charged to:

The precedence of the different meanings of the coefficient - is in the

Chromatic values support all mathematical operations, as these operations are

It will be calculated 01 + 04 = 05, 02 + 05 = 07 and 03 + 06 = 09, and will be

The use of color functions is often preferred to the use of mathematical

It will be calculated 01 * 2 = 02, 02 * 2 = 04 and 03 * 2 = 06, and will be

You will be charged to:

$ translucent-red: rgba (255, 0, 0, 0.5);

The code will be spent to:

$ translucent-red: rgba (255, 0, 0, 0.5);

The code will be spent to:

The plus operation can be used to combine text strings.

The above code will be translated to: