less学习

desdik 发布于2019-08-30 15:53 / 2547人阅读

摘要：是什么里边的可以使用多种编译环境将转换为我是用的是安装文件依程序员的角度去编写的出现兼容性写法使用更容易等使用的混合写法更加方便中的变量在使用的时候中的类混合在没有之前想让一个有两个类得到效果只能是给这个加两个类从而达到两个类的

less是什么

css里边的jquery 可以使用多种编译环境将less转换为css 我是用的是node安装less 文件.less
write less do more
依程序员的角度去编写css
css3的出现 css 兼容性写法使用less更容易 -webkit- -moz- -o-等使用less的混合写法更加方便

less中的变量

@name:value
在使用的时候 height:@name

less中的类混合

在没有less之前想让一个div有两个类得到效果只能是给这个div加两个类从而达到两个类的效果混合
但是有了less之后不再需要两个类只需要在less中将需要混合的类放在一起
less

.bg{
    height: @test_width;background: red;.border;
}
.border{
    border: 10px solid #0D3349;
}

生成的css

.bg {
  height: 300px;
  background: red;
  border: 10px solid #0D3349;
}

有了这个功能就能实现就能够实现将许多类的公共代码抽取出来再使用混合为每一个类加入这部分公共的代码

less中可带参数的混合

为待混合的部分增加参数这样在其他类调用的时候更加灵活
less

.bg{
    height: @test_width;background: red;.border(11px);
}
.border(@border_width){
    border: @border_width solid #0D3349;
}

生成的css代码

.bg {
  height: 300px;
  background: red;
  border: 11px solid #0D3349;
}

为这个参数指定默认值
less 为@border_width指定默认值10px

.bg{
    height: @test_width;background: red;.border();
}
.border(@border_width:10px){
    border: @border_width solid #0D3349;
}

值得注意的是.bg只是一个定义的过程在.border里边调用才可以生成css
这样在调用这个混合的时候即使没有参数的时候也不会报错生成的css如下
css

.bg {
  height: 300px;
  background: red;
  border: 10px solid #0D3349;
}

less中的匹配模式

相当于js中的if 但不完全是
less没有出现之前在页面上写一个三角形的方法

.sanjiao{
  width: 0;height: 0;overflow: hidden;
  border-width:10px ;
  border-color: transparent transparent red transparent;
   border-style: dashed dashed solid dashed;
  //dashed  是为了兼容ie6
}

使用了less的匹配模式来实现

.tringle(top,@w:10px,@c:red){
  border-width:@w;
  border-color: @c;
  border-style:dashed dashed solid dashed ;
}
.tringle(bottom,@w:10px,@c:red){
  border-width:@w;
  border-color: @c;
  border-style:solid dashed dashed  dashed ;
}
.tringle(@_,@w:10px,@c:red){   //不管会执行那个tringle都会执行这一个  而且后边的这两个参数必须携带
    width: 0;height: 0;overflow: hidden;
}
.sanjiao_shang{
   .tringle(top)
}
.sanjiao_xia{
  .tringle(bottom)
}

生成的css

.sanjiao_shang {
  border-width: 10px;
  border-color: red;
  border-style: dashed dashed solid dashed ;
  width: 0;
  height: 0;
  overflow: hidden;
}
.sanjiao_xia {
  border-width: 10px;
  border-color: red;
  border-style: solid dashed dashed  dashed ;
  width: 0;
  height: 0;
  overflow: hidden;
}

less中可以对变量进行预算只要这个变量带着单位运算的时候是需要运算整数不需要管单位同时颜色也可以进行运算

less中的嵌套规则

但是在css中尽量的少去嵌套增加web性能
less

.list{
  width: 600px;margin: 30px auto;
  padding:0;
  li{
    height: 30px;
  }
  a{
    &:hover{           //&代表的就是上一层选择器
      color: #6ba82f;
    }
  }
}

生成的css

.list {
  width: 600px;
  margin: 30px auto;
  padding: 0;
}
.list li {
  height: 30px;
}
.list a:hover {
  color: #6ba82f;
}

less中的@arguments

less代码

.test(@w:30px,@c:red,@xx:solid){
  border: @arguments;
}
.tt1{
  .test()
}

将会生成的css代码

.tt1 {
  border: 30px red solid;
}

云服务器 GPU云服务器 less less2 html使用less linux密令less

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

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

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
前端构建工具grunt学习笔记

使用grunt实时编译less文件下图是项目的文件组织 showImg(https://segmentfault.com/img/bVqbtg); 生成package.json文件，通过npm init命令。安装你需要的Devdependencies/denpendencies。 npm install grunt --save-dev npm install load-grunt-ta...

zone 2019-08-21 10:42 评论0 收藏0
less学习一

摘要：是一门预处理语言，它扩展了语言，增加了变量函数等特性，使更易维护和扩展。可以运行在或浏览器端。 Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。 Less 可以运行在 Node 或浏览器端。 less文件只有被编译后才能被浏览器识别和使用 less编译工具：1. Koala ：国人开发的less全平台编译工具 ...

helloworldcoding 2019-04-23 13:27 评论0 收藏0
学习Less-看这篇就够了

摘要：在网上讨论看来，与相比于功能更为丰富，但对于学习成本以及适应时间，稍胜一筹，这也是我选择的原因。如果你也是的使用者，还需要配合进行处理，具体可见我的这篇文章飞行手册，里面详细说明了的处理方式。原文链接前言 CSS的短板作为前端学习者的我们或多或少都要学些 CSS ，它作为前端开发的三大基石之一，时刻引领着 Web 的发展潮向。而 CSS 作为一门标记性语言，可能给初...

hiyayiji 2019-08-29 13:59 评论0 收藏0