LESS从入门到精通

一、LESS是什么

LESS是CSS预处理语言,是CSS的扩展。

然后说说比较流行的几款预编译器:SASS/SCSS、LESS、Stylus。

SASS学习网站:

https://www.sass.hk/
https://www.w3cschool.cn/sass/
https://github.com/sass/sass

LESS学习网站:

http://lesscss.cn/
https://less.bootcss.com/
https://www.w3cschool.cn/less/
https://github.com/less/less.js

Stylus学习网站:

https://stylus.bootcss.com/
https://github.com/stylus/stylus

二、为什么用LESS

SASS/SCSS和Stylus都很强,但是我还是选择了LESS,个人喜欢NodeJS,然后stylus空格我又不喜欢,就用了LESS,现在用的也习惯了,下面就给大家介绍一下LESS的一些用法吧。

LESS——像写javascript一样书写css

特点:

1、写样式更简单:嵌套

2、使用方便:变量、运算、函数

3、学习成本低:语法


三、怎么用LESS

1、安装使用

(1)浏览器中使用

在head中引用:

<link rel="stylesheet/less" type="text/css" href="index.less" />//必须加上/less
<script src="less-1.3.3.min.js"></script>//js必须在less后引用

CDN:
https://cdnjs.cloudflare.com/ajax/libs/less.js/3.9.0/less.min.js
https://cdn.bootcss.com/less.js/3.9.0/less.js

观察模式,不调用也可以:

<link rel="stylesheet/less" href="index.less">
<script>less = { env: 'development'};</script>//声明开发模式
<script src="less-1.3.3.min.js"></script>
<script>less.watch();</script>//调用观察模式

根据个人需求进行配置,不配置也可以:

<script>
less = {
env: "development", // 开发(development)模式/生产(production)模式
async: false, // 异步加载
fileAsync: false, // load imports async when in a page under
// a file protocol
poll: 1000, // 观察模式间隔
functions: {}, // user functions, keyed by name
dumpLineNumbers: "all", // "comment" or "mediaQuery" or "all"
relativeUrls: false,// whether to adjust url's to be relative
// if false, url's are already relative to the
// entry less file
rootpath: ":/"// a path to add on to the start of every url
//resource
};
</script>

(2)在node.js中使用

安装:

npm install -g less

编译:

lessc index.less index.css

2、语法

保留CSS的基础语法,并进行了扩展

import "reset.css"    less在编译时不会变动css文件
import "base"    less导入其他less文件时可以省略文件格式
import url("base.less")    less也可以使用url形式导入,但是必须有后缀

3、运算

在less中,可以在书写属性时直接进行加减乘除

例子:header插入了一个padding

@fullWidth: 1200px;
.header{
    width: @fullWidth – 20px * 2;
    padding: 0px 20px*2;
}

4、变量

(1)格式:以@开头

@headergray: #c0c0c0;
@fullWidth: 1200px;
@logoWidth: 35%;

(2)字符串插值

@name: banner;
background: url("images/@{name}.png") no-repeat;
编译:
background: url("images/banner.png") no-repeat;

(3)避免编译

background: ~"red";
编译:
background: red;

(4)移动端rem布局中的使用

less:
@fullWidth: 750;
@toRem: unit(@fullWidth/10,rem);
header{
    height: 150/@toRem;
}
编译:
header{
    height: 2rem;
}

5、混合

(1)在一个类中继承另一个类

.class1{ }
.class2{
    .class1;
}

(2)用&替换当前选择器

a{
    color: #000;
    &:hover{
        color: #f00;
    }
}

(3)在父类中嵌套子类

.class1{
    p{
        span{
            a{ }
        }
        &:hover{  }
    }
div{  }
}

(4)带参混合

.color(@color=red){
    color: @color;
}
.class1{
    .color(#0f0);
}
.class2{
    .color();
}

6、函数

(1)逻辑控制

格式:statement when(conditons)、prop: if((conditions),value);

例子1:在less中使用一个带参类名展示上下左右四个方向的纯CSS三角形

.triangle(@val) when(@val=left){
    width: 0;
    height: 0;
    border-left: none;
    border-right: 20px solid #f00;
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
}
.triangle(@val) when(@val=right){
    width: 0;
    height: 0;
    border-right: none;
    border-left: 20px solid #f00;
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
}
.triangle(@val) when(@val=top){
    width: 0;
    height: 0;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-top: none;
    border-bottom: 20px solid #f00;
}
.triangle(@val) when(@val=bottom){
    width: 0;
    height: 0;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-top: 20px solid #f00;
    border-bottom: none;
}
.div1{
    .triangle(left);
}
.div2{
    .triangle(right);
}
.div3{
    .triangle(top);
}
.div4{
    .triangle(bottom);
}

例子2:

background: if((true), #f00);

(2)循环

例子:将8个td的背景依次更换为bg_1.png、bg_2.png、…、bg_8.png

table td{
    width: 200px;
    height: 200px;
    .loop(@i) when(@i<9){
        &:nth-child(@{i}){
            background: url(~"../images/partner_@{i}.png") no-repeat;
        }
        .loop(@i+1);
    }
    .loop(1);
}

(3)列表

@backgroundlist: apple, pear, coconut, orange;

(4)less函数库

image-size(“bg.png”)    获取图片的Width和Height
image-width()    获取图片的Width和Height
image-height()    获取图片的Width和Height
convert(9s, ms)    转换9秒为毫秒
convert(14cm, mm)    转换14厘米为毫米

更多函数参考官方函数库,包括混合函数、数学函数、字符串函数、列表函数等等

7、使用JS表达式

less中还可以引用js表达式,不过一般都不推荐使用,此种方式在使用nodejs将less编译css时可能会报错。

格式:`javascript`

例子:将高度设置为当前获取到的浏览器的高度

@fullHeight: unit(` window.screen.height `, px);
div{
    height: @fullHeight;
}

尝试将@width: unit(` window.screen.width `, px)引进vw布局?

不推荐,不建议less在正式环境中使用,使用LESS时需要在头部引入js,而在js执行时的时候,会消耗时间,而less编译需要在js执行后,会在一定程度上影响到性能。

码字不易,后面还会放出各种文章,喜欢的关注一下我吖,你们的关注是我最大的动力

github:github.com/hn-failte

个人博客:hn-failte.github.io

博客园:cnblogs.com/failte

上一篇:CSS揭秘—灵活的背景图(三)


下一篇:前端开发系列(十六)网页布局教程(2)