LESSCSS让CSS使用起来更加灵活成就CSS动态化
2013-08-15 15:01
627 查看
提到LESSCSS,可能大家不都不太了解。LESSCSS是属于css中的一种动态语言。他可以让CSS使用起来更加灵活,使用方式形如JavaScript中的一些变量,函数等。LESSCSS可以在多种语言和环境中使用,比如服务端、浏览器端。
说了那么多LESSCSS的各种好处,下面介绍一下LESSCSS简单使用方法。
1、变量使用
我们使用LESSCSS的时候,可以单独定义一些变量,用于我们在任何时候调用。在平日里,我们写CSS的时候,都会遇到很多字号颜色一样的时候,这时候,我们要是使用LESSCSS就可以把相同的字体颜色值定义到变量中,遇到一样的直接调取变量即可。
LESSCSS代码:
编译后的CSS:
2、函数使用
函数使用或者有人说它是混合使用,其实都是一个意思。这种使用方法就是可以把之前写好的class类名引入另一个即将编入的class类名中。使用这种方法的前提就是两种class类名的样式完全一样,或者只是数值不一样。这种使用方法非常像JavaScript中的函数一样。在引用的类名后面加个小括号,里面可以定义参数,默认的参数值可以在其参数的冒号后面添加。相同参数用英文的逗号隔开。
LESSCSS代码:
编译后的CSS:
3、嵌套使用
CSS中若要是书写标签中的标签可以用包含选择器的方式。如今,用LESSCSS编写,可以用嵌套的方法编写。这样写可以方便日后代码维护。
LESSCSS代码:
编译后的CSS:
以上便是LESSCSS的编写方法,掌握起来并不是很困难,而且用起来是十分方便的。在HTML文件中,我们只需要引两个东西(代码如下),即可完成LESSCSS的解析。
好了,啰嗦了那么多,不知道大家明白没?LESSCSS暂时就为大家介绍到这里,希望对大家有所帮助。有啥建议咱们可以随时交流哈。~
说了那么多LESSCSS的各种好处,下面介绍一下LESSCSS简单使用方法。
1、变量使用
我们使用LESSCSS的时候,可以单独定义一些变量,用于我们在任何时候调用。在平日里,我们写CSS的时候,都会遇到很多字号颜色一样的时候,这时候,我们要是使用LESSCSS就可以把相同的字体颜色值定义到变量中,遇到一样的直接调取变量即可。
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="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暂时就为大家介绍到这里,希望对大家有所帮助。有啥建议咱们可以随时交流哈。~
相关文章推荐
- HTML&CSS基础学习笔记1.29-灵活地使用样式
- 使用Vue的slot插槽分发父组件内容实现高度复用、更加灵活的组件(推荐)
- 使用回调函数,简单模拟dbutils中Queryrunner的工作原理,并重写Queryrunner,使其使用起来更加简单方便
- 一步步做程序优化【3】OpenHMPP指令(更加灵活的使用异构计算)
- 使用HTML+CSS编写灵活的Tab页
- 使用CSS让图片旋转起来
- 一步步做程序优化【3】OpenHMPP指令(更加灵活的使用异构计算)
- CSS中使用expression,用来把CSS属性和Javas cript表达式关联起来
- 使用HTML+CSS编写一个灵活的Tab页
- 使用HTML+CSS编写一个灵活的Tab页
- 使用js实现html锚功能,可以任意定位锚的位置,比锚更加灵活
- 使用HTML+CSS编写一个灵活的Tab页
- 巧妙使用git stash使git操作更加灵活
- 学会使用css缩写div+css布局代码(使你的代码更加简洁)
- 对不支持CSS浏览器,如何获得提示信息,使用灵活的ALT属性
- 使用CSS滑动门技术编写一个灵活的Tab页
- 【Linux】vim中高频使用指令总结--->使vim用起来更加得心应手
- 使用Vue的slot插槽分发父组件内容实现高度复用、更加灵活的组件
- 灵活使用CSS内联样式
- HTML&CSS基础学习笔记1.27-灵活地使用样式