/* define variables for the primary colors */
$primary_1: #a2b9bc;
$primary_2: #b2ad7f;
$primary_3: #878f99;
/* use the variables */
.main-header {
background-color: $primary_1;
}
.menu-left {
background-color: $primary_2;
}
.menu-right {
background-color: $primary_3;
}
#" or ".", but in SASS they are replaced with "%". @import "test.css";
@import "css/test.css";
@import url("http://example.com/css/test.css");
/* comment */, and in addition it supports inline comments // comment :/* define primary colors */
$primary_1: #a2b9bc;
$primary_2: #b2ad7f;
/* use the variables */
.main-header {
background-color: $primary_1; // here you can put an inline comment
}
@mixin directive is used to define the mixins that include the variables and argument optionally after the name of the mixin.@mixin name {
property: value;
property: value;
...
}
@mixin and @include directives, we can use = for @mixin directive and + for @include directive. It requires less typing, makes our code simpler and easier to read, and saves our time. LESS file with a .less extension or rename the existing .css file to a .less file. You can write LESS code with existing CSS code. You should follow the best practice of creating it inside ~/content/ or ~/Styles/ folder. <script type= "text/javascript">
less.env = "development " ;
less.watch () ;
</script>
<script type= "text/javascript">
less.env = "development " ;
less.watch () ;
</script>​
DDRY-ing out a Mixin function splits into two parts : the static part and dynamic parts.@error is used to display the SassScript expression value as fatal error and @debug detects the errors and displays the SassScript expression values to the standard error output stream. @media directive is used to set style rules to different media types. It supports and extends the @media rules. This directive can be nested inside the selector SASS but the main impact is displayed to the top level of the style sheet. For example :h2{
color: red;
}
.style{
width: 450px;
@media screen and (orientation: portrait){
width:180px;
margin-left: 90px;
}
}​
@at-root directive is a collection of nested rules that are used to style block at the root of the document. h2{
color: blue;
background-color: pink;
@at-root {
.style{
font-size: 20px;
font-style: bold;
color: violet;
}
}
}
@extend directive is used to share a set of CSS properties from one selector to another. It is a very important and useful feature of Sass. It allows classes to share a set of properties with one another. It makes your code less and facilitates you to rewrite it repeatedly. .message
border: 1px solid #ccc
padding: 10px
color: #333
.success
@extend .message
border-color: green
.error
@extend .message
border-color: red
.warning
@extend .message
border-color: yellow
@debug directive is used to detect the errors and display the Sass Script expressions values to the standard error output stream. $font-sizes: 10px + 20px;
$style: (
color: #bdc3c7
);
.container{
@debug $style;
@debug $font-sizes;
}