less笔记

warkiz 发布于2019-04-23 11:54 / 2778人阅读

摘要：变量变量使用混合混合使用运算运算包含了所有传递进来的参数条件判断条件判断使用

1. 变量

//less
@color: #4D926F;

//使用
#header {
  color: @color;
}

2. 混合

//less
.rounded-corners (@radius: 5px) {
  border-radius: @radius;
}

//使用
#footer {
  .rounded-corners(10px);
}

3. 运算

//less
@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%);
}

@arguments包含了所有传递进来的参数

.box-shadow (@x: 0, @y: 0, @blur: 1px, @color: #000) {
  box-shadow: @arguments;
}

4. 条件判断

//less
.arrow(@direction,@color,@pixel:5px) when (@direction = up) {
    .arrowUp(@color);
    .arrowSet(@pixel);
}
.arrow(@direction,@color,@pixel:5px) when (@direction = down) {
    .arrowDown(@color);
    .arrowSet(@pixel);
}

//使用
div.d1{
    .arrow(right,red);
}

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

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

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

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

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

codercao 2019-08-29 13:53 评论0 收藏0
前端学习笔记

摘要：环境安装本站实例采用的是百度的静态资源库上的资源。不包含文档和最初的源代码文件。点击该按钮，您可以直接从上得到最新的和源代码。如果您使用的是未编译的源代码，您需要编译文件来生成可重用的文件。 1.Bootstrap 1.1 Bootstrap 包的内容基本结构：Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。这将在 Bootstrap 基本结构部分详细讲解。...

alogy 2019-08-19 18:11 评论0 收藏0
前端学习笔记

摘要：环境安装本站实例采用的是百度的静态资源库上的资源。不包含文档和最初的源代码文件。点击该按钮，您可以直接从上得到最新的和源代码。如果您使用的是未编译的源代码，您需要编译文件来生成可重用的文件。 1.Bootstrap 1.1 Bootstrap 包的内容基本结构：Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。这将在 Bootstrap 基本结构部分详细讲解。...

chenjiang3 2019-08-01 15:12 评论0 收藏0