1.实现webstrom自动编译less
①.安装node(less依赖于node),win+R进入cmd,输入node -v 出现版本号,表明安装成功。
②.安装less编译器,在cmd中输入npm install less -g,其中cmd路径并没有指定。输入less -v出现版本号,表明安装成功。
③.配置webstrom。File->settings->Tools->File watchers->右上角+号->找到less->ok->中间出现less->把level下的project改成Global->Apply。
④.使用:创建index.less,下面会自动生成index.css和index.css.map。在html中用link引入index.css。
2. less的注释
/*css注释*/
//less注释
.less文件中的/**/注释会编译到.css文件中,//注释不会。所以//才是真正的less注释。
3. less的变量
①.把变量作为属性的值
定义变量:@bgcolor:red;
使用:background: @bgcolor;
②.把变量作为属性名
定义变量:@propName:border;
使用:@{propName}:10px solid #ccc;
③.把变量名当做选择器
定义变量:@selector:.box;
使用:@{selector}{width: 200px;}
4. less变量的作用域
#nav {
@width: 300px;
width: @width;
}
.box2{
//width: @width;在#nav中定义的@width不可以在另一个选择器中使用。
}
less变量的作用域发生在嵌套的时候,变量只在本作用域和下层作用域起作用。
5. less混合
less混合相当于自定义函数。
①.普通混合
例如:在box-inner中定义的样式,也想在box中使用。
.box-inner{
width: 200px;
}
.box{
.box-inner();//调用混合
}
编译后的css为:
.box-inner {
width: 200px;
}
.box {
width: 200px;
}
②.不带输出的混合
.box-inner(){
width: 200px;
}
.box{
.box-inner();
}
编译后的css为:
.box {
width: 200px;
}
此时的混合不会输出,谁调用谁输出。
③.带参数的混合
.box-inner(@width,@height,@bgcolor){
width: @width;
height: @height;
background: @bgcolor;
}
.box{
.box-inner(200px,300px,blue);
}
编译后的css为:
.box {
width: 200px;
height: 300px;
background: blue;
}
④.带参数,参数有默认值混合
.box-inner(@width,@height,@bgcolor:green){
width: @width;
height: @height;
background: @bgcolor;
}
.box{
.box-inner(200px,300px);
}
编译后的css为:
.box {
width: 200px;
height: 300px;
background: green;
}
调用时,若不指定颜色,就按照默认的,指定了就按照指定的。
带默认值的要放在最后,不然传实参时直接就覆盖了。
⑤.带参数,参数有默认值,默认值不按顺序
.box-inner(@width,@height:200px,@bgcolor){
width: @width;
height: @height;
background: @bgcolor;
}
.box{
.box-inner(@width:200px,@bgcolor: blue);
}
编译后的css为:
.box {
width: 200px;
height: 200px;
background: blue;
}
⑥.arguments用于获取所有的形参。适合于所有的参数都是某个复合属性的值。
.transition(@prop: all,@duration: 0s,@timing-function:ease,@delay:0s) {
-webkit-transition: @arguments;
-moz-transition: @arguments;
transition: @arguments;
}
.box {
.transition(width, 10s, linear);
}
编译后的css为:
.box {
-webkit-transition: width 10s linear 0s;
-moz-transition: width 10s linear 0s;
transition: width 10s linear 0s;
}
过渡属性若有多个,比如width,height。调用混合时,每个混合的参数用分号隔开。
.box01 {
.transition(width, height;10s;linear);
}
编译后的css为:
.box01 {
-webkit-transition: width, height 10s linear 0s;
-moz-transition: width, height 10s linear 0s;
transition: width, height 10s linear 0s;
}
6. less条件判断
less 可以使用 when 关键字实现条件判断。
.arrow(@width,@color,@direction) when (@direction = left)
传参数时,若传给@direction的实参是left的时候。
7. less导入
通常,会把变量、混合单独的独立出来。
①.导入变量文件:@import url(variable.less);
②.导入css:@import url(style.css);less也可以导入css,不过 @import url(css文件);该语法其实是css语法,less并未处理,这行代码会原样显示到css中,此时css文件还是两个。工作中建议把后缀名改为.less,这样导入后代码都会编译到一个css中。
8.less嵌套
①.普通嵌套
ul{
li{
}
}
注意:在li中写:nth-child(odd)会被编译成li(空格):nth-child(odd),若不想让中间有空格,写&:nth-child(odd)。
②.媒体查询嵌套
第一种嵌套形式:
@media screen {
@media (max-width: 640px){
}
}
编译后的css为:
@media screen {}
@media screen and (max-width: 640px) {}
第二种嵌套形式:
.container {
@media (min-width: 640px) {
}
@media(min-width: 1024px){
}
}
编译后的css为:
.container {
}
@media (min-width: 640px) {
.container {
}
}
把min-width:640px定义成变量:@min768: ~"(min-width: 640px)";
9.less运算符
+ - * / %
两个运算数,如果只有一个有单位,取这个单位;两个都有单位,取第一个的单位。颜色也可以运算。
@width:100px;
width: @width + 100px;
编译后的css为:
width: 200px;
10.less函数
less函数相当于内置函数。
@baseColor: #000;
color: lighten(@baseColor, 10%);把@baseColor的颜色调亮百分之十。
11.map
#名字() {
属性:值;
}
#名字[属性]
适合把一些列类似的变量合并一个map
#colors() {
bigRed: #f00;
}
.box {
color: #colors[bigRed];
}
编译后的css为:
.box {
color: #f00;
}
css预处理器:Less
最新推荐文章于 2021-07-11 17:22:39 发布