Mahabharata is such a vast treasure house of facts and knowledge that it is impossible for anyone to know everything!
.jpg "தாவனி")
For your Loved ones
Power of Friendship
நட்சத்திரங்களை நான் ரசித்தேன் அதுபோல் நானும் என் நண்பர்களுடன் இருக்க விரும்பியதால்...!
Commit all your crimes when Sachin is batting. They will go unnoticed because even the Lord is watching
“Hybrid” applications are a special category of web applications that extend the web-based application environment through their use of native platform APIs available on a given device. The hybrid application design pattern is equally applicable to both mobile and desktop environments.
gem install sass, and compile it by running sassc myfile.scss myfile.css.npm install node-sass).style.scss file.$ symbol. Lets create our first variable:
$primaryColor: #eeffcc;
$primaryColor: #eeffcc;
body {
background: $primaryColor;
}
$primaryColor: #eeccff;
body {
$primaryColor: #ccc;
background: $primaryColor;
}
p {
color: $primaryColor;
}
// When compiled, our paragraph selector's color is #eeccff
!global flag that comes to our rescue:
$primaryColor: #eeccff;
body {
$primaryColor: #ccc !global;
background: $primaryColor;
}
p {
color: $primaryColor;
}
// When compiled, our paragraph selector's color is #ccc
!default flag. This allows us to make sure there is a default value for a variable in the event that one is not provided. If a value is provided, it is overwritten:
$firstValue: 62.5%;
$firstValue: 24px !default;
body {
font-size: $firstValue;
}
// body font size = 62.5%
| + | Addition |
| – | Subtraction |
| / | Division |
| * | Multiplication |
| % | Modulo |
| == | Equality |
| != | Inequality |
/ symbol is used in shorthand CSS font properties likefont: 14px/16px, if you want to use the division operator on non-variable values, you need to wrap them in parentheses like:
$fontDiff: (14px/16px);
$container-width: 100% - 20px;
calc function, as it needs to be interpereted at render time.
$container-width: 100%;
.container {
width: $container-width;
}
.col-4 {
width: $container-width / 4;
}
// Compiles to:
// .container {
// width: 100%;
// }
//
// .col-4 {
// width: 25%;
// }
darken() function. You can pass it a color and a percentage and it, wait for it, darkens your color. Check this demo out to see why this is cool:
.container {
width: 100%;
}
.container h1 {
color: red;
}
.container {
width: 100%;
h1 {
color: red;
}
}
& symbol. Check out how we can leverage this to add pseudo selectors to anchor elements:
a.myAnchor {
color: blue;
&:hover {
text-decoration: underline;
}
&:visited {
color: purple;
}
}
@at-root directive. Say we have a nest set up like so:
.first-component {
.text { font-size: 1.4rem; }
.button { font-size: 1.7rem; }
.second-component {
.text { font-size: 1.2rem; }
.button { font-size: 1.4rem; }
}
}
If possible, don’t nest more than four levels. If you, in a pinch, have to go five levels deep, Hampton Catlin isn’t going to come to your house and fight you. Just try not to do it.
@import directive:
@import "grids.scss";
@import "grids";
style.scss and not explicitly compiled.@extend directive is an outstanding way to inherit already existing styles.@extend directive to extend an input’s style if it has an input-error class:
.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;
}
.input into .error-input. Meet the placeholder selector.
%input-style {
font-size: 14px;
}
input {
@extend %input-style;
color: black;
}
% symbol. It is never rendered outright, only the result of its extending elements are rendered in a single block.@extend would, but with the ability to supply and interperet arguments.@mixin directive to define mixins, and the @include directive to use them. Lets build a simple mixin that we can use for media queries!
@mixin media($queryString){
}
media and adding a $queryString argument. When we include our mixin, we can supply a string argument that will be dynamically rendered. Lets put the guts in:
@mixin media($queryString){
@media #{$queryString} {
@content;
}
}
#{}. When you put a variable in between the braces, it is printed rather than evaluated.@content directive. When you wrap a mixin around content using braces, the wrapped content becomes available via the @content directive.@include directive:
.container {
width: 900px;
@include media("(max-width: 767px)"){
width: 100%;
}
}
@return directive. They can be used to DRY (Don’t repeat yourself) up your code, and make everything more readable.
@function getColumnWidth($width, $columns,$margin){
@return ($width / $columns) - ($margin * 2);
}
$container-width: 100%;
$column-count: 4;
$margin: 1%;
.container {
width: $container-width;
}
.column {
background: #1abc9c;
height: 200px;
display: block;
float: left;
width: getColumnWidth($container-width,$column-count,$margin);
margin: 0 $margin;
}
.jpg)