您的位置:首页 > 产品设计 > UI/UE

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()+'!'`;
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: