JavaScript基础学习——CSS预处理Less

一、CSS预处理

目前CSS预处理语言主要有：Less,SASS,Stylus等。浏览器不能编译.less/.scss/.sass/.styl等文件，在html文件引入前面这些样式文件，必须先编译成.css文件。

二、在VSCode中编译less

1、安装插件：按Ctrl + Shift + x，打开扩展面板，安装Easy LESS。

2、修改设置文件（settings.json），在settings.json中添加如下代码：
"[less]":{
"editor.suggest.insertMode": "replace"
},
"less.compile": {
"compress": false, /* 是否进行压缩处理 */
"sourceMap": false,/* 是否生成map（映射文件)文件，如果为true，则可以在控制台看到less的行数 */
"out": true,/* 编译后输出 */
"outExt": ".css" /* 设置编译后的文件的扩展名 */
}

三、Less官网：http://lesscss.cn

四、CSS预处理

CSS预处理是一种将CSS作为目标生成文件的，使用变量、函数及简单的逻辑实现更加简洁、适应性更强、可读性更好、更易于代码维护的兼容浏览器的页面样式文件。通过编程来写CSS。

五、Less

Less 是一门 CSS 预处理语言，它扩充了 CSS 语言，增加了诸如变量、混合、函数等功能，让 CSS 更易维护、方便制作主题、扩充。Less 可以运行在 Node 或浏览器端。形成的文件的扩展名为：.less。

使用的目的：是为了提升开发效率。

六、Less语法

1、变量

格式：@变量名: 值;

注意：在less中引用变量时，要把变量当成一个常量处理。

创建的后缀一定是xxx.less

@bgColor:pink;div{background-color: @bgColor;
}

2、混合用法

在less中定义一些通用的属性集为一个class，然后再在另一个样式中去调用它。

@color:rbg(255,189,91);
@boxShadow:0px -2px 2px 2px #999;.box{color: @color;width: 200px;height: 50px;box-shadow: @boxShadow;margin-bottom: 10px;
}p{color: @color;width: 200px;height: 100px;border: 1px solid #000;
}@cl:#eee;
@highlight:"cl";
#header{color: @@highlight;
}

3、带参数的混合用法

用法1：
.类名(){

/*css样式表;*/

}

.bd{border-top: 1px solid #000;border-bottom: 1px solid #999;
}.txtOverflow{width: 200px;overflow: hidden;
}#box{color: red;.bd;
}p{.bd;.txtOverflow;
}

用法2：
.类名(参数列表){
属性名：参数1；
属性名：参数2；
....
}

用法3：
.类名(参数1:默认值,参数2:默认值,...){
属性名：参数1；
属性名：参数2；
....
}

.bd(@lineWidth:3px){border-top: @lineWidth solid #000;border-bottom: @lineWidth solid #000;
}.txtOverflow{width: 200px;overflow: hidden;
}#box{color: red;.bd(2px)
}p{.bd(1px);.txtOverflow
}span{.bd();.bd
}.shadow(@x1,@y1,@blur1,@color1,@x2:2px,@y2:2px,@blur2:3px,@color2:gray){box-shadow: @x1 @y1 @blur1 @color1;text-shadow: @x2 @y2 @blur2 @color2;
}article{.shadow(3px,3px,5px,green,1px,0,2px,#000);
}
address{.shadow(3px,3px,5px,green);
}.txtOver(){white-space: nowrap;overflow: hidden;text-overflow: ellipsis;
}.p1{.txtOver();
}

4、嵌套规则
格式：
父级（父类）｛
属性：属性值;
...
子级（子类）｛
属性：属性值;
...
&:hover{
属性：属性值;
...
}
&:before{
属性：属性值;
...
}
&:nth-of-type(n){
属性：属性值;
...
}
...
｝
｝

.box{width: 100%;height: 200px;overflow: hidden;span{color: red;display: block;}ul{list-style: none;li{float: left;margin-right: 10px;&:nth-child(2){color: blue;}p{line-height: 1.5em;span{color:red;font-style: italic;}a{text-decoration: none;color: #123456;position: relative;&:hover{text-decoration: underline;color: red;}&:before{content:"";display: block;width: 100%;height: 1px;position: absolute;left: 0;top: 0;border-top: 1px solid #000;}}}   }}
}

5、运算

在Less中可以使用加、减、乘和除运算。

注意：减号左右要加空格，其它运算符可以不加。

@w:100px;
@num:10px;p{width: @w*2.5;
}.contain1{margin: @num * 2 @num *1.5 @num @num - 2;
}.container2{margin: (@num+5)*2 @num*1.5 @num @num - 20; /* 减号左右要加空格，其它运算符左右可以不加空格 */
}

6、作用域

作用域在编译采用最近原则。首先会从当前作用域内查找变量或混合模块，如果没找到，则去父级作用域中查找，直到找到为止。

@var:red;header{@var:blue;nav{background-color: @var;}
}section{border: 1px solid @var;
}footer{@var:pink;color: @var;
}

7、函数

（1）Color函数

颜色会先被转化为HSL色彩空间，然后在通道级别中操作。
设置颜色或饱和度：
lighten(@color, 10%); 返回一个比@color浅10%的颜色
darken(@color, 10%); 返回一个比@color 深10%的颜色
saturate(@color, 10%); 返回一个比color饱和比高10%的颜色
desaturate(@color, 10%); 返回一个比color饱和比低10%的颜色
fadein(@color, 10%); 返回一个比@color 透明度低10%的颜色
fadeout(@color, 10%); 返回一个比@color 透明度高10%的颜色
fade(@color, 50%); 返回一个@color颜色的50%透明度的颜色
spin(@color, 10); 返回一个比@color 色调大10度的颜色
spin(@color, -10); 返回一个比@color 色调小10度的颜色
mix(@color1, @color2) 返回一个@color1和@color2混合的颜色

提取颜色信息：
hue(@color); 返回@color颜色的色调通道
saturation(@color); 返回@color颜色的饱和度通道
lightness(@color); 返回@color颜色的亮度通道

@cl1:rgb(71, 20, 105);
@cl2:#fff;p{color: lighten(@cl1, 20%);
}span{color: darken(@cl2, 100%);
}em{color: saturate(@cl1, 20%);background-color: fadein(@cl1, 20%)
}sup{color: mix(@cl1, @cl2);
}a{background-color: hsl(hue(@cl1),60%,70%);/* h:0-360,s:0-100%,l:0-100% */
}

（2）Math函数
round（x，y）对x四舍五入，保留y个小数点
ceil（x）向上取整
floor（x）向下取整
percentage（x）取百分数。eg：percentage（0.6）返回60%
min(a,b,c,d,e…); 取最小值
max(a,b,c,d,e…); 取最大值

@w: 2.4px;div{border: round(@w*3) solid #000;
}.width(@width){width: percentage(@width);
}.box{.width(.8);height: max(10px,20px,-9px,-100px);
}

8、避免编译

在开发时，可能会现Less不识别的代码，或者不让编译，这时需要用到Less的专用语法-避免编译。用双引号引起来，再在前面加上~。

.calc(@x){height: @x;}.box{width: ~"calc(100px - 20px)";.calc(100px - 20px);}

JavaScript基础学习——CSS预处理Less相关推荐

HTML，css和JavaScript的基础学习—css篇
HTML,css和JavaScript的基础学习-css篇 1.css是什么?由什么组成? 层叠样式表,定制html元素的显示样式,美化页面,对于前端页面的搭建十分重要. 由三部分组成:选择器,属性, ...
javaScript基础学习 - 14 - JavaScript内置对象 -案例代码
javaScript基础学习 - 14 - JavaScript内置对象 -案例代码 1. Math对象最大值 2. 封装自己的数学对象 3. Math绝对值和三个取整方法 4. Math对象随机数方 ...
JavaScript基础学习模拟京东查询快递单号
JavaScript基础学习模拟京东查询快递单号 <!DOCTYPE html> <html lang="en"><head><meta ...
JavaScript基础学习动态生成表格
JavaScript基础学习动态生成表格根据我们拥有的数据来动态创建表格的行和列,以及实现删除行的操作 <!DOCTYPE html> <html lang="en&q ...
JS学习笔记（JavaScript基础学习必备）
讲解JavaScript 基础语法.关键特性.JSON.WebAPI 等知识点.涉及网页窗口交互的方法以及通过 DOM 进行网页元素的相关操作. 文章目录一.JavaScript 基础 1.什么是 ...
Web前端开发精品课HTML CSS JavaScript基础教程CSS部分知识点总结
内容来自莫振杰Web前端开发精品课HTML CSS JavaScript基础教程章节总结第11章 CSS简介 1.HTML是网页的结构,CSS是网页的外观,JavaScript是网页的行为. 2. ...
JavaScript基础学习、复习笔记
文章目录前言一.js基础知识 (变量.数据类型.运算符) 1.变量 1.1 声明变量及初始化 1.2 变量更新 1.3 变量语法拓展 1.4 变量命名 1.5 交换两个变量的值 2. 数据类型(重 ...
JavaScript 基础学习笔记
JavaScript 基础一.初始 JavaScript 1.JS 注释 2.JS 输入输出语句二.变量 1.变量概述 1)什么是变量 2)变量在内存中的存储 2.变量的使用 3.变量的初始化 4 ...
HTML JavaScript 基础学习
HTML 中肯定会用到 JavaScript 的知识点,会点 JavaScript 的基础知识不会吃亏,其实打算去买JavaScript的教程去专门学习一下,但是交给我的时间不多了,记录一点,能会一点 ...

JavaScript基础学习——CSS预处理Less

JavaScript基础学习——CSS预处理Less相关推荐

最新文章

热门文章