Less学习之代码知识点记录(包含HBuilderx保存自动编译Less设置方法)
2019-06-11 10:24
1171 查看
版权声明:在默默前行的过程中,如果有志同道合的朋友,私信我大家一起交流吧。 https://blog.csdn.net/qq_40282732/article/details/91413864
一、HBuildex编译设置(已配置node与Less插件)
本人使用的是HbuilderX编译,可以实现保存自动编译,在配置文件设置
key:"ctrl+s"和
onDidSaveExecution:"true"
这里是手动编译
二、代码学习模块
使用的是css的模板,所以有些地方会有些颜色不对应
// //****************************************************************************************** //在mian文件中引入@import"style.less",可以不加后缀,如果不想让less对css进行处理,可以@import"style.css" // 命名空间,为了更好的进行封装,将变量或者混合打包起来,这样就比较清楚是比如#header下面的就统一放在#l-bundle下面 #l-bundle{ .l-button{ display: block; } .l-tab{display: block;} } //调用的方法如下 #header .ifdiv{ #l-bundle > .l-button; } // //****************************************************************************************** @border-color: #00C1DE; @bgcolor: #ddd; // 定义通用集,不代参数的 //可以不写括号 .l-border(){ border-top: 1px solid #00c1de; border-bottom: 1px solid #00c1de; } //带混合参数的 .l-border-radius(@radius:10px){ border-radius: @radius; -webkit-border-radius: @radius; -moz-border-radius: @radius; } //有多个参数的 .l-box-shadow(@x: 0,@y: 0,@blur: 20px,@color: #ddd){ box-shadow: @arguments; -webkit-box-shadow: @arguments; -moz-box-shadow: @arguments; } #header{ width: 200px; margin: 20px auto; height: 200px; padding: 10px; background-color: @bgcolor; border: 1px solid @border-color; .l-border;//应用属性集 .l-border-radius; .l-border-radius(30px);//调用时候可以自己加参数 .l-box-shadow(1px,2px);//可以只写部分参数 } // //****************************************************************************************** //匹配模式,想根据传入的参数来改变相应的呈现方式 .l-mixin(dark, @color){ color: darken(@color,10%);//darken是Less自带的函数用以计算颜色的深度 } .l-mixin(light, @color){ color: lighten(@color,10%);//lighten计算颜色的浅度 } .l-mixin(@_, @color){ //@_接受任意值 display: clock; } //进行运行 @switch: light; .class{ .l-mixin(@switch, #888);//调用了light } //也可以实现类的重载 .l-chongzai(@a){ color:@a; } //第一个 .l-chongzai(@a,@b){ color:@a; border:1px solid @b; } div{ .l-chongzai(#ddd, #eee);//传入了2个参数,所以调用的是第二个l-mixin } // //****************************************************************************************** //(模式匹配和导引表达式)当想根据表达式进行匹配而不是参数的个数,通过引导混合来实现if/else的功能 .l-if-mixin(@a) when (lightness(@a) >= 50% ){ //判断明亮度 background-color: black; } .l-if-mixin(@a) when (lightness(@a) < 50% ){ //判断明亮度 background-color: #999; } .l-if-mixin(@a) when(@a=true),(lightness(@a) < 50% ){ //"," 是分隔符类似"||",条件满足1个就可以了,not就是"!",and就是"&&" background-color: #333; } .l-if-mixin(@a,@b) when (@a<@b ){ //进行比较 //需要的操作 } .ifdiv{ .l-if-mixin(#00c1de);//进行了判断选择了第二个,因为亮度大于50了 } //基于值的类型进行匹配 .l-if-mixin(@a) when (iscolor(@a)){ //用js进行颜色判断 //常用的检测函数 //iscolor //isnumber //isstring //iskeyword //isurl //判断是像素:ispixel //判断是单位量:ispercentage //判断是em:isem } // //****************************************************************************************** //less用嵌套的方式编写层叠样式 // #header .ifdiv{ /这里是内容 } //less的写法↓ #header{ color: #00C1DE;//#header这个层级的样式 .ifdiv{ font-size: 1.25rem;//. ifdiv这个层级的 &:hover{//ifdiv的伪类样式 font-size: 1.3125rem; } } } //写串联选择器,而不是后代选择器比如#header .fidiv.fidiv2{} #header{ .fidiv{ .ifdiv2{ margin: 0 auto; } } } // //****************************************************************************************** // less的运算 @base: 2px; @fillter: @base * 2; @other:@base + @fillter; //可以进行复合运算 //2px+2会输出6px; .ifdiv{ border: (@base * 2) solid @bgcolor; } // //****************************************************************************************** //Less提供color函数,会先转换成HSL色彩空间,然后在通道级别操作 @color: #00c1de; .dsad(){ lighten(@color,10%);//返回亮10% darken(@color,10%);//返回暗10% saturate(@color,10%); //饱和度增减10% desaturate(@color,10%);//饱和度减少10% fadein(@color, 10%);//透明度减少10% fadeout(@color,10%);//透明度增加10% fade(@color, 50%);//设置透明度50% spin(@color, 10);//返回颜色比@color大10度的颜色 spin(@color, -10);//返回@color小10度颜色 mix(@color1,@color2);//返回color1 和color2的混合 //在一个颜色的通道上创建另外颜色 @new: hsl(hue(@old), 45%, 90%); } // //****************************************************************************************** //数学函数,提供数学运算 .math(@a){ round(1.67);//2 ceil(2.4);//3 floor(2.6);//2 percentage(0.5)//换成百分比 } // //****************************************************************************************** //作用域会从本地先查找,然后再到父级去知道找到.Less为止 @l-color: red; #page{ @l-color: #ddd; #header{ @l-color:blur; color: @l-color;//最后选择的是最近的blur; } } // //****************************************************************************************** //插值替换 @l-base-url: "http://www.xxxx.com"; .header{ background-image: url("@{l-base-url}/images/xx/index-logo.png");//和JSP一样的替换 } // //****************************************************************************************** //避免编译 .class{ filter: ~"ms:alwsssssssssssssss";//就不会去编译,原原本本的输出 } // //****************************************************************************************** //JS的表达式 // @var: `"hello".toUpperCase()+'!'`;
相关文章推荐
- HBuilder 中 LESS 自动编译为 CSS 的方法
- HBuilder配置自动编译Less(包含less-plugin-functions)
- 小tips:Hbuilder编辑器开启less自动编译为css的方法
- 【小梅哥SOPC学习笔记】设置Eclipse在编译(build)前自动保存源代码文件
- Hbuilder开启less自动编译的方法
- HBuilder设置代码自动换行的方法
- 设置resharp4.0代码自动编译功能选项,暂时禁用
- 关机时,自动清除运行框的记录的设置方法
- appweb学习记录---代码编译
- MyEclipse 6.5 代码单词自动提示设置方法
- iOS学习爬坑记录17:iOS8从app跳转到设置setting bundle的方法(UIApplicationOpenSettingsURLString)
- IntelliJ IDEA开发Java web项目,设置JSP代码自动补全的方法
- .NET下编译C++代码时出现fatal error C1083: 无法打开包含文件:“iostream.h”: No such file or directory错误的解决方法.
- ExtJs学习篇---ExtJS 3.0以上版本在eclipse中使用spket插件设置自动提示的方法
- PHP Strom 配置less 并设置编译后在远程开发模式下自动上传css文件
- Eclipse设置程序编译运行前自动保存
- 解决webstorm 下编写vue代码,保存后不自动打包编译的问题
- Eclipse 设置光标移到代码上自动提示的方法
- 设置eclipse在编译运行项目之前自动保存修改的文件
- 自动将当前日期时间加入到编译代码中的方法