黑马程序员技术交流社区

标题: 【广州前端】更快速的css编译开发Less语言 [打印本页]

---

作者: 李盼盼老师    时间: 2018-1-24 12:58
标题: 【广州前端】更快速的css编译开发Less语言

查看更多精彩前端资源

【前言】

       我们都知道写 CSS 代码是有些枯燥无味的，尤其是面对那些成千上万行 CSS 代码的项目。你始终在相同的地方使用相同的规则并且在你的编译器中搜索和替换每次颜色的变化。这需要很多的努力和规则来保持你的 CSS 可维护，但它本不应该这样的。

【语法-变量】

       它可以让你更轻松的在整个样式表中定义和更改值

   

[CSS] 纯文本查看 复制代码

 @color: #4D926F;

#header {
            color: @color;
}

【嵌套】

       &表示串联选择器，例如，如下代码中的&表示的就是a

[CSS] 纯文本查看 复制代码

#header {

            h1 {

                 font-size: 26px;

                 font-weight: bold;

            }

            p {

                 font-size: 12px;

                 a {

                     text-decoration: none;

                     &:hover {

                        border-width: 1px

                 }

               }

            }

}

      

【运算】

       可以进行加减乘除，可以分辨出颜色和单位, 可以在复合属性中进行运算

[CSS] 纯文本查看 复制代码

@the-border: 1px;
@base-color: #111;
@red:        #842210;
#header {
  color: @base-color * 3;
  border-left: @the-border;
  border-right: @the-border * 2;
}
@var: 1px + 5;
#nav{
  border: (@var * 2) solid black;
}

【函数】

       让我们来看一下  fadeout， 一个降低颜色透明度的函数。

[CSS] 纯文本查看 复制代码

@var: #004590;
div{
  height: 50px;
  width: 50px;
  background-color: @var;
  &:hover{
    background-color: fadeout(@var, 50%)
  }
}

      

       通过上述代码，当我们将鼠标悬浮在 div 上时，就可以获取半透明度的动画效果，这比之前自己手动设置要简单的多了。还有很多有用的函数去操纵颜色，检测图像的大小，甚至将资源作为data-uri嵌入样式表。

       如下是一些颜色方面的

   

[CSS] 纯文本查看 复制代码

lighten(@color, 10%); // 颜色变浅darken(@color, 10%); // 颜色变深

saturate(@color, 10%); // 增加饱和度

desaturate(@color, 10%); // 减少饱和度

 

fadein(@color, 10%); // 返回透明度比@color小10%的颜色

fadeout(@color, 10%); // 返回透明度比@color大10%的颜色

fade(@color, 50%); // 把颜色调到指定透明度

 

spin(@color, 10); // 色相高10度的颜色

spin(@color, -10); // 色相低10度的颜色

 

mix(@color1, @color2); // 两中颜色进行混合后的颜色

 

hue(@color);        // 返回该颜色的色相

saturation(@color); // 返回该颜色的饱和度

lightness(@color);  // 返回该颜色的明度

 

// 在一种颜色的通道上创建另一种颜色

@new: hsl(hue(@old), 45%, 90%); // @new 将会保持 @old的 色调, 但是具有不同的饱和度和亮度

         

【自定义函数】

       我们可以自己把一些重复的css代码封装起来，类似js，需要使用的地方，直接调用即可

[CSS] 纯文本查看 复制代码

.button() {
    display: block;
    border: 1px solid black;
    background-color: grey;
    &:hover { background-color: white }
}

/*在header里面调用*/
#header{
  .button();
}

/*在nav里面调用*/
#nav{
  .button();
}

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2