zoukankan      html  css  js  c++  java
  • Less的基本使用

    为什么要使用css预处理器Less

    Less是一门CSS预处理语言 ,对CSS语言进行了扩展,增加了变量、函数、Mixin等特性,使得CSS通过Less编写更容易维护和扩展。

    通过@定义变量

    css中需要统一维护,或出现次数较多的可以提取成变量的形式,便于维护。变量可以用在常规css规则中,也可以用在选择器名称、属性名称、URL和@import语句中

    // 在常规css规则中使用变量
    @link-color: #f00; // 定义变量
    a, link {
        color: @link-color;
    }
    // 编译为
    a, link{ color: #f00; }
    
    // 使用@{}插值的方式使用变量,作为class名
    @cusMenu: menu;
    .@{cusMenu} {
        line-height: 40px;
    }
    // 编译为
    .menu{ line-height: 40px; }
    
    // URL中使用
    @images: "../img";
    body{
        background: url("@{images}/logo.png");
    }
    
    // 在@import语句中使用
    @themes: "../css/themes";
    @import "@{themes}/pc.less";
    
    // 作为属性使用
    @property: color;
    .widget {
        @{property}: #eee;
    }
    
    // 变量重命名
    @primary: green;
    .section {
        @color: primary; // 重新命名为color
        color: @@color;  // 使用时需要多加一个@
    }
    
    // 也存在变量提升, 可以先使用后声明,最后一个生效
    .section {
         @var;
    }
    @var: 100%;
    
    // $prop语法,可以将属性作为变量使用
    .widget{
        color: #efefef;
        background-color: $color;
    }
    // 编译为
    .widget {
        color: #efefef;
        background-color: #efefef;
    }
    // 父子作用域中
    .block {
        color: red;
        .inner{
            background-color: $color;
        }
        color: blue;
    }
    // 编译为
    .block {
        color: red;
        color: blue;
    }
    .block .inner{
        background-color: blue;
    }
    

    Mixins (混合)

    Minxins 是一种将一组属性从一个规则集包含到另一个规则集的方法。Mixin中调用的括号是,不推荐使用。

    // 定义Minxin方法,可以是混合类选择器和ID选择器
    .a, #b{
        color: red;
    }
    .mixin-class{
        .a; // 混入
    }
    .mixin-id{
        #b(); // 括号是可选的
    }
    // 编译为
    .a, #b{
        color: red;
    }
    .mixin-class {
        color: red;
    }
    .mixin-id {
        color: red;
    }
    
    // 声明不输出css的Mixin方法
    .my-mixin{
        color: black;
    }
    .my-other-mixin() { // 将不会输出css
        background: white; 
    }
    .class {
        .my-mixin();
        .my-other-mixin();
    }
    // 编译为
    .my-mixin {
        color: black;
    }
    .class {
        color: block;
        background: white;
    }
    
    // Mixin 中的选择器
    .my-hover-mixin() {
        &:hover {
            border: 1px solid red;
        }
    }
    button {
        .my-hover-mixin();
    }
    // 编译为
    button:hover {
        border: 1px solid red;
    }
    
    // 命名控件(可以减少与其他库mixin或用户mixin的冲突)
    #my-library {
        .my-mixin() {
            color: black;
        }
    }
    .class {
    	// 可以使用以下三种方式使用命名控件mixin方法
        #my-library.my-mixin();
        #my-library .my-mixin();
        #my-library > .my-mixin();
    }
    
    // 受保护的命名控件(保护条件返回true时才使用定义的mixin
    #namespae when (@mode = huge) {
        .mixin() {}
    }
    #namespace {
        .mixin() when (@mode = huge) {}
    }
    
    // 在mixin方法后使用!important关键字
    // !important在mixin调用之后使用关键字将其继承的所有属性标记为!important
    .foo() {
        background: red;
        color: blue;
    }
    .important {
        .foo()!important;
    }
    // 编译为
    .important {
        background: red!important;
        color: blue!important;
    }
    
    // Mixin可以设置参数,并应用到属性中
    .border-radius(@radius: 5px){
        -webkit-border-radius: @radius;
           -moz-border-radius: @radius;
                border-radius: @radius;
    }
    .button{
     	// 如果不传参数,则默认为5px
        .border-radius(6px);
    }
    

    嵌套中的父选择器 &

    注意:& 代表所有父选择器,不仅仅是最近的祖先

    a {
        &:hover {
            color: green;
        }
    }
    // 编译为
    a:hover {
        color: green;
    }
    
    // 利用&产生重复的类名
    .button {
        &-ok{}
        &-cancel{}
    }
    // 编译为
    .button-ok{}
    .button-cancel{}
    
    // &可能会在选择器中出现多次,这样可以重复引用父选择器而不重复其名称
    .link {
        & + & {}
        & & {}
        && {}
        &, &ish {}
    }
    // 编译为
    .link + .link{}
    .link .link{}
    .link.link{}
    .link, .linkish{}
    // 在深层次中出现多个&时
    .grand {
        .parent{
            & > & {}
            & & {}
            && {}
            &, &ish {}
        }
    }
    // 编译为
    .grand .parent > .grand .parent {}
    .grand .parent .grand .parent {}
    .grand .parent.grand .parent {}
    .grand .parent, .grand .parentish {}
    

    映射(Maps)

    通过命名空间与查找[]语法相结合,将规则集/混合转换为映射

    #colors() {
        primary: blue;
        secondary: green;
    }
    .button {
        color: #colors[primary];
        border: 1px solid #colors[secondary]
    }
    // 多层混合
    #library() {
        .colors() {
            primary: green;
            secondary: blue;
        }
    }
    .button {
        color: #library.colors[primary];
        border-color: #library.colors[secondary];
    }
    

    关于注释

    和JS中的注释保持一致

    /* 这是一个块注释 */
    @var: red;
    // 单行注释
    @var:white;
    

    导入@import

    @import "library"; // 省略.less扩展名
    @import "reset.css";
    
  • 相关阅读:
    Asp.net弹出浏览器客户端确认对话框代码 Carlwave
    VS 2005 与SQL Server 2005整合优势在哪里?(from csdn.net) Carlwave
    如何让搜索引擎收录我的站点 Carlwave
    超强扩展性的DNNDotNetNuke模块功能分类列表(from 中国DNN) Carlwave
    DotNetNuke命名空间概述 Carlwave
    Most Popular Questions and Answers on ASP.NET Whidbey(from asp.net forums,write by ASP.NET Team) Carlwave
    火箭官方宣告麦蒂缺阵五周 季后赛前景蒙上阴影 Carlwave
    asp.net有效使用缓存(转) Carlwave
    《Business Rules Engine Overview》《业务规则引擎概述》write by Mark Kamoski Carlwave
    中国详细省市县自治区名称列表(含access数据库和sql2000备份数据库) Carlwave
  • 原文地址:https://www.cnblogs.com/yuxi2018/p/11486269.html
Copyright © 2011-2022 走看看