当前位置:网站首页>Introduction (with learning video, source code and notes)

Introduction (with learning video, source code and notes)

2020-12-06 17:45:00 Su Yi

Complete learning videos and materials are here ~
link :https://pan.baidu.com/s/1cXs9KKoIFP1M5oTClSr7yg
Extraction code :4k8t

introduce (importing)

introduce less file

  • We can introduce one or more .less file , Then all variables in this file can be in the current less Use... In the document .
  • grammar :@import " ×××" ; There is a need to introduce less The relative path of the file , If the same directory as the current file , Write the name of the imported file directly , Such as " commont", If it's the outer layer , Then for "../commont", By analogy .
//  In the same directory   establish comment.less  write in 
@font-size:50px;
html {
  font-size: @font-size;
}

//  In our project file style.less  To introduce and use 
@import "common";
div{
    font-size: @font-size;
}
//  Output style.css by :
html {
  font-size: 50px;
}
div {
  font-size: 50px;
}

introduce css file

  • Be careful : introduce css The file will be output as is to the compiled file .
  • Format :@import "×××.css", It's also an absolute path , The difference is that you need to add a suffix , Because the default is less So we can't omit .
  • Introduced css Files can't be mixed .
//  Create... In the same level directory common.css file , write in 
.bg{
    background-color: pink;
}
//  introduce 
@import "common.css";
.div{
    .bg;    		//  Report errors   You can't mix 
}
//  After deleting the error report   Output css Style is   And then introduce it to html It can take effect  ( Infinite Dolls   Ha ha ha )
@import "common.css";

We usually write something public less, To use for each file .

The introduction of the parameter can be carried

In the introduction, we can take parameters to achieve different import effects .

Parameters Format explain
once @import (once) "com" Default , Only once
reference @import (reference) "com" Use Less File but not output
inline @import (inline) " file name ( Include suffix )" Include the source file in the output, but do not process it , Its variables cannot be used
less @import (less) "com" Take the document as Less File object , Whatever the file extension
css @import (css) "com" Take the document as CSS File object , Whatever the file extension
multiple @import (mulitiple) "com" Allows multiple references to files with the same file name

Be careful :

  • Introduced CSS Files can't be mixed ;
  • reference After the parameter is used, you can use the variables of the imported file and the mixed but imported less Classes and blends defined in the file are no longer output , So you don't have to add parentheses one by one , Suitable for writing general purpose less Documents for other less Files use variables and mixtures ;
  • Use inline Parameters , It will directly output the classes and the mixture , You cannot use variables and blends in the import file , Suitable for writing public styles , For direct use ;
  • How many times multiple Parameter import the same file , How many times will it output ( Output every time you introduce it ).
// com.less
@color:pink;
.bg{
    background-color: @color;
}

//  Parameters use 
// 1  Default  once
@import (once) "com";
// Output 
.bg {
  background-color: pink;
}

// 2 reference
@import (reference) "com";
div{
    color: @color;
}
//  Output 
div {
  color: pink;
}
.bg {
  background-color: pink;
}

// 3 inline
@import (inline) "commont.css";
@import (inline) "commont.less";
//  Output 
@color:pink;  					//  Report errors   Because it makes direct output   stay css You can't define... In this way   So wrong reporting 
.bg{
    background-color: @color;                  //  Report errors 
}
//  therefore   Use inline Parameter introduction less When you file   We need to pay attention to 

// 4 less
@import (less) "com";
//  Output 
.bg {
  background-color: pink;
}

// 5 css
@import (css) "com";
.div{
    .bg;    		//  Report errors   You can't mix 
}

// 6 multiple
@import (multiple) "com.css";
@import (multiple) "com.css";
//  Output 
@import "com.css";
@import "com.css";

版权声明
本文为[Su Yi]所创,转载请带上原文链接,感谢
https://chowdera.com/2020/12/202012061743358557.html