Less-CSS预处理语言

Posted 王家涛

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Less-CSS预处理语言相关的知识，希望对你有一定的参考价值。

Less-CSS预处理语言

引入：

1. 要做各种内核都兼容的圆角效果，这个CSS效果是有固定模版的，那每个用到圆角的地方都复制一遍同样的代码的话，那如果圆角有一天都要改得更加圆一些怎么办？这个时候是不是可以把这些模版封装起来会比较好？

2. 网站每个地方都要用同一种红色怎么办？ 是要`#E7253D...#E7253D...#E7253D...#E7253D`，还是要`$red: #E7253D; $red...$red...$red`

3. 比较花哨的需求可能是要整个网站换颜色，如果页面里边有带染色的阴影，传统方法只能是做多套css，每个都算出不一样的颜色了。但是为什么要自己算？为什么不让CSS被自动生成出来，带染色的阴影颜色用颜色相关的函数算出来。

4. 如果html层级结构比较复杂，怎么结构化你的css，做到selector的精确打击。这个怕是很困难的吧。

.......

1. css缺点

  • css需要书写大量看似没有逻辑的代码，不方便维护及扩展，不利于复用。

  • css是一门非程序式语言，没有变量、函数等概念

2. less优点

  • 在css语言基础上引入了变量，Mixin（混入），运算以及函数等功能，大大简化了css的编写，并且降低了css的维护成本

  • less让我们用更少的代码做更多的事情，它对于大网站海量的页面编写非常有助

  • 本质上less包含了一套自定义的语法及一个解析器，用户可以根据这些语法定义自己的语法规则，这些规则最终会通过解析器，编译生成对应的css文件

注意：less并没有裁剪css原有的特性，更不是用来取代css的，而是在现有css语法的基础上，为css加入程序式语言的特性

Less缺点：

  • 须要经过编译。无论是放在客户端还是服务端，都是一种额外的开销。

  • 作者更新不够活跃，使用中遇到的一些问题可能官方代码得不到及时的更新。

3. less介绍

  • Less是一门CSS预处理语言，它扩展了CSS语言，增加了诸如变量、混合（mixin）、函数等功能，让CSS更容易维护、方便制作主题、扩展！

4. 流程：


/*less文件*/

@color:#2D926F;    //变量

#header{ color:@color; }

h2{ color:@color; }

经过编译生成的css文件

#header{ color：#2D926F； }

h2{ color: #2D926F; }

  • less可以直接在客户端使用，也可以在服务端使用。在实际项目开发中，我们推荐使用第三种方式，将less文件编译生成静态css文件，并在HTML文档中应用

  • Mixins（混入）：在less中，混入是指在一个class中引入另外一个已经定义好的class，就像当前class中增加一个属性一样。这种方式在大型网站多页面时常用的方式，下面简单看一下Mixins在less中的使用

/* 定义一个 样式选择器 */

.roundedCorners（@radius:5px）{

    -moz-border-radius:@radius;

    -webkit-border-radius:@radius;

    border-radius:@radius;

}

/* 在另外的样式选择器中使用 */

#header{

    .roundedCorners;

}

#footer{

    .roundedCorners(10px);

}

经过编译生成的css文件

#header{

    -moz-border-radius:5px;

    -webkit-border-radius:5px;

    border-radius:5px;

}

#footer{

   -moz-border-radius:10px;

    -webkit-border-radius:10px;

    border-radius:10px;

}

3. 编译工具

  • koala编译：前端与处理语言图形编译工具，支持Less、Sass、Compass、CoffeeScript、帮助Web开发者高效地使用它们进行开发。跨平台运行，完美兼容windows、Linux、mac

    • koala

    • 国内开发的less/sass编译工具

  • node,js库（可以使用node.js进行编译）

  • 浏览器端使用（可以使用node.js进行编译）

4. 安装koala编辑工具，打开koala软件，将创建好的文件夹拖到koala中即可！


==>通过编译环境进行安装：

  • 第一步：先下载安装node.js，安装如果完成可以在doc界面输入   node -v  进行查看node.js版本

  • 第二步：完成第一步后，通过在doc界面输入   npm install less  -g  命令进行安装less 

  • 第三步：编译命令   lessc  文件名.less  输出文件名.css

  • 第四步：压缩CSS  lessc  文件名.less  输出文件名.css -x

注释

1. less中的注释

  • 可以使用css中的   /*注释内容*/

    • 该种注释会被编译的

  • 也可以使用   //  注释

    •  // 注释编译时会自动过滤掉，该种注释不会被编译

变量

1. 变量

  • 声明变量方式：  一定要以@开头，如   @变量名：值；

//less变量

@test_width:300px;

div{

   width: @test_width;

   height: @test_width;

   background-color: peru;

}

==>经过编译成

div {

   width: 300px;

   height: 300px;

   background-color: peru;

}

混合（Mixin）

1. 混合（mixin）变量

  • 混合：就是将一系列属性从一个规则集引入（混合）到另一个规则集的方式。

  • 例如：  .border{ border：10px solid red; }

html中：

<body>

<div class="box1"></div>

<div class="box2"></div>

</body>

less中：

//less变量

@test_width:150px;

.box1{

   width: @test_width;

   height: @test_width;

   background-color: peru;

   .border;

}

// 混合

.border{

   border:5px solid blue;

}

效果：


less中：

//less变量

@test_width:150px;

.box1{

   width: @test_width;

   height: @test_width;

   background-color: peru;

   .border;

}

// 混合

.border{

   border:5px solid blue;

}

// 如果发现div.box2和div.box1样式大致一致,就是多了个margin-left,则：

.box2{

   .box1;

   margin-left: 100px;

}

效果：

2. 带参数的混合

  • .border-radius（@radius）{ css代码 }

    • 可设定默认值

    • border-radius（@radius：5px）{ css代码 }

/*混合-可带参数*/

.border_01(@border_width){

   border:@border_width solid pink;

}

.test_hunher{

   .border_01(20px);

}

==>编译后.css文件中结果

/*混合-可带参数*/

.test_hunher {

   border: 20px solid #ffc0cb;

}

=====================

/* 混合-默认带值 */

.border_02(@border_width:30px){    //默认边框宽度30px

   border:@border_width solid pink;

}

.test_hunhe_02{

   .border_02( );   //边框30px

}

//如果不想使用默认带的值，那么就自己传递值，如：

.test_hunhe_02{

   .border_02(100px );   //边框30px

}

==>经过编译成 .css文件后的结果：

/* 混合-默认带值 */

.test_hunhe_02 {

   border: 30px solid #ffc0cb;

}

混合带来的好处：

案例-css3圆角属性浏览器兼容性问题使用less情况：

/*混合带来的好处*/

.border_radius(@radius:50px){

   -webkit-border-radius:@radius;

   -moz-border-radius:@radius;

   border-radius:@radius;

}

.radius_test{

   width: 100px;

   height: 100px;

   background-color: green;

   .border_radius();

}

==>经过编译成 .css 文件后的结果：

/*混合带来的好处*/

.radius_test {

   width: 100px;

   height: 100px;

   background-color: green;

   -webkit-border-radius: 50px;

   -moz-border-radius: 50px;

   border-radius: 50px;

}

匹配模式

1. 匹配模式

  • 相当于JS中的if

    • 但是不完全是

  • 满足条件后才能匹配

/*匹配模式*/

/*三角向上*/

.triangle(top,@w:5px,@c:#ccc){

   border-width: @w;

   border-color: transparent transparent @c transparent;

   border-style: dashed dashed solid dashed;

}

/*三角向下*/

.triangle(bottom,@w:5px,@c:#ccc){

   border-width: @w;

   border-color: @c transparent transparent transparent;

   border-style: solid dashed dashed dashed;

}

/*三角向左*/

.triangle(left,@w:5px,@c:#ccc){

   border-width: @w;

   border-color: transparent @c transparent transparent;

   border-style: dashed solid dashed dashed;

}

/*三角向右*/

.triangle(right,@w:5px,@c:#ccc){

   border-width: @w;

   border-color: transparent transparent transparent @c;

   border-style: dashed dashed dashed solid;

}

.triangle(@_,@w:5px,@c:#ccc){

   width: 0;

   height: 0;

   overflow: hidden;

}

/*三角向上：只需修改参数 .triangle(top,100px);即可(如果向下将第一个参数改成bottom其他同理)*/

.sanjiao{

   .triangle(top,100px);

}

==>经过编译成 .css 文件后的结果：

/*匹配模式*/

/*三角向上*/

/*三角向下*/

/*三角向左*/

/*三角向右*/

/*三角向上：只需修改参数 .triangle(top,100px);即可(如果向下将第一个参数改成bottom其他同理)*/

.sanjiao {

   border-width: 100px;

   border-color: transparent transparent #cccccc transparent;

   border-style: dashed dashed solid dashed;

   width: 0;

   height: 0;

   overflow: hidden;

}

案例：通过匹配模式来添加定位

/*匹配模式-通过匹配模式来做定位*/

.pos(rig){

   position: relative;

}

.pos(abs){

   position: absolute;

}

.pos(fix){

   position: fixed;

}

.dingwei{

   width: 200px;

   height: 200px;

   background-color: green;

   .pos(fix);

}

==>经过编译成 .css 文件后的结果：

/*匹配模式-通过匹配模式来做定位*/

.dingwei {

   width: 200px;

   height: 200px;

   background-color: green;

   position: fixed;

}

运算符

1. less中的运算符

  • 任何数字、颜色或者变量都可以参与运算，运算应该被包括在括号中

    • 例如：  +  -   *   /

/*less===>运算*/

@test_01:300px; //定义变量

.box_02{

   width: @test_01+20; //进行运算(300+20)

   color: #ccc - 10; /*颜色进行运算(一般不常用)*/

}

.box_03{

   width: ( @test_01 - 20 )*2; //进行运算(300-20)*2

}

==>经过编译成 .css 文件后的结果：

/*less===>运算*/

.box_02 {

   width: 320px;

   color: #c2c2c2;

/*颜色进行运算(一般不常用)*/

}

.box_03 {

   width: 560px;

}

函数

1. 函数

  • less提供了很多用于转换颜色、处理字符串和进行算术运算的函数。

2. less函数（只列一部分）

  • Math数学函数

    • round（2.5）;   // return '3' ,如果有第二个参数，表示保留给几个小数取舍

    • ceil（2.4）；    //return ‘3’ 向上取整

    • floor（2.6）；   // return ‘2’向下取整

    • percentage（0.5）   //return ‘50%’  取百分比

    • min（10%，20%，30%，40%）；   //return 10% 取最小

    • max（10%，20%，40%，80%）；    //return 80% 取最大

  • color颜色函数：less提供了一些处理颜色的函数

    • 颜色定义函数

    • 颜色通道函数

    • 颜色操作函数

    • 颜色混合函数

importing导入

1. 导入：即可以导入一个.less文件，然后这个文件中的所有变量都可以使用了，对于 .less 文件而言，其扩展名是可选的。

  • 例如：

            @import “library”；    // library.less

            @import “type.css”；   

变量插值

1. 变量插值：在css规则中使用变量管理值，实际上它们还可以用在其他地方，比如选择器名称、属性名、URLS以及import语句中

  • 选择器（Selectors）

/*选择器中*/

@mySelector1:banner;    //变量

// 用法

.@{mySelector1}{

   font-size: 30px;

   color: red;

   margin: 0 auto;

}

==>经过编译成 .css 文件后的结果：

/*选择器中*/

.banner {

   font-size: 30px;

   color: red;

   margin: 0 auto;

}

  • URLs

/*URLs*/

@images:"../img"; //定义变量

body{

   color: #ccc;

   background: url("@{images}/white_sand.png");    //使用

}

==>经过编译成 .css 文件后的结果：

/*URLs*/

body {

   color: #ccc;

   background: url("../img/white_sand.png");

}

  • 导入语句

    • 语法：@import “@{them}/tidal-wave.less”;

  • Properties（属性）

/*Properties属性*/

@property:color; //定义变量

.widget{

   @{property}:#0ee;

   background-@{property}:#999;

}

==>经过编译成 .css 文件后的结果：

/*Properties属性*/

.widget {

   color: #0ee;

   background-color: #999;

}

嵌套规则

1. 嵌套规则

  • 方便操作

2. less中嵌套两种用法

  • &对伪类使用

    • hover或focus

  • 对连接的使用

    • &-item

html中：

<body>

<ul class="list">

   <li><a href="#">这里是一个测试文字</a><span>2018-5-12</span></li>

   <li><a href="#">这里是一个测试文字</a><span>2018-5-12</span></li>

   <li><a href="#">这里是一个测试文字</a><span>2018-5-12</span></li>

   <li><a href="#">这里是一个测试文字</a><span>2018-5-12</span></li>

   <li><a href="#">这里是一个测试文字</a><span>2018-5-12</span></li>

</ul>

</body>

less文件中：

/*less===>嵌套规则*/

/*

传统嵌套方式：

.list{}

.list li{}

.list a{}

.list span{}

*/

.list{

   width: 600px;

   margin: 30px auto;

   padding: 0;

   list-style: none;

   li{          //嵌套li==>表示list下面的li

      height: 30px;

      line-height: 30px;

      background-color: pink;

      margin-bottom: 5px;

   }

   a{        //嵌套a==>表示list下面的a

      float: left;

   }

   span{      //嵌套span==>表示list下面的span

      float: right;

   }

}

==>经过编译成 .css 文件后的结果：

/*less===>嵌套规则*/

/*

传统嵌套方式：

.list{}

.list li{}

.list a{}

.list span{}

*/

.list {

   width: 600px;

   margin: 30px auto;

   padding: 0;

   list-style: none;

}

.list li {

   height: 30px;

   line-height: 30px;

   background-color: pink;

   margin-bottom: 5px;

}

.list a {

   float: left;

}

.list span {

   float: right;

}

==>效果图

案例：给a链接加hover

/*给a链接加hover*/

a{

   font-size: 20px;

   // &代表上一层选择器

   &:hover{

      color: red;

   }

}

==>经过编译成 .css 文件后的结果：

/*给a链接加hover*/

a {

   font-size: 20px;

}

a:hover {

   color: red;

}

@arguments变量

1. @arguments变量（使用的不是很多）

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

  • 如果你不想单独处理每一个参数的话就可以像这样写

/*@arguments变量*/

.border_arg(@w:30px,@c:red,@xx:solid){

   // border:@w @c @xx //如果嫌太复杂,不想这样写，可以使用@arguments如下:

   border: @arguments;

}

.test_arguments{

   .border_arg();

}

==>经过编译成 .css 文件后的结果：

/*@arguments变量*/

.test_arguments {

   border: 30px #ff0000 solid;

}

避免编译、！important以及总结

1. 避免编译

  • 有时候我们需要输出一些不正确的css语法或者使用一些less不认识的专有语法

  • 要输出这样的值我们可以在字符串前加上一个~

    • 例如：width：~‘  calc（100%-30）’

.less文件中

/*避免编译*/

.test_03{

   width: ~'calc(300px-30px)';

}

==>经过编译成 .css 文件后的结果：

/*避免编译*/

.test_03 {

   width: calc(300px-30px);

}

2. ！important关键字==>一般不使用

  • 会为所有混合所带来的样式，添加上！important

/*混合带来的好处*/

.border_radius(@radius:50px){

   -webkit-border-radius:@radius;

   -moz-border-radius:@radius;

   border-radius:@radius;

}

/*!important*/

.test_important{

   .border_radius() !important;

}

==>经过编译成 .css 文件后的结果：

/*!important*/

.test_important {

   -webkit-border-radius: 50px !important;

   -moz-border-radius: 50px !important;

   border-radius: 50px !important;

}

更多

1. Less中文网站

  • http://lesscss.cn/

  • 如果看不懂英文，中文网站：http://old.lesscss.net/article



Less-CSS预处理语言

Hello，伙伴们
长按二维码就可以关注我们啦！


客服 Q Q：2747014329

官方网站：http://www.maiweikj.com/

以上是关于Less-CSS预处理语言的主要内容，如果未能解决你的问题，请参考以下文章

关于C语言预处理命令

自然语言处理_一般处理流程

自然语言处理基础 - NLP

c语言 define 怎么用的

引用c语言标准库函数一般要用啥预处理命令

C语言宏定义