CSS进阶-Less

介绍

less是一个CSS预处理器 less文件后缀是.less

扩充了CSS语言，使CSS具备一定的逻辑性、计算能力

注意：浏览器不识别less代码，网页要引入对应生成的css文件

vscode中可配合Easy Less插件使用，less文件保存自动生成css文件

注释

// 单行注释 无法生成到css中/* 块注释 */

计算

less文件里支持计算

加减乘直接写

除法需要添加小括号或点.

.box {width: 110 + 10px;height: 100 - 10px;font-size: 8 * 2px;padding: (10 / 2px); // 工作常用margin: 8 ./ 2px;
}

嵌套

less支持直接在父级里书写子级样式

.father{color: red;.son{color: aqua;/* &表示当前选择器 */&:hover{color: gold;}}
}

less写css有个巧妙地应用：激活状态和非激活状态

// 只有active时，颜色是红色；通过js增加unactive时，有两个类名，颜色是蓝色
.active{color: red;&.unactive{ // .active.unactive 这个巧妙color: blue;}
}

变量

// 1 定义变量
@color: #2c2cdd;.box{// 2 使用变量color: @color;
}

导入其他less文件

@import './01-体验less.less'; // 可省略后缀.less

导出

方法1：修改vscode中easy less插件的json文件，统一生成css的路径

方法2：在less文件第一行(必须)书写 // out: 路径

// out: ./abc/

禁止导出（生成css文件）

在less文件第一行(必须)书写 // out: false

// out:false

CSS进阶-Less相关推荐

《Web前端开发精品课 HTML与CSS进阶教程》——1.4　id和class
本节书摘来自异步社区<Web前端开发精品课 HTML与CSS进阶教程>一书中的第1章,第1.4节,作者: 莫振杰更多章节内容可以访问云栖社区"异步社区"公众号查看. ...
(11/24) css进阶：Less文件的打包和分离
(11/24) css进阶:Less文件的打包和分离写在前面:在前面我们对css打包和分离进行了描述.此节我们开始学习如何对less文件进行打包和分离. Less 是一门 CSS 预处理语言,它扩展 ...
前端开发注意事项(HTML与CSS进阶)
HTML 与 CSS 进阶 Img 标签 alt 属性一定要添加用于图片描述给机器看的,如果图片加载失败,会显示 alt <img src="" alt="& ...
React学习资料+css进阶资料总结
# Awesome ## 最佳实践 * [React + Redux 最佳实践](https://github.com/sorrycc/blog/issues/1) * [Redux 最佳实践-译]( ...
CSS进阶之关于网格布局(Grid) 你了解哪些
CSS 进阶:网格布局(Grid)及其基本属性网格布局(Grid)是最强大的 CSS 布局方案.起初我也认为 flex 布局就可以完成绝大部分布局场景,但谁不希望用更直观.更简洁的方式来布局自己的网 ...
CSS进阶（一）背景与边框
CSS进阶(一)背景与边框文章目录 CSS进阶(一)背景与边框一.浏览器前缀二.CSS编码技巧 1.尽量减少代码重复(可复用性) (1)当某些值相互依赖时,应该把他们的相互关系用代码表示出来 ( ...
【前端学习】D3：CSS进阶
文章目录前言系列文章目录 1 CSS的三大特性 1.1 层叠性 1.2 继承性 1.3 优先级(*) 2 盒子模型 2.1 看透网页布局的本质 2.2 盒子模型(Box Model)的组成 2.3 ...
CSS进阶-盒子与动画
CSS进阶-盒子与动画文章目录 CSS进阶-盒子与动画前言 Chapter04 CSS3动画 1. Animation动画 1.1 关键帧 1.2 定义关键帧 1.2.1 定义示例 1.2.2 效 ...
HTML与CSS进阶
目录一.HTML进阶 1. HTML5.XHTML和HTML 2. id属性和class属性 3. 浏览器标题栏小图标 4. 图片语义化 5. fieldset 标签和 legend 标签 6. 列 ...
CSS进阶（P66-P86）
能够使用复合选择器在 HTML 中选择元素,能够使用 Emmet 语法提高编码速度,能够使用 hover伪类选择器设置标签的鼠标悬停状态,能够使用背景相关属性装饰元素的背景样式,能够认识三种 ...

CSS进阶-Less

CSS进阶-Less相关推荐

最新文章

热门文章