LESS之语法

最新推荐文章于 2024-10-07 17:08:41 发布

Yvette Azad

最新推荐文章于 2024-10-07 17:08:41 发布

阅读量171

点赞数

分类专栏： css扩展语法 WEB 文章标签： less css html

本文链接：https://blog.csdn.net/sinat_32605321/article/details/120127949

版权

LESS 变量 Mixins CSS预处理器样式复用

关键词由CSDN通过智能技术生成

WEB 同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

css扩展语法

4 篇文章 0 订阅

订阅专栏

LESS

less是一门向后兼容的css语法扩展语言

变量

1 声明

以‘@’来声明

styles.less

// css样式
@WIDTH: 100px;
@HEIGHT: @WIDTH + 10px;
@FontSize: 12px;
@LetterSpacing: @FontSize * 1.38;
// 选择器
@circelSelector: circel;
.@{circelSelector} {
    border-radius:  50%;
}
@pointerSelector: pointer;
.@{pointerSelector} {
    cursor: pointer;
}
// 路径
@images: '../../assets/images/';

dome.less

// 文件名
@file: "../../";
@import '@{file}styles.less';
// 颜色定义
@font-color: pink;
@dark-font-color: darken(@font-color, 15%);
p {
    height: @HEIGHT;
    font-size: @FontSize * 3;
    color: @font-color;
    transition: color .50s ease-in;
    letter-spacing: @LetterSpacing * 3;
}
p:hover{
    color: @dark-font-color;
    transition: color .50s ease-in;
}
.header{
    @width: 500px;
    width: @width;
    height: @width;
    background: url("@{images}h_f.jpg") no-repeat left top/cover;
}

Mixins

.bgImg() {
  background-position: left top;
  background-repeat: no-repeat;
  background-size: cover;
}
.border-radius(@radius: 5px) {
  -webkit-border-radius: @radius;
     -moz-border-radius: @radius;
          border-radius: @radius;
}
.square(@width, @height) {
    width: @width;
    height:  @height;
}
.box-shadow(@x: 0; @y: 0; @blur: 1px; @color: #000) {
  -webkit-box-shadow: @arguments;
     -moz-box-shadow: @arguments;
          box-shadow: @arguments;
}