CSS预处理器篇学习-01 LESS

枫叶在夏天

已于 2023-02-07 20:42:29 修改

阅读量718

点赞数

文章标签： css css3

于 2020-05-08 10:48:44 首次发布

本文链接：https://blog.csdn.net/weixin_44552302/article/details/105976062

版权

CSS是一门非程序式的语言, 没有变量/函数/作用域等概念，需要书写大量看似没有逻辑的代码, 不方便维护及扩展, 也不利于复用。所以，CSS预处理器就是升级版CSSCSS 预处理器就是用某一种语言用来为 CSS 增加一些动态语言的的特性(变量、函数、继承等)，CSS预处理器可以让你的 CSS 更见简洁，适应性更强，代码更直观等诸多好处1、体验LESSLESS就是一种CSS预处理器什么是...

摘要由CSDN通过智能技术生成

CSS是一门非程序式的语言, 没有变量/函数/作用域等概念，需要书写大量看似没有逻辑的代码, 不方便维护及扩展, 也不利于复用。
所以，CSS预处理器就是升级版CSS
CSS 预处理器就是用某一种语言用来为 CSS 增加一些动态语言的的特性(变量、函数、继承等)，
CSS预处理器可以让你的 CSS 更见简洁，适应性更强，代码更直观等诸多好处

1、体验LESS

LESS就是一种CSS预处理器

什么是less(Leaner Style Sheets)?
Less 是一门 CSS 预处理语言，为CSS赋予了动态语言的特征。
它扩展了 CSS 语言，增加了变量、Mixin(混合)、嵌套、函数和运算等特性，使 CSS 更易维护和扩展
一句话：用类似JS的语法去写CSS、

CSS：

<style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .a{
            width: 300px;
            height: 300px;
            background: red;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }
        .a>.b{
            width: 200px;
            height: 200px;
            background: blue;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }
    </style>

<body>
<div class="a">
    <div class="b"></div>
</div>
</body>

这样css重复且看不出父子层级关系

LESS：

<style type="text/less">
        *{
            padding: 0;
            margin: 0;
        }
        .center{                                               居中弄成一个方法
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
        }
        .f{                                                 父子层级关系看到很清楚
            width: 200px;
            height: 200px;
            background-color: teal;
            .center;                                                  直接调用
            .s{
                width: 100px;
                height: 100px;
                background-color: tomato;
                .center;                                              直接调用
            }
        }
    </style>
    <script src="js/less.js"></script>
</head>
<body>
<div class="f">
    <div class="s"></div>
</div>

注意点：

1、css:< style type=“text/css”>
less :< style type=“text/less”>且引入< script src=“js/less.js”>< /script>文件
在< style type=“text/less”>里面只有CSS代码是无效的，要有less，或less和css
2、如果css也是引入的话：

<link rel="stylesheet/less" href="css/index.less">
    <script src="js/less.js"></script>

首先rel="stylesheet/less"是less
一定要先引入less.css再引入less.js
如果less代码是写到单独的文件中（即引入）, 一定要在服务端环境运行才能生效（即在webstorm可以打开，在文件夹中点击这个html文件是无效的）
3、上面这样用，是编写less文件–>引入less文件–>引入less.js–>运行，会有一点性能问题；

提前预编译
编写less文件–>利用工具转换为css文件–&

最低0.47元/天解锁文章

枫叶在夏天

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
CSS预处理器篇学习-01 LESS

CSS是一门非程序式的语言, 没有变量/函数/作用域等概念，需要书写大量看似没有逻辑的代码, 不方便维护及扩展, 也不利于复用。所以，CSS预处理器就是升级版CSSCSS 预处理器就是用某一种语言用来为 CSS 增加一些动态语言的的特性(变量、函数、继承等)，CSS预处理器可以让你的 CSS 更见简洁，适应性更强，代码更直观等诸多好处1、体验LESSLESS就是一种CSS预处理器什么是...
复制链接

扫一扫