关于Less的学习笔记

姘搁『发布于2019-08-30 15:52 / 1064人阅读

摘要：简介部分记录是一门预处理语言，它扩充了语言，增加了诸如变量混合函数等功能，让更易维护方便制作主题扩充，是一种动态样式语言。运算可进行加减乘除的运算。

Less简介部分记录：

1、 Less是一门CSS预处理语言，它扩充了CSS语言，增加了诸如变量、混合（mixin）、函数等功能，让CSS更易维护、方便制作主题、扩充，是一种动态样式语言。
2、编译工具：Koala。
3、注释（两种方式）：

 /*   此种注释会被编译，即此句注释会出现在编译好的CSS文件中。 */   
 //   不会被编译。

4、变量：
声明变量：@变量名:值;
5、混合使用：可带参数，也可不带参数。
好处：CSS3兼容性使用，修改方便。
6、匹配模式：满足条件后才匹配。
7、运算：可进行加减乘除的运算。

Less代码学习部分记录：

1、定义编码方式：

@charset "utf-8";

2、普通的CSS代码编写：

body{
    background-color: cornsilk;
}

3、注释的区别：

/* Can see */
// Can"t see

4、变量的声明使用：

@test_width:320px;

.box{
    width: @test_width;
    height: @test_width;
    background-color: #FF7F50;
}

5、混合：

（1）不带参数的混合：

.border{
    border: 10px solid #5F9EA0;
}
.box{
  .border;
}

（2）带参数的混合：

1）没有默认值，一定要传参：

.border_02(@border_width){
    border: @border_width solid firebrick;
}
.test_mix{
    .border_02(30px);
}
.box{
  .test_mix;
}

2）带默认值：

.border_03(@border_width:20px){
    border: @border_width solid lightgreen;
}
.test_mix_03{ 
    .border_03();//可以不传参
    .border_03(50px);//可以传参
}
.box{
    .test_mix_03;
}

6、CSS3兼容性使用举例：

.border_radius(@radius:8px){
    -webkit-border-radius: @radius;
    -moz-border-radius: @radius;
    border-radius: @radius;
}
.radius_test{
    width: 200px;
    height: 120px;
    background-color: darksalmon;
    margin-top: 20px;
    .border_radius();
}

7、匹配模式：

（1）举例：画一个三角形

/*画一个三角形的原始方法*/
.triangle{
  width: 0;
  height: 0;
  margin-top: 10px;
  border-width: 60px;
  border-color: transparent transparent mediumvioletred transparent;
  border-style: dashed dashed solid dashed;//解决IE6有黑色边框问题
}

/*用匹配模式画三角形*/
.triangle_test(top,@w:60px,@c:mediumvioletred){
    border-width: @w;
    border-color: transparent transparent @c transparent;
    border-style: dashed dashed solid dashed;
}//向上的三角形
.triangle_test(bottom,@w:60px,@c:mediumvioletred){
    border-width: @w;
    border-color: @c transparent transparent transparent;
    border-style: solid dashed dashed dashed;
}//向下的三角形
.triangle_test(left,@w:60px,@c:mediumvioletred){
    border-width: @w;
    border-color: transparent @c transparent transparent ;
    border-style: dashed solid dashed dashed;
}//向左的三角形
.triangle_test(right,@w:60px,@c:mediumvioletred){
    border-width: @w;
    border-color: transparent transparent transparent @c;
    border-style: dashed dashed dashed solid;
}//向右的三角形

//@_：代表始终带着这个函数运行
.triangle_test(@_,@w:60px,@c:mediumvioletred){
    width: 0;
    height: 0;
    margin-top: 25px;
}

.triangle{    
//根据想得到的匹配格式画三角形 
  .triangle_test(top);
  .triangle_test(bottom);
  .triangle_test(left);
  .triangle_test(right);
//非匹配格式则css代码中只生成@_部分的代码
  .triangle_test(aaa);
}

（2）举例：定位的使用

.pos(r){
    position: relative;
}
.pos(ab){
    position: absolute;
}
.pos(f){
    position: fixed;
}
.test{
    width: 120px;
    height: 120px;
    margin-top: 20px;
    background-color: gold;
    .pos(r);
    .pos(ab);
    .pos(f);
}

8、运算（加减乘除）：

@test_01: 300px;
.box_02{
    width: @test_01 + 80;
    height: @test_01;
    margin-top: 20px;
    background-color: deepskyblue;
}

GPU云服务器云服务器关于深度学习的学习关于机器学习的学习关于机器学习的视频关于深度学习方面的问题

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

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

PostCSS自学笔记（一）【安装使用篇】

摘要：而则可制定个人需求的一套解决方案仅安装需要的插件。迫不及待的你已经等不及安装使用了吧。安装及使用一般是结合自动化工具使用，如果要单独使用可以安装，这里我先对的安装使用讲解下。接下来说点实际的，如何利用结合自动化工作在项目中使用。 PostCSS介绍 PostCSS是一个利用JS插件来对CSS进行转换的工具，这些插件非常强大，强大到无所不能。其中，Autoprefixer就是众多Post...

jsummer 2019-08-29 13:17 评论0 收藏0
vue学习笔记（五）

摘要：各模块各司其职，提高开发效率。使用生成的项目目录里，我们主要关注目录。这个是我们之前提到的单页面组件。这是项目的路由文件，存放项目中所有的路由。这里和我们之前所学没什么不同，不过是涉及了不少的知识。一、vue模块化开发所谓的模块化开发是指将不同的部分封装到不同的模块中，不再将所有的组件、路由等写在一个页面中。各模块各司其职，提高开发效率。使用vue-cli生成的项目目录里，我们主...

shusen 2019-08-21 17:18 评论0 收藏0
vue学习笔记（五）

摘要：各模块各司其职，提高开发效率。使用生成的项目目录里，我们主要关注目录。这个是我们之前提到的单页面组件。这是项目的路由文件，存放项目中所有的路由。这里和我们之前所学没什么不同，不过是涉及了不少的知识。一、vue模块化开发所谓的模块化开发是指将不同的部分封装到不同的模块中，不再将所有的组件、路由等写在一个页面中。各模块各司其职，提高开发效率。使用vue-cli生成的项目目录里，我们主...

paulquei 2019-08-01 17:52 评论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 less是一种动态样式语言，属于css预处理语言的一种，它使用类似css的语法，为css赋予了动态语言的特性，如变量、运算、函数等。方便了css的编写和维护。 le...

MkkHou 2019-08-02 15:58 评论0 收藏0