sublime之less

最新推荐文章于 2024-03-18 09:50:00 发布

li419357679

最新推荐文章于 2024-03-18 09:50:00 发布

阅读量278

点赞数

分类专栏： css 文章标签： less

本文链接：https://blog.csdn.net/li419357679/article/details/76998421

版权

css 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

sublime安装less插件
1.首先电脑安装考拉(less编译工具)
2.打开选择指定目录直接读取文件工具开启状态
3.把less插件放到sublime 目录\Data\Packages里
4.重启sublime 插件生效
5.创建目录，在目录里创建.less文件直接用less语法写css ctrl+s保存直接生成css文件

less语法：
变量：@red:rgb(201,21,35) 变量要用引号

//注释 跟js一样
@jdRed:rgb(201,21,35);

body{
    background-color:@jdRed;
}

混合：
类似于函数的用法
括号中参数名: 参数的默认值
如果使用该class 进行混合是如果不传递参数,会使用默认值

.red{
    background-color: red;
    border:1px solid red;
    color:red;
}

.oneColor(@color:#0094ff){
    background-color: @color;
    border:1px solid @color;
    color:@color;
}

body{
    .red();
}

ul{
    .oneColor(yellow);
}

div{
    .oneColor();
}

嵌套：直接写单纯的层次关系

.main{
    width: 100%;
    .main_left{
        width: 90px;
        ul{
            width: 100%;
            li{
                width: 100%;
                text-align: center;
                height: 50px;
                line-height: 50px;
                border-bottom: 1px solid gray;
                border-right: 1px solid gray;
                a{
                    color:black;
                }
            }
        }
    }

    .main_right{
        overflow: hidden;
        /* 顶部 左右 底部为0 */
        padding: 10px 10px 0;

        .right_banner{
            display: block;
            width: 100%;
            img{
                display: block;
                width: 100%;    
            }
        }
        h3{
            margin-top: 10px;
            font-size: 12px;    
        }   
        ul{
            width: 100%;
            padding-top: 10px;
        }
    }
}

演示伪元素交集选择器 :hover等需要紧挨着元素的样式
如果只是想要是该class里面的样式不传递任何的参数时可以不写括号的

如果直接往下写的话生成的css 是后代
可以再符号之前添加& 符号就会去掉默认的空格变为紧邻着的

.clearfix{
    content: '';
    display:block;
    line-height:0;
    height:0;
    visibility: hidden;
    clear:both;
}

ul{
    .clearfix;
    li{
        width: 100%;
        height: 60px;
        &.current{
            color:red;
        }
        &::before{
            .clearfix;
        }
    }

}