less编写css代码

testHs 发布于2019-08-28 18:27 / 960人阅读

摘要：编写样式表我想大家应该都已经熟悉了。我在这里说的是使用的插件进行样式的编写，使用起来比原本的直接编写样式，更加的简单与方便，代码也变得更加的整齐。上直接使用编写代码准备电脑上的已经安装了插件。使用简单直接新建一个的文件，在其中编写的代码。

css编写样式表我想大家应该都已经熟悉了。我在这里说的是使用sublime的插件进行less样式的编写，使用起来比原本的直接编写css样式，更加的简单与方便，css代码也变得更加的整齐。

sublime上直接使用less编写css代码 准备

电脑上的sublime已经安装了Less插件。(npm install less -gd)

电脑上安装了nodejs,并全局安装lessc插件。

使用（简单）

直接新建一个aa.less的文件，在其中编写less的代码。

ctrl+s保存下，在目录中出现aa.css文件可以直接在页面中使用。

less的简单介绍 什么是less

LESSCSS是一种动态样式语言，属于css预处理语言的一种，它使用类似css的语法，为css的赋予了动态语言的特性，如变量，继承，运算，函数等，更加方便css的编写和维护。

变量

变量允许我们多带带定义一系列通用的样式，然后在需要的时候去调用。

@color:#4d926F;
#header{
   color:@color;
}
h2{
   color:@color
}
//编译后--
#header{
   color:#4d926F;
}
h2{
   color:#4d926F;
}

混合

可以将一个定义好的classA 轻松的引入到另外一个classB中。

    .rounded-corners (@radius: 5px) {
        -webkit-border-radius: @radius;
        -moz-border-radius: @radius;
        -ms-border-radius: @radius;
        -o-border-radius: @radius;
        border-radius: @radius;
    }   
    #header {
        .rounded-corners;
    }
    #footer {
        .rounded-corners(10px);
    }
    // 编译后 --
     #header {
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        -ms-border-radius: 5px;
        -o-border-radius: 5px;
        border-radius: 5px;
    }
    #footer {
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        -ms-border-radius: 10px;
        -o-border-radius: 10px;
        border-radius: 10px;
    }

嵌套（最常使用）

我们可以在一个选择器中嵌套一个选择器来实现继承，这样很大程度减少了代码量，并且代码看起来更加的清晰。

   #header{
      h1{
        font-size:26px;
        font-weight:bold;
      }
      p{
        font-size:12px;
        a{
          text-decoration: none;
          &:hover{
            border-width: 1px;
          } 
        }
      }
   }
   // 编译后 --
   #header h1 {
    font-size: 26px;
    font-weight: bold;
   }
   #header p {
    font-size: 12px;
   }
   #header p a {
    text-decoration: none;
   }
   #header p a:hover {
    border-width: 1px;
   }

函数和运算

运算提供了加，减，乘，除操作；我们可以做属性值和颜色的运算，这样就可以实现属性值直接的复杂关系。

   @the-border: 1px;
   @base-color: #111;
   @red:        #842210;
    
   #header {
        color: (@base-color * 3);
        border-left: @the-border;
        border-right: (@the-border * 2);
   }
   #footer {
        color: (@base-color + #003300);
        border-color: desaturate(@red, 10%);
   }
   // 编译后--
   #header {
        color: #333;
        border-left: 1px;
        border-right: 2px;
   }
   #footer {
        color: #114411;
        border-color: #7d2717;
   }

私有云混合云 css编写编写代码代码编写网站代码编写

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/111243.html

#Less# less相关知识点总结

摘要：是一门预处理语言，它扩展了语言，增加了变量函数等特性，使更易维护和扩展。所以在生产环境中，我们需要事前把文件编译为正常的后，在相应文件中引入，以后用户访问的都是编译好的，为不是拿现编译的。代码编译为的结果 Less和CSS的区别 HTML和CSS不属于编程语言而是属于标记语言,很难像JS一样定义变量、编写方法、实现模块化开发等。LESS是一门CSS预处理语言，它扩展了CSS语言，增加了...

meteor199 2019-08-30 15:43 评论0 收藏0
less学习笔记

摘要：方便了的编写和维护。本文记录了开发中最常用的几种语法。这里的单位可以省略，但是两者必须有一个带单位嵌套嵌套是中非常有用高效的语法。学习学习学习在中如果我们需要对这一结构的样式进行渲染，就会使用等选择器。一、什么是less less是一种动态样式语言，属于css预处理语言的一种，它使用类似css的语法，为css赋予了动态语言的特性，如变量、运算、函数等。方便了css的编写和维护。 le...

MkkHou 2019-08-02 15:58 评论0 收藏0
less学习笔记

摘要：方便了的编写和维护。本文记录了开发中最常用的几种语法。这里的单位可以省略，但是两者必须有一个带单位嵌套嵌套是中非常有用高效的语法。学习学习学习在中如果我们需要对这一结构的样式进行渲染，就会使用等选择器。一、什么是less less是一种动态样式语言，属于css预处理语言的一种，它使用类似css的语法，为css赋予了动态语言的特性，如变量、运算、函数等。方便了css的编写和维护。 le...

codercao 2019-08-29 13:53 评论0 收藏0
莫闲前端之路学习markdown使用，html和css的编写顺序以及class命名规范

摘要：属性顺序标签标签标签必须加上命名命名规范名称中只能出现小写字符和破折号使用有意义的名称，使用有组织的或目的明确的名称名称应当尽可能短，并且意义明确，避免过度任意的简写。而是一个尚未被改变过的也是属于的元素。 html属性顺序 class id data-*,name src, for, type, href title, alt aria-*, role /*a标签*/ Ex...

mo0n1andin 2019-08-29 10:54 评论0 收藏0
莫闲前端之路学习markdown使用，html和css的编写顺序以及class命名规范

摘要：属性顺序标签标签标签必须加上命名命名规范名称中只能出现小写字符和破折号使用有意义的名称，使用有组织的或目的明确的名称名称应当尽可能短，并且意义明确，避免过度任意的简写。而是一个尚未被改变过的也是属于的元素。 html属性顺序 class id data-*,name src, for, type, href title, alt aria-*, role /*a标签*/ Ex...

codeGoogle 2019-08-05 17:50 评论0 收藏0