CSS进阶:LESS快速入门

2018年1月15日20:57:48 发表评论 578

less是什么?和css又有什么关系呢?我想这是前端小白一定会思考的问题,这里提醒前端小白门一句,前端页面是由HTML和CSS和JS三大块组成的,而less就像jquery一样,是css的一种扩展,不过它并没有阉割css的功能,而是在现有的css语法上添加了很多功能,所以说学习less是非常简单的,就像和css一样简单,下面我们来了解下LESS的基本知识,如何使用。

和less一样是css预处理器,sass入门

CSS进阶:LESS快速入门

一、LESS语法

less做为一种形式的扩展,也是有它的语法的,不过非常简单。

1. less变量

  1. // less代码
  2. @nice-blue#5B83AD;
  3. @light-blue: @nice-blue + #111;
  4. #header { color: @light-blue; }
  5. // 编译后的css代码
  6. #header { color#6c94be; }

代码解释:在less文件中我们设置了两个颜色相关的变量,然后将这个变量赋值给#header的颜色值,输入的css和我们正常写css一样,但是less用变量写就更有利于我们管理,重用css,变量名也可以定义为变量,例如在less文件中加入@var: 'fnord',要注意的是less变量为完全的‘常量’,只能被定义一次。

2. less混合

  1. // less代码
  2. .bordered {
  3.   border-topdotted 1px black;
  4.   border-bottomsolid 2px black;
  5. }
  6. // 引用混合
  7. #menu a {
  8.   color#111;
  9.   .bordered;
  10. }
  11. .post a {
  12.   colorred;
  13.   .bordered;
  14. }
  15. //编译后的css代码
  16. #menu a {
  17.   color#111;
  18.   border-topdotted 1px black;
  19.   border-bottomsolid 2px black;
  20. }
  21. .post a {
  22.   colorred;
  23.   border-topdotted 1px black;
  24.   border-bottomsolid 2px black;
  25. }

代码解释:上面代码我们首先定义了一个通过属性集的class,然后我们在另一个class中调用这个属性的class,这就是最基本的混合,任何CSS的 class、id、标签元素的属性集都可以以上面的方式引入。

3. less带参数混合

  1. // 基本参数混合less代码
  2. .border-radius (@radius) {
  3.   border-radius: @radius;
  4.   -moz-border-radius: @radius;
  5.   -webkit-border-radius: @radius;
  6. }
  7. // 调用
  8. #header {
  9.   .border-radius(4px);
  10. }
  11. .button {
  12.   .border-radius(6px);
  13. }
  14. // 带默认值的less代码
  15. .border-radius (@radius: 5px) {
  16.   border-radius: @radius;
  17.   -moz-border-radius: @radius;
  18.   -webkit-border-radius: @radius;
  19. }
  20. // 调用
  21. #header {
  22.   .border-radius;
  23. }
  24. // 不带参数属性集合的less代码
  25. .wrap () {
  26.   text-wrap: wrap;
  27.   whitewhite-spacepre-wrap;
  28.   whitewhite-space: -moz-pre-wrap;
  29.   word-wrap: break-word;
  30. }
  31. // 调用
  32. pre { .wrap }
  33. // @arguments 变量
  34. .box-shadow (@x: 0, @y: 0, @blur: 1px, @color#000) {
  35.   box-shadow: @arguments;
  36.   -moz-box-shadow: @arguments;
  37.   -webkit-box-shadow: @arguments;
  38. }
  39. .box-shadow(2px5px);
  40. // 输出
  41.   box-shadow: 2px 5px 1px #000;
  42.   -moz-box-shadow: 2px 5px 1px #000;
  43.   -webkit-box-shadow: 2px 5px 1px #000;

代码解释:LESS带参数混合可以不设置默认值,也可以设置初始的默认值,还可以定义不带参数的属性集合(这个方法你会发现非常好用),更重要的是可以设置@arguments 变量  ,@arguments包含了所有传递进来的参数,如果你不想单独处理每一个参数,你最后这样写。

4. less模式匹配和导引表达式

有些时候,我们想根据传入的参数来改变混合的默认呈现,就像下面这样:

  1. .mixin (@s, @color) { ... }
  2. .class {
  3.   .mixin(@switch, #888);
  4. }

如果想让.mixin根据不同的@switch值而表现各异,可以这样设置:

  1. .mixin (dark, @color) {
  2.   color: darken(@color, 10%);
  3. }
  4. .mixin (light, @color) {
  5.   color: lighten(@color, 10%);
  6. }
  7. .mixin (@_, @color) {
  8.   displayblock;
  9. }

运行下面这段代码:

  1. @switch: light;
  2. .class {
  3.   .mixin(@switch, #888);
  4. }

就会得到这个CSS:

  1. .class {
  2.   color#a2a2a2;
  3.   displayblock;
  4. }

代码解释:上面的CSS传入了颜色的浅色,如果@switch设为dark,就会得到深色。具体实现:

  1. 第一个混合定义并未被匹配,因为它只接受dark做为首参
  2. 第二个混合定义被成功匹配,因为它只接受light
  3. 第三个混合定义被成功匹配,因为它接受任意值

引导,如果我们想根据表达式进行匹配,而非根据值和参数匹配时,导引就显得非常有用。如果你对函数式编程非常熟悉,那么你很可能已经使用过导引。

看下面这个例子:

  1. .mixin (@a) when (lightness(@a) >= 50%) {
  2.   background-colorblack;
  3. }
  4. .mixin (@a) when (lightness(@a) < 50%) {
  5.   background-colorwhite;
  6. }
  7. .mixin (@a) {
  8.   color: @a;
  9. }

when关键字用以定义一个导引序列(此例只有一个导引)。运行下列代码:

  1. .class1 { .mixin(#ddd) }
  2. .class2 { .mixin(#555) }

结果:

  1. .class1 {
  2.   background-colorblack;
  3.   color#ddd;
  4. }
  5. .class2 {
  6.   background-colorwhite;
  7.   color#555;
  8. }

导引中可用的全部比较运算有: > >= = =< <。此外,关键字true只表示布尔真值,下面两个混合是相同的:

  1. .truth (@a) when (@a) { ... }
  2. .truth (@a) when (@a = true) { ... }

导引序列使用逗号‘,’—分割,当且仅当所有条件都符合时,才会被视为匹配成功。

  1. .mixin (@a) when (@a > 10), (@a < -10) { ... }

导引可以无参数,也可以对参数进行比较运算:

  1. @media: mobile;
  2. .mixin (@a) when (@media = mobile) { ... }
  3. .mixin (@a) when (@media = desktop) { ... }
  4. .max (@a, @b) when (@a > @b) { width: @a }
  5. .max (@a, @b) when (@a < @b) { width: @b }

最后,如果想基于值的类型进行匹配,我们就可以使用is*函式:

  1. .mixin (@a, @b: 0) when (isnumber(@b)) { ... }
  2. .mixin (@a, @b: black) when (iscolor(@b)) { ... }

下面就是常见的检测函式:

  • iscolor
  • isnumber
  • isstring
  • iskeyword
  • isurl

如果你想判断一个值是纯数字,还是某个单位量,可以使用下列函式:

  • ispixel
  • ispercentage
  • isem

PS:引导序列中可以使用and和not关键字。

5. less嵌套规则

一般我们写css嵌套是这样的:

  1. #header { colorblack; }
  2. #header .navigation {
  3.   font-size12px;
  4. }
  5. #header .logo {
  6.   width300px;
  7. }
  8. #header .logo:hover {
  9.   text-decorationnone;
  10. }

LESS是这样写的:

  1. #header        { colorblack;
  2.   .navigation  { font-size12px }
  3.   .logo        { width300px;
  4.     &:hover    { text-decorationnone }
  5.   }
  6. }

是不是特别的清楚明了,感觉和DOM结构很像,注意&符号是串联选择器,代表着前一个元素,用在伪类上最好了,如:hover和:focus。

6. less运算

在less当中,任何的数字/颜色/变量都可以参与运算,看看下面的例子:

  1. @base: 5%;
  2. @filler: @base * 2;
  3. @other: @base + @filler;
  4. color#888 / 4;
  5. background-color: @base-color + #111;
  6. height: 100% / 2 + @filler;

LESS可以分辨运算中的颜色和单位,同样也可以使用括号,并且可以在复合属性中进行运算:

  1. // 单位运算
  2. @var: 1px + 5;
  3. // 带括号
  4. width: (@var + 5) * 2;
  5. // 复合属性运算
  6. border: (@width * 2) solid black;

7. less Color函数

  1. lighten(@color, 10%);     // return a color which is 10% *lighter* than @color
  2. darken(@color, 10%);      // return a color which is 10% *darker* than @color
  3. saturate(@color, 10%);    // return a color 10% *more* saturated than @color
  4. desaturate(@color, 10%);  // return a color 10% *less* saturated than @color
  5. fadein(@color, 10%);      // return a color 10% *less* transparent than @color
  6. fadeout(@color, 10%);     // return a color 10% *more* transparent than @color
  7. fade(@color, 50%);        // return @color with 50% transparency
  8. spin(@color, 10);         // return a color with a 10 degree larger in hue than @color
  9. spin(@color, -10);        // return a color with a 10 degree smaller hue than @color
  10. mix(@color1, @color2);    // return a mix of @color1 and @color2

Less有一系列的颜色运算函数,颜色会先被转化成 HSL 色彩空间, 然后在通道级别操作,使用起来也十分简单:

  1. @base: #f04615;
  2. .class {
  3.   color: saturate(@base, 5%);
  4.   background-color: lighten(spin(@base, 8), 25%);
  5. }

8. less Math函数

  1. round(1.67); // returns `2`
  2. ceil(2.4);   // returns `3`
  3. floor(2.6);  // returns `2`
  4. percentage(0.5); // returns `50%`

less提供了一组方便的数学函数,你可以使用它们处理一些数字类型的值,用percentage还可以将一个值转化为百分比。

9. less 作用域

  1. @var: red;
  2. #page {
  3.   @var: white;
  4.   #header {
  5.     color: @var; // white
  6.   }
  7. }
  8. #footer {
  9.   color: @var; // red
  10. }

LESS 中的作用域和其他编程语言非常类似,首先会从本地查找变量或者混合模块,如果没找到的话会去父级作用域中查找,直到找到为止。

10. less 注释

css中的注释也会在less中保留,同样less中也可以用双斜线注释,和js单行注释一样的,但是编译成 CSS 的时候自动过滤掉。

  1. /* Hello, I'm a CSS-style comment */
  2. .class { colorblack }
  3. // Hi, I'm a silent comment, I won't show up in your CSS
  4. .class { colorwhite }

11.  less Importing

在main文件中可以通过下面的方法引入.less文件,后缀可不带,如果你想导入css文件并且不想less处理它,只需要使用.css后缀就可以了

  1. @import "lib.less";
  2. @import "lib";
  3. @import "lib.css";

less变量可以用类似ruby和php的方式嵌入到字符串中,就像下面这样:

  1. @base-url"http://assets.fnord.com";
  2. background-imageurl("@{base-url}/images/bg.png");

有时候我们需要输出一些自定义的字符串,不想让less编译,我们就可以在字符串前加一个~,例如:

  1. .class {
  2.   filter: ~"ms:alwaysHasItsOwnSyntax.For.Stuff()";
  3. }
  4. // 输出
  5. .class {
  6.   filter: ms:alwaysHasItsOwnSyntax.For.Stuff();
  7. }

12.  less Javascript

在less中我们也可以使用javascript,通过反引号使用:

  1. @var: `"hello".toUpperCase() + '!'`;
  2. // 输出
  3. @var: "HELLO!";

二、less使用

13. 在客户端使用less

  1. // 引入less样式文件
  2. <link rel="stylesheet/less" type="text/css" href="styles.less">
  3. // 引入less.js文件
  4. <script src="less.js" type="text/javascript"></script>

这样我们就顺利的引入,记住less文件要在服务器环境下才会正常运行,本地直接打开可能会报错!

14. 在服务器端使用less

我们直接用node包管理器nmp快速安装:

$ npm install less

安装成功后,我们在node中调用编译器:

  1. var less = require('less');
  2. less.render('.class { width: 1 + 1 }', function (e, css) {
  3.     console.log(css);
  4. });

总结:less相对而言是很简单的,语法也不多,毕竟还是一种新的语言,只是css一种形式的扩展,和less一样的还有sass,使用less写css方便我们管理自己项目,也节省了我们写项目花费css上的时间,还是很棒的。

猿梦

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: