为了账号安全,请及时绑定邮箱和手机立即绑定

less,变量,嵌套,函数方法

标签:
CSS3 Sass/Less

css不是编程语言,而是标记语言;

less是编程语言预处理编程语言,所有具有变量,封装,多态等;

less预处理预编译的思想是:less写完的样式,不能直接应用于浏览器,因为浏览器不识别,我们需要转化为css才可以应用于浏览器;

less使用的两种方法:
--------------

node 环境编译less安装 npm install -g less;
在css文件中打开cmd命令:执行:lessc index.less  index.css;
执行:lessc index.less  index.css -x:编译后进行压缩;
检测less是否检测成功: lessc -v

浏览器引用less,
定义一个index.less,《link rel=‘stylesheet/less’ src='index.less'》在引入less.min.js;

<script>
    // less 的监听模式,1s后自动刷新页面
      var less = {
       env:'development',
        poll: 1000,//在间隔模式下多久一次刷新
       }
</script>
<script src='js/less-2.3.2.min.js'></script>
<script>
    less.watch()
</script>
less语言定义:

导入import

import (reference) 'commont';// 导入公共的样式;
// reference  只引入公共的方法,但不编译;

变量

@color-58:#585858;
@url:'../img/banner/'

.publick{// .publick方法没有加();可以当做样式用,也可以给别人用;.publick如果加了(),就不能当做样式使用,只能当做方法调用;
    width:100px;
    height:100px;
}

.box{
.publick;//box我们在这里征用了.publick函数的样式;
color:@color-58
background:url('@{url}/p1.png') no-repeat;//url地址我们需要用{ }包起来;
}

.box2:extend(.public){  // extend连字符公用     保证.public方法不加括号;

}
// 编译后的结果(公用)
.box2,.public{
    width:100px;
    height:100px;
}

函数

// @property:all定义变量默认值;
transition(@property:all,@duration:1s,@time-function:linear,@delay:0s){
-webkit-transition:arguments;
-moz-transition:arguments;
-ms-transiton:arguments;
-o-transition:arguments;
transition:arguments;
}

.box{
.transition(@duration: 0.3s);// 指定我们传递的变量值;
}

less 方法

color方法
@col: '#000';
background: color(@col);

data-uri方法
data-uri:讲图片进行base64转码,图片优化,不用向服务器发送请求;对于大的图片less中不能进行base64;(tool.css-js.com)项目中慎用base64编码,代码太多;
@url:'../img/swiper'
background:data-uri('@{url}/page1.png') no-peate;

unit方法:添加和删除单位
@w100:100px
.box{
width: unit(unit(@w100)-50,px);// unit(@w100) -50 去除单位向减; 然后在添加单位
}

extract方法 :提取
@color: #000,#333,#fff,#ccc,#eee;
.box{
background:extract(@color,length(@color))// 提取最后一个颜色
}

floor,ceil,percentage,abs,round,pow,sprt,mod(取余数)
floor:
参数:number
实例:floor(3.2)
输出:4

mod:
实例:mod(4,2)
输入:0

percentage:
参数:number 浮点数
实例: percentage(0.5)
输入:50%

嵌套

.box{
   .div{
     position:fixed;
     span{}
    }
}

运算

.average(@x,@y){
    @result:((@x+@y)/2);// @resul表示返回值
}
.box{
.average(10,2);// 方法执行;
z-index:@result;//返回值
}

// 常用的条件判断
使用IS 函数:iscolor,isnumber,isstring,iskeyword,isurl等
.public (@y) when (iscolor(@y)){
backgroud-color:#000;
}
.public (@x)  when (@x<10) and (@x>0)){
background-color:#ededed;
}

.box{
.public (red)
}

作用域

@v:1
.box{// box是命令空间,{}里面就是私有的作用域
    @v:10;
    z-index:@v
}
点击查看更多内容
1人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
Web前端工程师
手记
粉丝
64
获赞与收藏
315

关注作者,订阅最新文章

阅读免费教程

感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消