less语法（一） --- Less语言特性

时间  2019-11-29
标签 语法 语言 特性 繁體版
原文   原文链接

1、less语言特性css

1.1   概览java

　　做为 CSS 的一种扩展，LESS CSS 不只向下兼容 CSS 的语法，并且连新增的特性也是使用 CSS 的语法。这样的设计使得学习 LESS 很轻松，并且你能够在任什么时候候回退到 CSS。web

 

1.2 变量app

1.2.1 变量的定义和使用less

　　定义变量：less定义变量使用 “@变量名: 变量值” 的方式定义；函数

　　使用变量：在须要使用定义好的变量的css属性后面直接使用 “@变量名” 便可。学习

例如：在less文件中代码以下url

@width : 100px;  //定义变量
.w {
    width: @width;   //使用变量
}

1.2.2 变量的做用域spa

　　若是对同一个变量定义两次的话，在当前做用域中最后一次定义的将被使用。这不 CSS 的机制相似，最后一次定义的值会成为这个属性的值。若定义在嵌套乊中，那么这个变量就叧能服务亍这个嵌套乊内的属性了。变量也是没有顺序可言的，只要页面里有（便可以在变量定义以前使用），都会按顺序覆盖，按顺序加载。例如设计

@width : 1px;
.meng {
    @width : 2px;
    .long {
        @width : 9000px;
        width:@width;
        @width : 22px;
    }
    width: @width;
}

　　编译后为：

.meng {
    width: 2px;
}
.meng .long {
    width: 22px; //注意此处是22px，而不是9000px
}

　　

例2：在变量定义以前使用：

.header {
    width: @width;   //在变量定义前使用变量是彻底能够的，这和其余语言有区别
}
@width: 50px;

　　

1.2.3 字符串插值

　　Less能够经过@{变量名} 的方式进行字符串插值（字符串的拼接）。例如

@logoUrl = "http://www.XXX.com";
image {
    background-image: url("@{logoUrl}/image/logo.peg")
}

　　编译后的CSS为：

image {
    background-image: url("http://www.XXX.com/image/logo.png")
}

　　

1.2.4 选择器插值

　　Less能够经过 @{变量名} 的方式对CSS的选择器进行插值。例如：

@mySelected: my-class;  //注意此处不能使用双引号或单引号，选择器插值只是单纯的将变量的所有去替换

.@{mySelected}: {   //选择器前面的点 .  表示是类选择器，若是是id选择器，使用#
    width: 100px;
}

　　编译后的CSS

.my-class {
   width: 100px;
}

　　

1.2.5 media query  做为变量

　　若是你但愿在 media query 中使用 LESS 变量，你能够直接使用普通的变量方式。由于“~”后面的值是不被编译的，因此能够用做 media query 的参数。小例子以下

:LESS 代码

@singleQuery: ~"(max-width: 768px)";
div{
    background-color: red;
}
@media screen and @singleQuery {
    div {
        background-color: blue;
    }
}

　　编译后的CSS

div{
    background-color: red;
}
@media screen and (max-width: 768px) {
    div {
        background-color: blue;
    }
}

　　

1.2.6 用一个变量值的变量

　　在定义变量值时使用其它的变量

Less代码：

@meng : 5201314px;    
@loveDay : meng;
div {
    width:@@loveDay;  //须要使用两个@，至关于@loveDay = meng, 第一个@和@loveDay的结合为@meng 即 5201314px
}

编译后的CSS

div {
  width: 5201314px;  
}

 

1.3  混合

　　在 Less 中，混合能够将一个定义好的 class A （一组已经定义好的样式）轻松的引入到另外一个 class B 中，从而简单实现 class B 继承 class A 中的全部属性。咱们还能够带参数地调用，就像使用凼数同样

1.3.1 继承类名

　　在 LESS 中，能够定义一些通用的属性集为一个 class，而后在另外一个 class中去调用这些属性。若是咱们如今须要在其余 class 中引入那些通用的属性集，那么咱们叧须要在任何 class 中调用就能够了。任何 CSS class, id 属性集均可以以一样的方式引入。例如：

.common-box {   //前面的点 . 表示CSS的选择器，也可使用 # 等选择器
    width: 100%;  
    height: 50%;   
}

.span {
    display: block;  
}

body {
    background-color: #EEEEE;
    .common-box;
    span{
          .span;
          width: 100px;
          height: 100px;
    }
}

　　编译后的CSS 

.common-box {
    width: 100%;  
    height: 50%;   
}

.span {
    display: block;  
}

body {
    background-color: #EEEEEE;
    width: 100%;
    height: 50%;
}

body span {
    display: block;
    width: 100px;
    height: 100px;
}

　　

1.3.2 带参数混合和默认值混合

　　在 LESS 中，还能够像函数同样定义一个带参数的属性集合，参数能够定义默认值，当不传参数时，使用默认值。而后在其余选择器中像函数同样调用它。示例以下：

.width(@width: 10px) {  //此处能够写成@width, 也能够写成@width: 10px(表示默认值是10px) ,当调用该属性集合时，不传参数则使用默认值
 	width: @width;
	background-color: #000000;
	color: #FFFFFf;
}

#app {
	width: 500px;
	background-color: #ffffff;
	border: 1px black solid;
	p {
		.width(50%);
		font-size: 25px;
	}
	span {
		.width(200px);
		font-size: 14px;
	}
}

　　编译后的CSS

#app {
	width: 500px;
	background-color: #ffffff;
	border: 1px black solid;
}
#app p {
	width: 50%;
	background-color: #000000;
	color: #FFFFFf;
	font-size: 25px;
}
#app span {
	width: 200px;
	background-color: #000000;
	color: #FFFFFf;
	font-size: 14px;
}

　　至关于将.width（@width）作为一个函数来调用，传入的参数就是当前选择器选择的元素的宽度。

 

1.3.3 隐藏属性继承

　　如上1.3.1中 .common-box 和 .span编译后会存在于编译后的CSS中，而1.3.2中 .width(@width)编译后不会存在于编译后的CSS中，若是想要定义一些公用的CSS属性集合，又不但愿编译后这些属性集合存在于编译后的CSS中，能够在定义是加上括号 () ，这样编译后的这些属性集合就不会存在于CSS中。例如：

.width() {
    width: 100px;
}

div {
    background-color: red;
    .width();
}

　　编译后的CSS

div {     //编译后 .width() 不会存在于CSS中
    background-color: red;
    width: 100px;
}

　　

1.3.4 多参数混合

　　多个参数可使用分号戒者逗号分隔，这里推荐使用分号分隔，由于逗号有两重含义：它既能够表示混合的参数，也能够表示一个参数中一组值的分隔符。例如

.mixin(@width) {
    width-1: @width;
}
.mixin(@width; @height:2em) {
    width-2: @width;
    height-2: @height;
}
.mixin(@width; @height; @margin: 2em) {
    width-3: @width;
    height-3: @height;
    margin: @margin @margin @margin @margin;
}
h1 {
    .mixin(red);
}
div {
    .mixin(#000,3px);
}
span {
    .mixin(#fff,3px,5px);
}

　　编译后的CSS

h1 {    //从上到下匹配，只要匹配到，就和执行，这里第二个 .mixin虽然有两个参数，可是第二个参数有默认值，因此也能匹配到。这点和java等高级语言不一样
    width-1: #ff0000;
    width-2: #ff0000;
    height-2: 2em;
}
div {  //同理
    width-2: #000000;
    height-2: 3px;
    width-3: #000000;
    height-3: 3px;
    margin: 2em 2em 2em 2em;
}
span {
    width-3: #ffffff;
    height-3: 3px;
    margin: 5px 5px 5px 5px;
}

　　

1.3.5 @arguments 变量

　　使用@arguments能够将全部的参数所有放到一个属性后面。例如：

.transition (@moveStyle :all;@delayTime : 4s;@moveType : ease-in; @moveTime :
2s){
    -webkit-transition: @arguments;
    -moz-transition: @arguments;
    -o-transition: @arguments;
    -ms-transition: @arguments;
    transition: @arguments;
}
div {
    .transition;
}
span {
    .transition (width);
}
h1 {
    .transition (height; 80s);
}
li {
    .transition (all; 80s; ease-out);
}
dd {
    .transition (color; 80s; ease-in-out; 30s);
}

　　编译后的CSS

div {
    -webkit-transition: all 4s ease-in 2s;
    -moz-transition: all 4s ease-in 2s;
    -o-transition: all 4s ease-in 2s;
    -ms-transition: all 4s ease-in 2s;
    transition: all 4s ease-in 2s;
}
span {
    -webkit-transition: width 4s ease-in 2s;
    -moz-transition: width 4s ease-in 2s;
    -o-transition: width 4s ease-in 2s;
    -ms-transition: width 4s ease-in 2s;
    transition: width 4s ease-in 2s;
}
h1 {
    -webkit-transition: height 80s ease-in 2s;
    -moz-transition: height 80s ease-in 2s;
    -o-transition: height 80s ease-in 2s;
    -ms-transition: height 80s ease-in 2s;
    transition: height 80s ease-in 2s;
}
li {
    -webkit-transition: all 80s ease-out 2s;
    -moz-transition: all 80s ease-out 2s;
    -o-transition: all 80s ease-out 2s;
    -ms-transition: all 80s ease-out 2s;
    transition: all 80s ease-out 2s;
}
dd {
    -webkit-transition: color 80s ease-in-out 30s;
    -moz-transition: color 80s ease-in-out 30s;
    -o-transition: color 80s ease-in-out 30s;
    -ms-transition: color 80s ease-in-out 30s;
    transition: color 80s ease-in-out 30s;
}

　　

1.3.6 ！important 关键字

　　调用定义好的属性集合时，在后面添加 ！important ，则在生产的CSS代码中，该属性集合中的属性都会加上 ！important。例如：

.my (@width : 20px; @height : 50px){
    width:@width;
    height : @height;
}
.meng2 {
    .my !important;
}
.long2 {
    .my(40px) !important;
}

　　编译后的CSS

.meng2 {
    width: 20px !important;
    height: 50px !important;
}
.long2 {
    width: 40px !important;
    height: 50px !important;
}

　　

1.3.7 高级参数用法

　　在属性集合中可使用 ... 表示多个参数。例如：

.mixin1 (...) { //接收0-N个参数
    padding:@arguments;
}
.mixin2 (@a: #FFFFFF; ...) { //接收0-N个参数
    padding:@arguments;
}
.mixin3 (@a; ...) { //接收1-N个参数
    padding:@arguments;
}

　　　　

1.3.8 模式匹配与 Guard  表达式

　　LESS 提供了经过参数值控制 mixin 行为的功能(至关于给定义的属性集合一个标识，当调用时标识一致，则调用)。至关于java中方法的重载，只不过这里须要定义一个标识来控制调用哪个 .mixin 。示例以下：

.mixin (dark; @color) {   //调用.mixin 若第一个参数是dark，则调用这个属性集合
    color: darken(@color; 10%);
}
.mixin (light; @color) {  //调用.mixin 若第一个参数是light，则调用这个属性集合
    color: lighten(@color, 10%);
}
.mixin (@a; @color) {   //调用.mixin 只要是两个参数，都会调用这个属性集合
    display: block;
}

@switch: light;
.long {
    .mixin(@switch; #888);
}
@switch2 : dark;
.meng {
    .mixin(@switch2; #666);
}

　　编译后的CSS代码

.long {
    color: #a2a2a2;
    display: block;    //由于调用是传了两个参数，全部必定会匹配到 .mixin(@a; @color)
}
.meng {
    color: #808080;
    display: block;
}

　　

1.3.9 条件混合

　　条件混合的语法： .属性集合名（参数集合） when (条件表达式) {属性集合}

1. 经过 LESS  自带的函数判断

.mixin (@a) when (lightness(@a) >= 50%) {  //lightness(@a >= 50%)是混合条件，即判断调用.mixin时传入的@a通过计算后是否大于等于50%，知足条件则混合该属性
    background-color: black; 
}
.mixin (@a) when (lightness(@a) < 50%) {
    background-color: white;2
}
.mixin (@a) {
    color: @a;
}
.meng {
    .mixin(#ddd);
}
.long {
    .mixin(#555);
}

　　编译后的CSS

.meng {
    background-color: black;
    color: #dddddd;
}
.long {
    background-color: white;
    color: #555555;
}

　　

2. 运算符判断

　　Guards 支持的运算符包括：> >= = =<  < .说明一下，true 关键字是惟一被判断为真的值，也就是这两个混合是相等的

 

3. 多个条件

　　语法： .属性集合名（参数集合） when (条件表达式),(条件表达式) {属性集合}

　　多个 Guards 能够经过逗号表示分隔，若是其中任意一个结果为 true，则匹配成功。这个至关亍脚本中的或的意思

 

4. Guards 中的 and 和 not 

　　and语法（至关于js中的与）： .属性集合名（参数集合） when (条件表达式) and (条件表达式) {属性集合}  //表示两个条件均为true时才混合

　　not语法（至关于js中的非）： .属性集合名（参数集合） when not (条件表达式) {属性集合}  //当条件为false时混合

 

1.4 Less的嵌套语法

　　Less的嵌套语法是指在一个选择器中能够嵌套其余选择器。例如：

div {
    color: red;
    .container {   //这里是嵌套的 class选择器
        background-color: #CCCCCC;
    }
    ul {
        width: 200px;
        li {
            height: 100px;
        }
    }
}

　　编译后的CSS

div {
  color: red;  
}
div .container{
    background-color: #CCCCCC;
}
div ul {
    width: 200px;
}
div ul li {
    height: 100px;  
}

　　

1.5  & 的用法

　　嵌套语法编译后是父子关系，而 & 连字符编译后是伪类选择器.例如：

div {
    a {
        color: red;
        &:hover {
            color: blue;
        }
        &:focus {
            background-color: #DDDDDD;
        }
    }  
}

　　编译后的CSS

div a {
    color: red;
}
div a:hover {
    color: blue;
}
div a:focus {
    background-color: #DDDDDD;
}

　　

1.6 LESS  详解之命名空间

　　LESS 中也有命名空间的概念。所谓的命名空间，是为了更好组织 CSS 戒者单纯是为了更好的封装，将一些变量戒者混合模块打包起来，一些属性集乊后能够重复使用。例如：

@height:100px;
.meng {
    .meng_button () {
        display: block;
        border: 1px solid black;
        background-color: grey;
        &:hover { background-color: white }
    }
    .meng_tab () {
        height:@height
        width:100px;
    }
    .meng_citation () {
        @height:200px;
        height:@height
    }
}
div {
    .meng > .meng_tab;
}
h1 {
    .meng > .meng_citation;
}

　　编译后的CSS

div {
    height:100px;
    width: 100px;
}
h1 {
    height: 200px;
}
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程