今天小编跟大家讲解下有关LESSCSS让CSS使用起来更加灵活成就CSS动态化 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关LESSCSS让CSS使用起来更加灵活成就CSS动态化 的相关资料，希望小伙伴们看了有所帮助。
提到LESSCSS 可能大家不都不太了解。LESSCSS是属于css中的一种动态语言。他可以让CSS使用起来更加灵活 使用方式形如Javascript中的一些变量 函数等。LESSCSS可以在多种语言和环境中使用 比如服务端、浏览器端。 说了那么多LESSCSS的各种好处 下面介绍一下LESSCSS简单使用方法。 1、变量使用 我们使用LESSCSS的时候 可以单独定义一些变量 用于我们在任何时候调用。在平日里 我们写CSS的时候 都会遇到很多字号颜色一样的时候 这时候 我们要是使用LESSCSS就可以把相同的字体颜色值定义到变量中 遇到一样的直接调取变量即可。 LESSCSS代码： 复制代码代码如下: @bgColor: red; header { color: @bgColor; } footer { color: @bgColor; } 编译后的CSS： 复制代码代码如下: header { color: red; } footer { color: red; } 2、函数使用 函数使用或者有人说它是混合使用 其实都是一个意思。这种使用方法就是可以把之前写好的class类名引入另一个即将编入的class类名中。使用这种方法的前提就是两种class类名的样式完全一样 或者只是数值不一样。这种使用方法非常像Javascript中的函数一样。在引用的类名后面加个小括号 里面可以定义参数 默认的参数值可以在其参数的冒号后面添加。相同参数用英文的逗号隔开。 LESSCSS代码： 复制代码代码如下: .box-shadow (@boxShadowColor: red) { -webkit-box-shadow: 0 0 5px @boxShadowColor; -moz-box-shadow: 0 0 5px @boxShadowColor; -ms-box-shadow: 0 0 5px @boxShadowColor; -o-box-shadow: 0 0 5px @boxShadowColor; box-shadow: 0 0 5px @boxShadowColor; } header { .box-shadow; } footer { .box-shadow(blue); } 编译后的CSS： 复制代码代码如下: header { -webkit-box-shadow: 0 0 5px red; -moz-box-shadow: 0 0 5px red; -ms-box-shadow: 0 0 5px red; -o-box-shadow: 0 0 5px red; box-shadow: 0 0 5px red; } footer { -webkit-box-shadow: 0 0 5px blue; -moz-box-shadow: 0 0 5px blue; -ms-box-shadow: 0 0 5px blue; -o-box-shadow: 0 0 5px blue; box-shadow: 0 0 5px blue; } 3、嵌套使用 CSS中若要是书写标签中的标签可以用包含选择器的方式。如今 用LESSCSS编写 可以用嵌套的方法编写。这样写可以方便日后代码维护。 LESSCSS代码： 复制代码代码如下: header { h1 { font-size: 26px; font-weight: bold; } div { font-size: 12px; a { text-decoration: none; &:hover { border-width: 1px } } } } 编译后的CSS： 复制代码代码如下: header h1 { font-size: 26px; font-weight: bold; } header div { font-size: 12px; } header div a { text-decoration: none; } header div a:hover { border-width: 1px; } 以上便是LESSCSS的编写方法 掌握起来并不是很困难 而且用起来是十分方便的。在HTML文件中 我们只需要引两个东西（代码如下） 即可完成LESSCSS的解析。 复制代码代码如下: <!-- 这个是less代码存放的less文件在HTML下引用的方法 --> <link rel="stylesheet/less"type="text/css"href="https://www.aidi.net.cn//css/example.less"> <!-- 下面这个就是解析less文件的js 也可以放到服务器端来解析 --> <script src="https://raw.github.com/less/less.js/master/dist/less-1.4.2.min.js"type="text/javascript"></script> 好了 铝四敲炊啵恢来蠹颐靼酌?LESSCSS暂时就为大家介绍到这里 希望对大家有所帮助。有啥建议咱们可以随时交流哈。~来源：爱蒂网
