@import
directive in Less. One can maintain the code structure easily by using the Less import directive and spread the code across different files. In the case of CSS, the @import
statement must precede all other rules, whereas, in Less @import
statement can be used anywhere in the code. @import “file_name.less”
@import
statement.@import
statement imports the file as it is.@import "foo"; // foo.less is imported @import "foo.less"; // foo.less is imported @import "foo.php"; // foo.php imported as a less file @import "foo.css"; // statement left in place, as it is
import_dir.html
<head> <title>Import Directives</title> <link rel="stylesheet" href="style.css" type="text/css" /> </head> <body> <h2>Welcome to SPLessons</h2> <p class="myline">small example on Less Import directives</p> </body> </html>
import_dir.less
.myline { font-size: 20px; }
style.less
@import "C:\Users\Samuel\nodejs\import_dir.less"; .myline { color: #5858FA; }
lessc style.less style.css
style.css
.myline { font-size: 20px; } .myline { color: #5858FA; }
@import
directive.@import
statement defines the file in less.