less入门

最新推荐文章于 2023-02-15 01:09:33 发布

一捆铁树枝

最新推荐文章于 2023-02-15 01:09:33 发布

阅读量690

点赞数

分类专栏： CSS 文章标签： less入门

本文链接：https://blog.csdn.net/qq_41725450/article/details/88527459

版权

CSS 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

Less 的出现是为了解决 CSS 中过于呆板的写法。Less 官方文档中对 Less 的使用有详细的介绍，总结一下为：Less = 变量 + 混合 + 函数。

下面我就用实际案例来具体介绍less

首先，我介绍一下在webstorm中配置less文件自动生成css；

一、配置webstorm

1.使用 Npm 全局安装 Less

$ npm install less -g

2.配置webstorm

打开webstorm, File——Settings——Tools——File Watchers——点击加号——选择less

默认设置即可，点击ok ,就可以了

创建less文件，直接创建文件添加后缀名为.less的文件即可。

或者创建css文件，选择less也就可以了。

创建成功后，同时在less中生成css同名文件。配置即完成。

二、使用less

1.使用less写样式

1.1创建一个空文件夹，这里命名为：less

在根目录下创建 index.html 文件，复制内容如下：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>初识 Less</title>
    <link href="./main.css" rel="stylesheet">
</head>
<body>
<div class="container">1</div>
<div class="container2">2</div>
<div class="container3">3</div>
<div id="menu">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias animi atque debitis eius error est, ex, laboriosam libero modi natus nihil nisi officiis pariatur provident quis quisquam tempore? Accusamus, sed?</p>
    <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque quasi tempora veniam? Consectetur, dignissimos impedit itaque nisi provident tempore totam vero. Alias consequatur consequuntur doloribus dolorum nam nulla sint unde.</span>
    <a href="#">这是连接</a>
</div>
<div class="section">这是引入测试</div>
</body>
</html>

1.2 在根目录下创建 main.less 文件，复制内容如下：

// main.less

@width: 100%;
@height: 100px;
@color: red;


.container{
  width: @width;
  height: @height;
  background-color: @color;
  margin-bottom: 5px;
}

.container2{
  width: @width;
  height: @height;
  background-color: @color;
  margin-bottom: 5px;
}

.container3{
  width: @width;
  height: @height;
  background-color: @color;
  margin-bottom: 5px;
}

webstorm会自动将less文件转换为对应的CSS，main.less中的main.css内容如下：

/*main.css*/
.container {
  width: 100%;
  height: 100px;
  background-color: red;
  margin-bottom: 5px;
}
.container2 {
  width: 100%;
  height: 100px;
  background-color: red;
  margin-bottom: 5px;
}
.container3 {
  width: 100%;
  height: 100px;
  background-color: red;
  margin-bottom: 5px;
}

打开浏览器查看，效果已经实现

1.3感受less的便利

现在有一个新的需求，需要将三个 div 的背景颜色改成蓝色（blue），如果是之前 css 的写法需要依次找到 container、container2、container3，对应修改里面的 background-color 属性，但是使用 less 我们仅仅修改前面定义过的变量值即可。

// main.less

@width: 100%;
@height: 100px;
@color: blue;


.container{
  width: @width;
  height: @height;
  background-color: @color;
  margin-bottom: 5px;
}

.container2{
  width: @width;
  height: @height;
  background-color: @color;
  margin-bottom: 5px;
}

.container3{
  width: @width;
  height: @height;
  background-color: @color;
  margin-bottom: 5px;
}

刷新页面，背景颜色已经更改

2.变量

2.1在前面介绍的案例中已经使用了“变量”的概念，是不是感觉和 js 很像，事实上 less 就是用 js 的写法来写 css。

官网在介绍变量的时候会给出很多应用场景，总结一下就是使用 @ 符号定义变量，使用 @ 符号获取变量，仅仅将 @变量名 看成是一个字符串。

从上面例子中可以看到，变量不仅仅可以作为样式属性值：background-color: @color;，还可以作为类名：.@classname 表示的就是 .main。这也就是为什么说仅仅将 @变量名看成是一个字符串。

`3.混合`

在项目开发中，我们一定遇到过一下场景

#menu a {
    color: #111;
    border-top: dotted 1px black;
    border-bottom: solid 2px black;
}

#menu span {
    height: 16px;
    border-top: dotted 1px black;
    border-bottom: solid 2px black;
}

#menu p {
    color: red;
    border-top: dotted 1px black;
    border-bottom: solid 2px black;
}

可以看到上面三个样式中都有 border-top 和 border-bottom 两个属性，并且内容完全相同；在传统 CSS 写法中只能这样一遍有一遍的去书写重复的内容，在 Less 中通过将公共属性抽取出来作为一个公共类的方式规避这一点。

// main.less

.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}


#menu a {
  color: #111;
  .bordered;
}

#menu span {
  height: 16px;
  .bordered;
}

#menu p {
  color: red;
  .bordered();
}

/*main.css*/
#menu a {
  color: #111;
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}
#menu span {
  height: 16px;
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}
#menu p {
  color: red;
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}

可以看到，main.css内的内容和示例中的一摸一样；

总结：

混合也是减少代码书写量的一个方法；
混合的类名在定义的时候加上小括弧 ()，那么在转译成 css 文件时就不会出现；
混合的类名在被调用的时候加上小括弧 ()和不加上小括弧 ()是一样的效果，看个人习惯，如：第三行和第八行转译成 css 是一样的。

4.函数

新建func.less,内容如下

// func.less
.border-radius(@radius) {
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  border-radius: @radius;
}

#header {
  .border-radius(4px);
}
.button {
  .border-radius(6px);
}

编译之后的func.css的内容如下

/*func.css*/
#header {
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}
.button {
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
}
/*# sourceMappingURL=func.css.map */

可以看到，这里就用到了函数的概念，在 #header 和 .button 中分别传入不同的参数，结果也就生成不同的代码。

关于 less 中函数的写法还有以下几种：

// 函数的参数设置默认值：
.border-radius(@radius: 5px) {
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  border-radius: @radius;
}

// 函数有多个参数时用分号隔开
.mixin(@color; @padding:2) {
  color-2: @color;
  padding-2: @padding;
}

// 函数如果没有参数，在转译成 css 时就不会被打印出来，详见上面混合中的示例
.wrap() {
  text-wrap: wrap;
}

// 函数参数如果有默认，调用时就是通过变量名称，而不是位置
.mixin(@color: black; @margin: 10px; @padding: 20px) {
  color: @color;
  margin: @margin;
  padding: @padding;
}
.class1 {
  .mixin(@margin: 20px; @color: #33acfe);
}

// 函数参数有个内置变量 @arguments，相当于 js 中的 arguments
.box-shadow(@x: 0; @y: 0; @blur: 1px; @color: #000) {
  -webkit-box-shadow: @arguments;
     -moz-box-shadow: @arguments;
          box-shadow: @arguments;
}

// 函数名允许相同，但参数不同，类似于 java 中多态的概念
.mixin(@color: black) {      
.mixin(@color: black; @margin: 10px) {

Less 也为我们定义了很多好用的内置函数。关于内置函数，如果掌握，可以在开发过程中节约很多时间，由于内置函数数量很多，这里就不一一介绍，大家可以去官网查看：less内置函数官方文档

5.父元素和子元素的写法

通常我们在CSS中的父元素和子元素的写法如下：

#menu a {
  color: #111;
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}
#menu span {
  height: 16px;
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}
#menu p {
  color: red;
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}

在 Less 写法如下，父子嵌套关系一目了然。

#menu {
  a {
    color: #111;
    .bordered;
  }

  span {
    height: 16px;
    .bordered;
  }

  p {
    color: red;
    .bordered();
  }

}

当然，父子元素还要一种是伪类的写法，在 css 中写法如下：

#menu :after {
  content: " ";
  display: block;
  font-size: 0;
  height: 0;
  clear: both;
  visibility: hidden;
}

在 less 中写法如下，可以看到引入了新的符号 &，以 & 来代替主类 #menu。

#main {
  &:after {
    content: " ";
    display: block;
    font-size: 0;
    height: 0;
    clear: both;
    visibility: hidden;
  }
}

6.import

在传统 css 文件中，每个文件都是独立的。在 less 中可以像 js 的模块那样在一个 less 文件中引入另一个 less 文件。

/*one.less*/
.section{
  width: 300px;
  height: 400px;
}

在main.less中引入

@import "one";

// main.less
@import "one";
@width: 100%;
@height: 100px;
@color: blue;
.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}


.container {
  width: @width;
  height: @height;
  background-color: @color;
  margin-bottom: 5px;
}

.container2 {
  width: @width;
  height: @height;
  background-color: @color;
  margin-bottom: 5px;
}

.container3 {
  width: @width;
  height: @height;
  background-color: @color;
  margin-bottom: 5px;
}

编译后我们发现在main.css中已经有了one.less中的样式

/*main.css*/
.section {
  width: 300px;
  height: 400px;
}
.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}
.container {
  width: 100%;
  height: 100px;
  background-color: blue;
  margin-bottom: 5px;
}
.container2 {
  width: 100%;
  height: 100px;
  background-color: blue;
  margin-bottom: 5px;
}
.container3 {
  width: 100%;
  height: 100px;
  background-color: blue;
  margin-bottom: 5px;
}

那么如果 two.less 中也有一个类名叫 container 的，使用 @import 之后会变成什么样子呢？

我们在main.less的末尾添加如下样式

.section{
  width: 100px;
  height: 200px;
}

编译后我们发现main.css中，两个样式都出现了，

.section {
  width: 300px;
  height: 400px;
}
.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}
.container {
  width: 100%;
  height: 100px;
  background-color: blue;
  margin-bottom: 5px;
}
.container2 {
  width: 100%;
  height: 100px;
  background-color: blue;
  margin-bottom: 5px;
}
.container3 {
  width: 100%;
  height: 100px;
  background-color: blue;
  margin-bottom: 5px;
}
#menu:after {
  content: " ";
  display: block;
  font-size: 0;
  height: 0;
  clear: both;
  visibility: hidden;
}
#menu a {
  color: #111;
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}
#menu span {
  height: 16px;
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}
#menu p {
  color: red;
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}
.section {
  width: 100px;
  height: 200px;
}

只是在显示时，后面的样式会将前面的样式覆盖掉

那如果我们需要one.less中的样式生效应该怎么做呢；

只需要调整引入位置在main.less中的.section样式之后即可

.section{
  width: 100px;
  height: 200px;
}
@import "one";

这时候，编译后的样式位置也发生了变化

页面显示样式也发生了变化

一捆铁树枝

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
less入门

Less 的出现是为了解决 CSS 中过于呆板的写法。Less 官方文档中对 Less 的使用有详细的介绍，总结一下为：Less = 变量 + 混合 + 函数。下面我就用实际案例来具体介绍less首先，我介绍一下在webstorm中配置less文件自动生成css；一、配置webstorm1.使用 Npm 全局安装 Less$ npm install less -g2.配...
复制链接

扫一扫

专栏目录