Less常用来写样式,比较多的用法是使用第三方软件编译成CSS文件,然后在HTML页面引入CSS文件。而不是直接在HTML页面里引入编译文件和Less文件。如此以来,在后期修改方便的多。当然,在写小项目的时候可能会觉得写CSS比写Less方便的多。写LESS更多的是后期的维护和修改,它可以实现改一个地方多处修改的好处。
它可以在Node.js中使用,也可以在浏览器端使用,也就是客户端使用。
@charset编码:
@charset "utf-8"
Less的注释:
可以使用css中的注释(/**/)也可以使用//注释,但是使用//不会被编译。
/*该注释会被编译*/
//该注释不会被编译
变量。
@开头。
@bgColor : red;
混合:Mixin
混合变量:
.border{border:1px solid red;}
带参数的混合:
.border-radius(@radius){css代码}
可设置默认值
.border-radius(@radius:5px){css代码}
用法:
.test_hunhe{
.border-radius(30px);
}
运算
任何数字、颜色或者变量都可以参与运算,运算应该被包裹在括号里。如+ - * /
匹配模式
相当于js中的if,但不完全是。
满足条件后才能匹配。
用法:(三角的写法)
.sanjiao{
width:0;
height:0;
overflow:hidden;
border-width:10px;
border-color:transparent transparent red transparent;
border-style:dashed dashed solid dashed;
}
//匹配模式
.triangle(top,@w:5px,@c:#ccc){
border-width:@w;
border-color:transparent transparent @c transparent;
border-style:dashed dashed solid dashed;
}
.triangle(bottom,@w:5px,@c:#ccc){
border-width:@w;
border-color:@c transparent transparent transparent;
border-style:solid dashed dashed dashed;
}
.triangle(left,@w:5px,@c:#ccc){
border-width:@w;
border-color:transparent @c transparent transparent;
border-style:dashed dashed solid dashed;
}
.triangle(right,@w:5px,@c:#ccc){
border-width:@w;
border-color:transparent transparent transparent @c;
border-style:dashed dashed solid dashed;
}
.triangle(@_,@w:5px,@c:#ccc){ //@_代表始终带上这部分
border-width:@w;
border-color:transparent transparent transparent @c;
border-style:dashed dashed solid dashed;
}
嵌套规则。嵌套建议不大于3层。最多3层。
其中有两种用法:
&对伪类使用:hover或focus...
&对连接的使用:&-item
&代表上一层选择器。
用法:
.item{
@w:130px;
@h:130px;
@img_h:40px;
width:@w;
height:@h;
@_img{ //此处代表的是.item_img
height:@img_h;
}
}
@arguments变量。
@arguments包含了所有传递进来的参数。
!important关键字。
会为所有混合所带来的样式,添加上!important。优先级更高。
避免编译。
有时候需要输出一些不正确的语法或者使用一些Less不认识的专有语法。
可以在字符串前加上一个~
用法:width:~'calc(100%-35)'
@import引入文件。
如果引入的是Less文件,则可以不带后缀 @import "ku"
如果引入的不是Less文件,则需要带后缀。如:@import "a.css"
或者:@import (less) "a.css"
分享到:
相关推荐
less使用的入门教程,详细介绍less的使用方法
主要介绍了详解在React项目中安装并使用Less(用法总结),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
使用静态内容清理属性、选择器和混合。 因此,如果存在变量,内容将是动态的。 制作简单的主题 简单干净。 您无需担心所有静态内容。 主题只需要需要更改的属性。 安装 npm install gulp-theme-less 用法 ...
css媒体查询有一个 宽高比很方便,aspect-ratio ,可以直接使用宽/高 来进行页面适配 使用样例如下: // 宽高比在((320/50)+(728/90))/2 两个尺寸中间值以内 适配 320*50 设计图样式 @media screen and (min-...
用法 1.按照常规方式在folder写LESS: 文件:lessfiles / page.less @base : #f938ab ; @width : 100 px ; @padding : 10 px ; .box-shadow ( @style , @alpha : 50 % ) { box-shadow : @style rgba ( 0 , 0 , 0 ...
less 与 more 类似,但使用 less 可以随意浏览文件,而 more 仅能向前移动,却不能向后移动,而且 less 在查看之前不会加载整个文件。 语法 less [参数] 文件 参数说明: -b 设置缓冲区的大小 -e 当文件显示结束后...
在Vue中使用Less 1、安装依赖 处理普通的.css 文件, 需要安装css-loader,style-loader .less 文件, 需要安装 less-loader npminstall css-loader style-loader –save-dev npminstall less-loader –save-dev 2...
用法 用于Next.js // next.config.js const withAntdLess = require ( 'next-plugin-antd-less' ) ; module . exports = withAntdLess ( { // optional modifyVars : { '@primary-color' : '#04f' } ,
要编译LESS,请使用LESS的官方工具集。 安装 使用npm: npm install postcss-less --save-dev 如果您发现此模块有用,请考虑。 用法 无postcss-less的最常见用法是将PostCSS转换直接应用于LESS源。 例如。 以LESS...
安装 npm install metalsmith-less用法 var less = require ( 'metalsmith-less' )new Metalsmith ( __dirname ) . use ( less ( options ) ) . build ( )options Object pattern String|Array<String> 用于过滤...
概要 该实用程序实现的功能类似于unixless实用程序,用于在调试... 该程序是交互式的(与之几乎类似),因为您可以使用单个键来执行操作。 Arrow Up/Down -一次向上或向下滚动缓冲区一行。 Page Up/Down Down-向上或
一:使用方法 在vue官方脚手架中,即vue-lci搭建的项目中,可以轻易的使用less/sass。 先使用npm下载依赖,命令行为’npm install less less-loader –save’,再在webpack.base.conf.js中添加rules对象: { test: ...
使用LESS样式表。 安装 $ npm install machinepack-less 用法 有关此模块的最新用法文档,版本信息和测试状态,请参阅 。 为每台机器生成的手册页包含所有预期输入,可能的退出状态和示例返回值的完整参考。 如果您...
lesscss配置文档 浏览器端使用方法 LESSCSS也可以不经编译,直接在浏览器端使用。
那么,本文旨在记录如何在vue-cli初始化的项目中使用less来帮助我们更好的管理css代码。 下面话不多说了,来随着小编一起看看详细的介绍吧 方法如下: 首先,安装less,推荐使用淘宝镜像安装: cnpm install le
stylus-css Grunt 任务将 LESS 转换为 SCSS、CSS 和 Stylus,将 SCSS 转换为 LESS、Stylus 和 CSS,并将 Stylus 转换为 SCSS、LESS 和 CSS ##安装 $ npm install --save-dev grunt-scss-less-stylus-css##用法 ...
主要介绍了IntellJ idea使用FileWatch实时编译less文件的相关资料,需要的朋友可以参考下
用法 将较少的文件放在一个文件夹中。 添加插件即可为其提供服务。 . ├── less │ └── style.less ├── public │ └── index.html └── server.js const fastify = require ( 'fastify' ) ( ) ...
LESS对于大图片是不能转码的,我们可以使用BASE64工具转码(tool.css-js.com) 项目中慎用,当你在移动端项目中有一些大图实在没有办法处理了的情况下在使用BASE64。 @c:'#000' @url:'../img/banner'; .box{ ...
在vue-cli中构建的项目是可以使用less的,但是查看package.json可以发现,并没有less相关的插件,所以我们需要自行安装。 第一步:安装 npm install less less-loader --save-dev 即通过npm安装less和less-loader...