Brian F Love
Learn from a Google Developer Expert focused on Angular, Web Technologies, and Node.js from Portland, OR.
Ad ·ultimatecourses.com.
Learn Angular the right way with Ultimate Courses

少教程和演示

I have prepared a tutorial and presentation to give an overview and detailed look at the LESS programming language.This tutorial will cover:

  • What is LESS
  • Why use LESS?
  • Installation of LESS
  • 变量
  • Mixins
  • Cascading + Nesting
  • & combinator
  • Operations
  • 评论
  • @import
  • 字符串插值
  • Escaping
  • Pre-compile
  • 后汇编
  • LESS Elements
  • Minification and compression
  • Alternative to LESS

What is LESS

A recent互联网调查from June 2012 showed that almost half (46%) of respondents have not even tried a CSS preprocessor. Although not a scientific study, this indicates that there is a large gap between those that have tried to use a CSS preprocessor such as LESS or SASS, and those that are not currently employing a CSS preprocessor. Further, of those that have a preference as to which CSS preprocessor to use, 51% prefer to use LESS and 41% use SASS. I encourage you to try both LESS and SASS, and decide which preprocessor works best for you. Each has their own advantages and disadvantages, which will not be discussed in this article.

So, what exactly is LESS?

  • 少是一个编程
  • 少于CSS3编译
  • LESS is a CSSPreprocessor
  • LESS syntax is modelled after traditional CSS
  • LESS is often referred to as "dynamic css"

Why use LESS?

为什么Web开发人员或前端UI工程师应该使用更少的传统CSS?

  • 省时间
  • Reduce mistakes
  • Reducerepetition (DRY)
  • It makes logical sense to break out CSS into multiple files, but traditional CSS @import is terrible for performance as it creates a new HTTP request for each file
  • 少酷!

CSS preprocessors such as LESS do not extend the functionality of CSS; only the browser vendors can change the way CSS is implemented. Instead, a CSS preprocessor makes the development flow for a developer much easier. If you are already combining, minimizing and compressing your CSS, then using a CSS preprocessor is a logical next-step.

Installation of LESS

I covered the installation of LESS in my previous article, entitled从较少开始, so I will not be diving into the details here. For Windows users, I recommendWinLess, which is a simple installation and allows you to easily compile your less files into CSS. For Macintosh users, I recommend you install家用, then:

$ brewinstallGit.$ brewinstallnode$curlhttps://npmjs.org/install.sh.|sh$npminstall- 全球

什么不能做?

LESS introduces many features that CSS doesn't provide, such as:

  • 变量in your CSS
  • Mixins (think functions) that allow you to reuse rulesets
  • Nesting of styles to mimic your DOM structure
  • 简单的数学运算符:+, - ,* /数字和颜色
  • 楼层(),天花板()和round()等数学运算
  • Color operations such as darken(), lighten(), fadein() and fadeout()

Let's look at these features in depth.

变量

  • 从@符号开始
  • 可以存储储存重建,例如storehexadecimalcolors。#333或#fefefe
  • 可以储存围栏,例如“Webucator,Inc。”
  • Can store sizes, e.g. 10px

color variables

In the example above, we are defining a variable named@webucatorOrange, which contains the specific orange color used on our web site. We can then use this variable anywhere throughout our LESS code. This example also shows the CSS that is output when compiling the LESS to CSS.

string variables

In this example, we are defining a variable named@company, which stores a string. On the second line we are defining a variable@varName, which stores the string "company". We can evaluate this variable name, and then evaluate the result of that. The CSS that is created is shown on the right.

大小变量

In this example, we are defining a variable named@填充, which stores a size of 5 pixels. We can then use this @padding size throughout our LESS code. And, as we will see later, we can use this variable in mathematical operations or functions.

Mixins

  • Include properties from one ruleset to another
  • Reuse code
  • Can accept parameters
  • Can define default value for parameters
  • @arguments is a special variable that contains the ordered value stored in all parameters

mixins

在上面的这个例子中,我们定义了一个称为mixin边界半径,它用于复制CSS属性边界半径的跨浏览器功能。我发现它是良好的做法,以尽可能接近传统的CSS属性。MixIns可以接受参数,也可以具有默认值。Mixins不需要具有参数。在此示例中,Mixin具有命名的单个参数@radiuswith the default value of 2 pixels. We can then use this parameter in our resulting CSS rules. I am also defining a variable named@gray存储一个颜色。你可以看到CSS that is output when we compile the LESS. Wherever we call the mixin, the resulting CSS is output where we called it; with the appropriate value for the parameter as specified.

Cascading + Nesting

  • Nest rulesets in place of cascading
  • Can be used in combination with traditional cascading approach
  • Mimics your DOM structure
  • Outputs to cascading rulesets

嵌套风格

In this example, we are using the traditional cascading approach on the left, and the nested approach on the right. As you can see, the nested approach reduces duplication of selectors and closely mimics the structure of the HTML or DOM. It is also much cleaner and easier to read -- making our lives easier as we have to maintain the code in the future. We are also using the&组合者:focuspseudo selector, which we will discuss in more detail next.

&combinator

  • Nested selector is concatenated with the parent selector when using the&combinator
  • 这对伪类非常有用,例如:focus:徘徊

在这个例子中,我们正在使用&:focus&.inlinecombinators on theIMG.选择器。您可以看到右侧输出的生成的CSS。该:focuspseudo selector is concatenated with the parent selector, resulting inIMG.:focus. The second combinator shows that we can use this with classes and other selectors besides pseudo classes. Here, I am specifying images that have the class "inline" applied to them, and then setting the display property to inline.

Operations

  • Any size or color variable can be operated upon
  • Simple Mathematical operators: +, -, *, /
  • 颜色功能
  • Math functions

数学运营商

This example shows some simple math operations. Here I am just multiplying and adding to an existing variable that is storing a length of 2 pixels. You can do much more than just add and multiply simple pixels. Here are some more examples:

  • 填充:@Padding * 10%//outputs "padding: 20px;"
  • padding: ((@padding * 10%) / 2) + 5px;//outputs "padding: 15px;"
  • adding: @padding + (2 * @padding);//outputs "padding:6px;"

该re are also several math functions that LESS provides:

  • 回合()
  • 天花板()
  • floot()
  • percentage()

颜色功能

颜色功能enable you to apply various functions to create new colors or obtain information about existing colors. These include:

  • darken(@color, 20%);//returns color 20% darker
  • lighten(@color, 20%);//returns color 20% lighter
  • 渐显(@color, 20%);//returns color 20% more transparent
  • fadeout(@color, 20%);//返回颜色较少的透明度减少20%
  • 褪色(@color,80%);//returns color with 80% transparency
  • hue(@color);//hue channel of color
  • 饱和度(@color);//saturation channel of color
  • lightness(@color);//lightness channel of color
  • alpha(@color);//alpha channel of color

颜色功能

In this example I have a variable namedred包含我网站的特定红色阴影。然后我可以使用稍微改变这种颜色darken()减轻()functions. In the first instance I am creating a new color that is 10% darker, and then use this as the color argument to the消退()function, so create an image that has 80% transparency. In the second instance I am creating a new color that is 80% lighter than the original@redcolor.

评论

评论在较少的情况下非常直接。当您编译越少的CSS输出中,保留多行注释并包含在CSS输出中,并且不保留单行注释。因此,您通常应该使用单行评论,除非您真的需要将注释包含在生成的CSS中。

  • / *这些评论保存into your compiled CSS */
  • //该se comments are silent

@import

该use of@import()in your CSS is without-a-doubt a terrible idea. This causes extra HTTP requests to be made from the client (browser) to your server, for each file you are imported. If you have broken your CSS up into 5 different files, this is 5 requests, rather than a single request. For site performance, you should have a single CSS file that is requested by the client. Also, a general rule of thumb is to not use inline styles. The CSS file that your client requests is cached by the browser, and therefore is not downloaded on each subsequent page visit. The HTML that you return to your user is generally not cached, so all that inline CSS code is shipped to your user's browser on each and every page load.

What solution does LESS provide?

  • @import将编译并复制结果进入单个文件
  • All variables and mixins are available to main file or files imported after declarations
  • Order matters
  • 可以包括/忽略.Less。
  • Can import "classic" css using .css extension

我建议您使用包含您正在使用的所有必需的CSS文件的单个样式文件。这是一个例子:

//import normalize for CSS resets@import'normalize';//same as@import“正常化”;//import mixins for all of my"global"变量和混合@import'mixins';//base for mobile devices@import'基础';//tablets@mediaonly screen and(min-width:768px){@import'768';}//desktops@mediaonly screen and(min-width:10.30px.){@import'1030';}

字符串插值

  • 采用@{name}construct
  • For embedding variable values within declarations

string interpolation

该example shows that we might want to store our site's base URL as a string variable, along with another variable to hold references to the folder where we store our images. I can then use both of these variables to output the full URL to a background image. The resulting CSS is displayed at the bottom.

Escaping

  • 如果您需要输出无效CSS语法的CSS
  • 专有的语法不识别
  • If not used, LESS compiler will throw an error
  • Simple prefix with ~ symbol and put in quotes (string)

For example, you might be using IE specific code that is not valid CSS to create a gradient:

过滤:~";progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf',endColorstr='#f8f8f8')";

We put the invalid CSS in double-quotes, and then prefix it with the ~ symbol. This tells the LESS compiler to ignore the code string, and to just output whatever is in there.

Pre-compile

  • Compile LESS to CSS3, so only the single CSS file is loaded by your web application
  • 这应该用于生产
  • Is less convenient during development
  • You can set up the LESS compiler to "watch" a directory and to re-compile every time a file is saved in that directory -- much easier than manually compiling to test your resulting CSS

在Mac上,您可以使用lessc命令编译:

$ lessc style.less>../css/style.css.

后汇编

  • You can use a less.js file, and include your less files in your HTML.
  • This should NOT be used in production
  • Easiest for development
<! - 第一个较少的样式表 - ><scripttype="text/javascript"SRC.="less.js.">script><scripttype="text/javascript">//.watch();//]]>script>

LESS Elements

包含跨浏览器的一些有用Mixin的文件较少,包括:

  • .gradient
  • 。若干
  • .opacity
  • .box-shadow
  • .inner-shadow

Minification and compression

For production use, it is best to minimize and compress your CSS code. This makes your code lightweight, and therefore, your web site will be faster. In the end, your users will love you. :-) You can use the-Xargument to the LESS compiler to minify your resulting CSS code, and you can use the--yui-compress标志还使用YUI CSS压缩机压缩所产生的CSS代码。

$ lessc -x styles.less>../css/styles.css.$ lessc -x --yui-compress styles.less>../css/styles.css.

Alternatives to LESS

我希望写另一篇文章,详细介绍了较低和SCS之间的一些差异,因为这些似乎是最受欢迎的。

Presentation

您可以下载完整的演示:

Download

Brian F Love

嗨,我是布莱恩。我对类型名称,Angular和node.js感兴趣我嫁给了我最好的朋友邦妮,我住在波特兰和我滑雪(很多)。