![](https://img-blog.csdnimg.cn/20200726174204314.jpg?x-oss-process=image/resize,m_fixed,h_224,w_224)
less
Less 是一门 CSS 预处理语言,它扩展了 CSS 语言,增加了变量、Mixin、函数等特性。Less 可以运行在 Node 或浏览器端。
hide_in_darkness
萌新一枚
展开
-
Less学习--部分函数
更多函数请查看官方文档:less英文官方文档@rules:{ color:red;};@lists:1,2,3,4,5,6;p{ //isnumber:是否是数字; padding-right:isnumber(#ff0); padding-left:isnumber(12px); //isstring是否是字符串 width:isstring("string"); //isurl是否是url height:isurl(url("www.baidu.com")); //isk原创 2020-07-24 17:30:11 · 169 阅读 · 0 评论 -
Less学习--逻辑运算、属性规则集
逻辑运算// 算术运算符±*/会在计算之前考虑单位并转换@base:5%;@couversion-1:5cm+10mm;属性规则集可以自己定义一个CSS属性集@detached-ruleset:{ background:red; width: 100px; height: 200px;};.top_list_goup{ @detached-ruleset(); //调用时必须加上()}可以在属性规则集中采用@media冒泡@my-ruleset: { .my-se原创 2020-07-24 16:23:29 · 873 阅读 · 0 评论 -
Less学习--@media、@import、@arguments、@reset
@media指令标签冒泡 常用在屏幕属性等.screen-color{ @media screen{ //@mdia 成为对象(条件)指令 //可以将后面的条件(对象)冒泡到根标签 color: green; @media (min-width: 768px){ //@media嵌套时,内部的条件(对象)要加小括号 background-color:red; } } @media tv{ color: black; }}无条件指令(例如font-face或原创 2020-07-24 16:15:39 · 988 阅读 · 0 评论 -
Less学习--嵌套、extend继承
嵌套less允许标签嵌套//pre's css.head_group div.nav_list ul{ overflow: hidden; }.head_group div.nav_list ul li{ float: left;}//now's less //结构代码更加简洁 模仿了HTML结构.head_group{ div.nav_list{ ul{ overflow: hidden; li{ float: left; } &原创 2020-07-24 16:10:39 · 385 阅读 · 0 评论 -
Less学习--Mixin混合
混合选择器Mixin在这里我把他简单的理解为类对象.bordered{ //实际上是.bordered(*args,**kwargs){} // args非关键字参数 kwargs关键字参数 border-top:1px dotted black; border-bottom:2px solid black;}//编译后//在css文件中输出的Mixin.bordered{ border-top:1px dotted black; border-bottom:2px solid原创 2020-07-24 16:01:59 · 132 阅读 · 0 评论 -
Less学习--变量延迟加载、作用域、命名空间的创建与访问
作用域在css属性集中使用的变量总是在当前作用域中先去查找数据,如果没有找到,则会去他的上一级寻找,直到找到为止@var:red;#page{ @var:white; #header{ @var:blue; color:@var; @var:yellow; } color:@var;}变量的延迟加载less中变量总是在作用域结束时才会获取数值所以上述代码片段中 @var:blue; color:@var;var最终获取yellow时才会执行 color:@var原创 2020-07-24 15:49:34 · 203 阅读 · 0 评论 -
Less学习--注释、变量、转义、可变插值
注释可以使用单行注释和多行注释但只有多行注释能被解析变量variable在样式表中多次被引用的值可以将其定义为变量这样就易于维护@nice-color: #5B83AD; /*用@定义一个变量*/@light-color: @nice-color + #111111; /*颜色可以进行加减*/#header_group{ color: @light-color;}也可以用变量名定义变量@pig:"today you are a pig";@message:"pig"; //这原创 2020-07-24 15:40:02 · 199 阅读 · 0 评论