Sass (Syntactically Awesome Style Sheets) is an extension
of CSS that adds power and elegance to the basic language. It is an open source project that is coded in Ruby. It was created in order to simplify CSS development. It adds a feature set to your stylesheet markup that makes writing styles more organized way.
When I work with Sass the file
extensions were scss. So what is Scss in Sass?. Well, when Sass
first came out, the main syntax was different from CSS. It looked a
lot like
Haml. So in version 3 Sass changed it’s main syntax to
.scss to make it look like CSS.
What is the use of Sass?
It is important to follow the coding
standard in our application. Not only in server side code and also in
client side code. So Scss makes writing maintainable CSS easier. You
can get more done, in less code, more readable, in less time.
1. Variables
Variables in Sass are preceded with the
$ symbol.
Types of variables:
- numbers - 1.2, 13, 10px
- strings - "foo", 'bar', baz
- colors - blue, #04a3f9, rgba(255, 0, 0,
0.5)
- booleans - true, false
- null - null,
- lists - 20px 5px 0 10px, Helvetica,
Arial
- maps - (key1: value1, key2: value2)
$baseColor: #eeffcc;
body {
background: $baseColor;
}
Variable has scope. If it is declared
within the braces it can not be accessed outside. But using !global
flag we can make the variable globally accessible.
$baseColor: #ccc !global;
Variable might be used in multiple
places. In any place if values is not assaigned to it, We can set a
default value for a variable using !default flag.
2. Math
It's supports mathematical expressions.
Types of math operators:
- + Addition
- – Subtraction
- / Division
- * Multiplication
- % Modulo
- == Equality
- != Inequality
$container-width: 100%;
.container {
width: $container-width / 4;
}
3. Functions
4. Nesting
Using this feature we can write single
class by nesting the common class together instead of writing
multiple classes separately.
.container {
width: 100%;
}
.container h1 {
color: red;
}
.container {
width: 100%;
h1 {
color: red;
}
}
In some situation we have to refer the
parent. For example we cannot just write :hover inside the parent a
class. We have to refer the parent with the & symbol.
a {
color: blue;
&:hover {
text-decoration: underline;
}
&:visited {
color: purple;
}
}
5. Imports
Imports allow you to break your styles
into separate files and use them into one another. @import directive
used to import a scss files.
@import "grids.scss";
@import "grids";
Sass compilers also include a concept
called “partials”. If you prefix a .sass or .scss file with an
underscore, it will not get compiled to CSS. This is helpful if your
file only exists to get imported into a master style.scss and not
explicitly compiled.
6. Extends & Placeholders
Using @extend keyword we can inherit
already existing styles.
.input {
border-radius: 3px;
border: 4px solid #ddd;
color: #555;
font-size: 17px;
padding: 10px 20px;
display: inline-block;
outline: 0;
}
.error-input {
@extend .input;
border:4px solid #e74c3c;
}
7. Mixin
Mixins allow you to define styles that
can be re-used throughout the stylesheet. Can be re-used using
@include directive.
@mixin large-text {
font: {
family: Arial;
size: 20px;
weight: bold;
}
color: #ff0000;
}
.page-title {
@include large-text;
padding: 4px;
margin-top: 10px;
}
Its also accept parameters.
@mixin style-border($color, $width) {
border: {
color: $color;
width: $width;
}
}
p { @include style-border(blue, 1in); }
8. Function Directives
It is possible to define your own
functions in sass and use them in any value or script context.
$grid-width: 40px;
$gutter-width: 10px;
@function grid-width($n) {
@return $n * $grid-width + ($n - 1) * $gutter-width;
}
#sidebar { width: grid-width(5); }
We can also pass named parameters like
below,
#sidebar { width: grid-width($n: 5); }
How to use Sass in Visual Studio
Check out my another post to know How to use Sass in Visual Studio.
Click here.
Reference: http://www.mindscapehq.com/products/web-workbench
