2.Less 语言特性

2.1概览

作为 CSS 的一种扩展,LESS CSS 不仅向下兼容 CSS 的语法,而且连新增的特性也是使用 CSS 的语法。这样的设计使得学习 LESS 很轻松,而且你可以在任何时候回退到 CSS。

2.2变量

变量基本上是每个语言脚本上都会涉及的一个小小知识点,是学好语言脚本的必经之路。LESS 中也可以设置变量,然后通过变量可以改变整个网站的设计风格。良好的掌握 LESS 中变量的用法,是 LESS 的基础。

1.变量语法

使用方法就是在“@”后添加变量名称然后变量值用冒号“:”链接。

2.变量的作用域

如果对同一个变量定义两次的话,在当前作用域中最后一次定义的将被使用。这与 CSS 的机制类似,最后一次定义的值会成为这个属性的值。若定义在嵌套之中,
那么这个变量就只能服务于这个嵌套之内的属性了。变量也是没有顺序可言的,只要页面里有,都会按顺序覆盖,按顺序加载。

//变量作用域
@width:300px; //全局作用域
@color:red;
@height:100px;
.box{
    @width:500px;  //局部作用域
    @height:300px;
    width: @width;
    height: @height;
    color: @color;
    background: pink;
    ul{
        @color:green;
        li{
            color: @color;
        }
    }
}
.header{
    width: @width;
    height: @height;
    background: red;
}

html

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet/less" href="less/02.less">
    <!-- 必须引入less.min.js解析器 -->
    <script src="js/less.min.js"></script>
</head>

<body>
    <div class="box">
        <ul>
            <li>好谷</li>
        </ul>
    </div>
    <div class="header"></div>
    <div class="bg">

    </div>
</body>

3.字符串插值

 变量可以用像 @{name} 这样的结构,以类似 ruby 和 php 的方式嵌入到字符串中。

// 3.字符串插值
@bgurl:"https://x.dscmall.cn";
.bg{
    width: 300px;
    height: 300px;
    background: url("@{bgurl}/storage/images/201703/thumb_img/0_thumb_G_1489098265067.jpg") no-repeat red;
}

4.选择器插值

如果需要在选择器中使用 LESS 变量,只需通过使用和字符串插件一样的@{selector} 即可。

//选择器插值
@bbbb:box;  //box选择器

.@{bbbb}{
    width: 200px;
    height: 200px;
    background: red;
}

5.media query 作为变量~

如果你希望在 media query 中使用 LESS 变量,你可以直接使用普通的变量方式。因为“~”后面的值是不被编译的,所以可以用作 media query 的参数。

// media query 媒体查询

.content{
    width: 300px;
    height: 300px;
    background: red;
}

@media123:~'(max-width:992px)';
@media screen and @media123{
    .content{
        background: green;
    }
}

 以@media或@media screen and开头的语句就是媒体查询语句。@media后面是一个或者多个表达式,如果表达式为真,则应用样式。

max-width 是目标显示区域的宽度,例如,浏览器宽度。
max-device-width 是设备整个显示区域的宽度,例如,真实的设备屏幕宽度。
device-aspect-ratio 可以适配特定屏幕长宽比的设备,例如,设备屏幕长宽比为4:3、16:9或16:10。

6.用一个变量值的变量

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

@meng:520px;
@zuomeng:@meng;
.love{
    width: @zuomeng;
    height: 520px;
    background: pink;
}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值