Less 介绍
shen112
共 1949字,需浏览 4分钟
· 2019-05-15
Less环境安装
- 安装nodejs
- 在部分win8系统当中无法安装
(解决办法的是 已管理员权限运行cmd然后再按写命令切换到安装包目录,直接命令执行)
安装完成nodejs之后
- 检测是否安装完成 node –v 查看版本
- 然后检测 npm是否自带 npm –v 查看版本
- 在线安装
- 然后 运行 npm install –g less (部分电脑要 sudo 管理权限
- Lessc –v 查看版本 是否安装成功
- 也可以离线安装,一般没人这么做就不说了
学习less
- Lessc less.less less.css 编译less文件成css
简介
- CSS(层叠样式表)是一门历史悠久的标记性语言,同 HTML 一道,被广泛应用于万维网(World Wide Web)中。HTML 主要负责文档结构的定义,CSS 负责文档表现形式或样式的定义。
- 作为一门标记性语言,CSS 的语法相对简单,对使用者的要求较低,但同时也带来一些问题:CSS 需要书写大量看似没有逻辑的代码,不方便维护及扩展,不利于复用,尤其对于非前端开发工程师来讲,往往会因为缺少 CSS 编写经验而很难写出组织良好且易于维护的 CSS 代码,造成这些困难的很大原因源于 CSS 是一门非程序式语言,没有变量、函数、SCOPE(作用域)等概念。LESS 为 Web 开发者带来了福音,它在 CSS 的语法基础之上,引入了变量,Mixin(混入),运算以及函数等功能,大大简化了 CSS 的编写,并且降低了 CSS 的维护成本,就像它的名称所说的那样,LESS 可以让我们用更少的代码做更多的事情。
LESS 原理及使用方式
- 本质上,LESS 包含一套自定义的语法及一个解析器,用户根据这些语法定义自己的样式规则,这些规则最终会通过解析器,编译生成对应的 CSS 文件。LESS 并没有裁剪 CSS 原有的特性,更不是用来取代 CSS 的,而是在现有 CSS 语法的基础上,为 CSS 加入程序式语言的特性。
语法
- 变量
- Mixin混入
- 嵌套
- Import
- 函数(内置函数 运算)
变量
- LESS 允许开发者自定义变量,变量可以在全局样式中使用,变量使得样式修改起来更加简单。
/*-----------------变量-----------------*/
@mainColor:#E93223;
body{
color: @mainColor;
}
Mixin混入
- Mixin(混入)功能对用开发者来说并不陌生,很多动态语言都支持 Mixin(混入)特性,它是多重继承的一种实现,在 LESS 中,混入是指在一个 CLASS 中引入另外一个已经定义的 CLASS,就像在当前 CLASS 中增加一个属性一样。
/*-----------------mixin 混入----------------*/
/*颜色*/
.red{
color: @mainColor;
}
.border{
border: 1px solid #ccc;
}
.redBorder(){
color: @mainColor;
border: 1px solid #ccc;
}
.mixin-class{
.red();
.border();
}
.mixin-fuc{
.redBorder();
}
嵌套
- 在我们书写标准 CSS 的时候,遇到多层的元素嵌套这种情况时,我们要么采用从外到内的选择器嵌套定义,要么采用给特定元素加 CLASS 或 ID 的方式
/*------------------嵌套------------------*/
/*轮播图*/
#wjs_banner{
.carousel-inner{
> div.item{
a.img_box{
background: url("../images/slide_01_2000x410.jpg") no-repeat center center;
height: 410px;
/*调用redBorder mixin*/
display: block;
.redBorder();
/*调用@mainColor 变量*/
&:hover{
color: @mainColor;
}
}
a.img_mobile{
width: 100%;
display: block;
img{
width: 100%;
display: block;
}
}
}
}
}
评论
Tensor Cores 使用介绍
作者丨进击的Killua来源丨https://zhuanlan.zhihu.com/p/671312675编辑丨GiantPandaCV概要介绍TensorCore 是从Nvidia Volta 架构GPU开始支持的重要特性,使CUDA开发者能够使用混合精度来获得更高的吞吐量,而不牺牲精度。Tens
GiantPandaCV
4
上个月有同事给我介绍了个私活,说她最近太忙做不过来,报酬总共是1万全都给我。前两天给甲方交活,没忍住私下问了下,甲方说报酬是3万
点击上方牲产力关注我后台收到一位网友留言柯基,跟你说个烦心事:上个月有同事给我介绍了个私活,说她最近太忙做不过来,报酬总共是1万块全给我。前两天我给甲方交活,没忍住就私下问了报酬,甲方告诉我报酬是3万。气死了!合着她啥也不干一倒手赚2万,我辛辛苦苦把活全弄完才拿她一半!做朋友怎么这样?还别说,我也遇
TTTEED
5
AI大模型之路 第二篇: Word2Vec介绍
你好,我是郭震今天我来总结大模型第二篇,word2vec,它是大模型的根基,一切NLP都会用到它。Word2VecWord2Vec 是一种流行的自然语言处理(NLP)工具,它通过将词汇表中的每个单词转换成一个独特的高维空间向量,使得这些词向量能够在数学上表示它们的语义关系。这种方法对于后续的深度学习
Python与算法社区
4
yfinance使用教程-《开源项目巡礼》-介绍流行的数据科学开源项目
✔️引言Python 是目前在数据科学领域最流行的编程语言,其不仅语法简洁,更是有丰富的第三方库支持,比如 Pandas、Matplotlib、Numpy 等大名鼎鼎的第三方库,也有众多在特定领域,比如 scikit-learn 之于机器学习,pytorch 之于深度学习等出色的第三方库支持。Pyt
数据科学实战
45
Gin 框架介绍与快速入门
目录Gin 框架介绍与快速入门1.gin.Engine2.gin.Context1.安装2.导入3.第一个Gin 应用1. 快速和轻量级2. 路由和中间件3. JSON解析4. 支持插件5. Gin相关文档一、Gin框架介绍二、基本使用三、应用举例四、Gin 入门核心...
马哥Linux运维
0
Linux curl命令使用代理、以及代理种类介绍
有时出于个人隐私的原因,我们希望隐藏自己的IP,让http服务器无法记录我们访问过它,这时我们可以使用代理服务器。 代理服务器(Proxy Server)是工作在浏览器与http服务器之间的一个服务应用,所有经过...
马哥Linux运维
0
2024更新 产品相关培训咨询服务介绍
“用户要的不是电钻,而是墙上的洞”,很多时候,客户要的也不只是培训,而是提升产品能力,进而拿到业务结果。于是,我觉得这事儿可以分五步走——意识对齐、能力补足、实战演练、业务陪跑、组织优化,每个阶段,解决的...
iamsujie
0
2024更新 产品相关培训咨询服务介绍
“用户要的不是电钻,而是墙上的洞”,很多时候,客户要的也不只是培训,而是提升产品能力,进而拿到业务结果。于是,我觉得这事儿可以分五步走——意识对齐、能力补足、实战演练、业务陪跑、组织优化,每个阶段,解决的...
iamsujie
0