search
HomeWeb Front-endHTML Tutorial[Tunny]CSS LESS Framework Basics_html/css_WEB-ITnose

[黄英?/Tunny,20140711]

Less is a Css precompiler, which means it can extend the Css language and add functions such as allowing variables (variables) , mixins, functions, and many other techniques can make CSS more maintainable, themed, and scalable.

This article is an introduction to Less and a syntax review. It includes some entry-level examples and is suitable for developers who have an entry-level understanding of Less.

The LESS source file is introduced in the same way as the standard CSS file:

<link rel="stylesheet/less" type="text/css" href="styles.less">

In the HTML where we need to introduce the LESS source file Add the following code:

<script src="less.js" type="text/javascript"></script>

Import file:

@import “variables.less”;@import “variables.css”;/*也可以将标准的 CSS 文件直接改成 .less 格式*/

Variables and Scope

 /*用变量管理值*/ @width : 20px; //全局变量 #homeDiv { #centerDiv{ width : @width; // 此处应该取最近定义的变量 width 的值 30px  } @width : 30px; //局部变量,变量和混合是延迟加载的,不一定要在使用前声明 } #leftDiv { width : @width; // 此处应该取最上面定义的变量 width 的值 20px  } /*用变量管理选择器名称、URLs、属性*/ @mySelector: banner; // 定义一个变量用于选择器名称 @images: "../img"; // 变量可以是字符串 @property: color; // 定义一个变量用于属性名称 .@{mySelector} { //选择器名称使用变量的用法 background: url("@{images}/white-sand.png");  //URLs使用变量的用法 @{property}: #0ee; …… //其它常规属性等 } /*编译生成的CSS文件*/ .banner { background: url("../img/white-sand.png"); color: #0ee; …… }

Variables can be defined and used in nested form

@fnord:  "I am fnord.";@var:    "fnord";content: @@var;//嵌套使用content: "I am fnord."; //编译后结果/*当一个变量定义两次时,只会使用最后定义的变量,Less会从当前作用域中向上搜索。*/

Numbers, colors and variables can be operated on

@init: #111111;@transition: @init*2;@var: 1px + 5 // Less能够判断颜色和单位之间的区别.switchColor { color: @transition; } /*编译生成的CSS文件*/ .switchColor { color: #222222; }

Mixins and functions

 .roundedCorners(@radius:5px) { //定义参数并且给予默认值 -moz-border-radius: @radius; -webkit-border-radius: @radius; border-radius: @radius;  } // 在另外的样式选择器中使用 #header { .roundedCorners; //使用类并且参数为默认值  } #footer { .roundedCorners(10px); //自定义参数值  } .bordered { border-top: dotted 1px black; border-bottom: solid 2px black; } #menu a { color: #111; .bordered; /*在另一个规则集内部使用上面类的属性,则直接访问属性所在类名(或Id名)即可*/ }

@arguments variable: When Mixins refers to this parameter, this parameter represents all variables (multiple parameters).

 .boxShadow(@x:0,@y:0,@blur:1px,@color:#000){ -moz-box-shadow: @arguments; -webkit-box-shadow: @arguments; box-shadow: @arguments;  } #header { .boxShadow(2px,2px,3px,#f36);  }

Namespace

#mynamespace { .home {...} .user {...} } //如果我们要复用 user 这个选择器的时候,我们只需要在需要混入这个选择器的地方这样使用就可以了。#mynamespace > .user

Nested Rules

<!-- HTML片段--> <div id="home"> <div id="top">top</div> </div>

/*使用嵌套规则的LESS 文件*/ #home{ color : blue; width : 600px; height : 500px; border:outset; #top{ border:outset; width : 90%;  } } /*编译生成的CSS文件*/ #home { color: blue; width: 600px; height: 500px; border: outset;  } #home #top { border: outset; width: 90%;  } a { color: red; text-decoration: none; &:hover { /*有 & 时解析的是同一个元素或此元素的伪类,没有 & 解析是后代元素,&表示当前选择器的父选择器*/ color: black; text-decoration: underline;  } } /*编译生成的CSS文件*/ a { color: red; text-decoration: none;  } a:hover { color: black; text-decoration: underline;  }

Extend

extend is a Less pseudo-class, which is an extension selector; the extension selector must At the end of all pseudo-classes

nav ul:extend(.inline)    background: blue;}.inline { color: red; } /*编译生成的CSS文件*/ nav ul { // 声明块保持原样 background: blue; } .inline,nav ul { color: red; } pre:hover , .some-class { &:extend(div pre); } /*以上与给每个选择器添加一个extend完全相同*/ pre:hover:extend(div pre), .some-class:extend(div pre) {}

essentially extend looks for the compiled CSS instead of the original less

.bucket { tr & { // 目标选择器中的嵌套,&代表最近父元素 color: blue;  } } .some-class:extend(tr .bucket) {} // 识别嵌套规则 /*编译生成的CSS文件*/ tr .bucket , .some-class { color: blue; }

extend must be an exact match (including wildcard *, pseudo-class order, nth expression, the only exception is the quotes in the attribute selector, less will know that they are the same and then match it)

.a.class,.class.a,.class > .a { color: blue; } .test:extend(.class) {} // 不会匹配上面的任何选择器的值 *.class { color: blue; } .noStar:extend(.class) {} //不会匹配*.class选择器 link:hover:visited { color: blue; } .selector:extend(link:visited:hover) {} //不会匹配,伪类顺序不同 :nth-child(1n+3) { color: blue; } .child:extend(n+3) {} //不会匹配,尽管逻辑上1n+3与n+3是相同的

[Version v2.0]

Huang Ying?/Tunny Wong:

v1.0 published on 2014-07-11

2014-07-13 First update v2.0

Statement
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
The Versatility of HTML: Applications and Use CasesThe Versatility of HTML: Applications and Use CasesApr 30, 2025 am 12:03 AM

HTML is not only the skeleton of web pages, but is more widely used in many fields: 1. In web page development, HTML defines the page structure and combines CSS and JavaScript to achieve rich interfaces. 2. In mobile application development, HTML5 supports offline storage and geolocation functions. 3. In emails and newsletters, HTML improves the format and multimedia effects of emails. 4. In game development, HTML5's Canvas API is used to create 2D and 3D games.

What is the root tag in an HTML document?What is the root tag in an HTML document?Apr 29, 2025 am 12:10 AM

TheroottaginanHTMLdocumentis.Itservesasthetop-levelelementthatencapsulatesallothercontent,ensuringproperdocumentstructureandbrowserparsing.

Are the HTML tags and elements the same thing?Are the HTML tags and elements the same thing?Apr 28, 2025 pm 05:44 PM

The article explains that HTML tags are syntax markers used to define elements, while elements are complete units including tags and content. They work together to structure webpages.Character count: 159

What is the significance of <head> and <body> tag in HTML?What is the significance of <head> and <body> tag in HTML?Apr 28, 2025 pm 05:43 PM

The article discusses the roles of <head> and <body> tags in HTML, their impact on user experience, and SEO implications. Proper structuring enhances website functionality and search engine optimization.

What is the difference between <strong>, <b> tags and <em>, <i> tags?What is the difference between <strong>, <b> tags and <em>, <i> tags?Apr 28, 2025 pm 05:42 PM

The article discusses the differences between HTML tags , , , and , focusing on their semantic vs. presentational uses and their impact on SEO and accessibility.

Please explain how to indicate the character set being used by a document in HTML?Please explain how to indicate the character set being used by a document in HTML?Apr 28, 2025 pm 05:41 PM

Article discusses specifying character encoding in HTML, focusing on UTF-8. Main issue: ensuring correct display of text, preventing garbled characters, and enhancing SEO and accessibility.

What are the various formatting tags in HTML?What are the various formatting tags in HTML?Apr 28, 2025 pm 05:39 PM

The article discusses various HTML formatting tags used for structuring and styling web content, emphasizing their effects on text appearance and the importance of semantic tags for accessibility and SEO.

What is the difference between the 'id' attribute and the 'class' attribute of HTML elements?What is the difference between the 'id' attribute and the 'class' attribute of HTML elements?Apr 28, 2025 pm 05:39 PM

The article discusses the differences between HTML's 'id' and 'class' attributes, focusing on their uniqueness, purpose, CSS syntax, and specificity. It explains how their use impacts webpage styling and functionality, and provides best practices for

See all articles

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

WebStorm Mac version

WebStorm Mac version

Useful JavaScript development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

PhpStorm Mac version

PhpStorm Mac version

The latest (2018.2.1) professional PHP integrated development tool

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

Integrate Eclipse with SAP NetWeaver application server.