css预处理器怎么用?

css预处理器的用法:

首先我们需要安装css预处理器,这里以less为例,讲解css预处理器的安装以及简单使用。

1、使用npm命令安装less css预处理器

npm install -g less

推荐学习:Node.js教程

2、less简单语法了解:

(1)变量

@变量名: 变量值;    //格式
@bgColor: #f5f5f5;  //格式举例

(2)嵌套

div{
    width: 100px;
    background: red;
    p{
        color: #fff;
        background: skyblue;
    }
}

(3)Mixin

/* 定义一个类 */
.roundedCorners(@radius: 5px) {
  -moz-border-radius: @radius;
  -webkit-border-radius: @radius;
  border-radius: @radius;
}

/* 引用类 */
#header {
  .roundedCorners;
}
#footer {
  .roundedCorners(10px);
}

3、创建一个main.less文件,进行测试

/* 定义一个类 */
.roundedCorners(@radius: 5px) {
  -moz-border-radius: @radius;
  -webkit-border-radius: @radius;
  border-radius: @radius;
}


div{
    width: 100px;
    background: red;
    .roundedCorners(10px);
    p{
        color: #fff;
        background: skyblue;
    }
}

4、使用lessc命令进行编译

lessc main.css > main.css

5、编译后的文件

/* 定义一个类 */
div {
  width: 100px;
  background: red;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
}
div p {
  color: #fff;
  background: skyblue;
}

以上就是css预处理器 less的简单使用。

Image placeholder
前端答疑
未设置
  43人点赞

没有讨论,发表一下自己的看法吧

推荐文章
css预处理器是什么意思?

css预处理器是什么意思?css预处理器用来定义一种新的语言,完全兼容css语法,它为css增加了一些编程的特性,比如变量、函数、逻辑控制。css预处理器编写的css不能直接被浏览器识别,需要编译生成

css定位(position)属性怎么用?

position属性规定元素的定位类型。说明position属性定义建立元素布局所用的定位机制。任何元素都可以定位,不过绝对或固定元素会生成一个块级框,而不论该元素本身是什么类型。相对定位元素会相对于

jq css怎么用?

jqcss怎么用?jquery中,css()方法用来返回或设置匹配的元素的一个或多个样式属性。语法:$(selector).css(name) $(selector).css(name,value)

css文件怎么用?

css文件怎么用?css文件使用有两种方式,一种是通过link标签引入,一个是使用@import进行导入。1、通过link使用css文件将下面代码放在head标签中(相关课程推荐:css视频教程)2、

css hover怎么用?

csshover怎么用?:hover选择器用于选择鼠标指针浮动在上面的元素。提示::hover选择器可用于所有元素,不只是链接。提示::link选择器设置指向未被访问页面的链接的样式,:visited

使用html-webpack-plugin对HTML文件进行预处理

一、前言先整理一波之前和webpack相关的文章: 使用Webpack对CSS文件进行后处理 基于Webpack的CSSSprites实现方案 Stylus系列——webpack-spritesmit

css和js后加问号和数字有什么用?

css和js后加问号和数字有什么用?当浏览器请求一个网站的时候,会加载各种各样的资源,比如:HTML文档、图片、CSS和JS等文件。对于一些不经常变的内容,浏览器会将他们保存在本地的文件中,下次访问相

hover在css中有什么用?

hover在css中有什么用?以下是我总结出的hover在css中的作用,供各位参考:修改鼠标悬浮时a标签的颜色使用hover实现悬浮显示二维码仿html元素的title属性效果给网页增加动效,如鼠标

css精灵图有什么用?

css精灵图其实就是把一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时,载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。使用时,需要使用CSS的background-im

jquery hasClass()方法怎么用?

jqueryhasClass()方法怎么用?hasClass()方法验证匹配元素是否包含指定的类,包含则返回true,否则返回false。语法结构:$(selector).hasClass(class

jquery不兼容低版本ie浏览器怎么办?

jquery不兼容低版本ie浏览器怎么办?1、可以使用原生JS或者低版本的Jquery1.x版本。因为Jquery从2.x版本开始已经不再进行IE低版本(IE6、IE7、IE8)的兼容性处理。如果需要

js脚本怎么用?

JavaScript是一种属于网络的脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现

jquery on()怎么用?

jqueryon()怎么用?基本语法:$(selector).on(event,function) $(selector).on(object,[selector],[data]) $(selecto

jquery bind()怎么用?

jquerybind()怎么用?bind()方法向被选元素添加一个或多个事件处理程序,以及当事件发生时运行的函数。语法$(selector).bind(event,data,function,map)

jquery中each()怎么用?

jquery中each()怎么用?在jquery中的each有两种用法,分别是$.each()和$(selector).each()。$(selector).each()用于jquery对象的遍历$.

jQuery :empty怎么用?

jQuery:empty怎么用?作用::empty选择器选取空的元素。空元素指的是不包含子元素或文本的元素。语法:$(":empty")(推荐学习:jQuery教程手册)jquery:empty选择器

jQuery focus()怎么用?

jQueryfocus()怎么用?jquery中focus()是一个方法,它可以传入一个函数,作为元素获取焦点时的响应事件,也可以不传参数,用来触发focus事件。作用:当元素获得焦点时(当通过鼠标点

jQuery blur()怎么用?

jQueryblur()怎么用?当元素失去焦点时触发blur事件。blur()函数触发blur事件,或者如果设置了function参数,该函数也可规定当发生blur事件时执行的代码。语法$(selec

jquery html()方法怎么用?

jqueryhtml()方法怎么用?html()取得第一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档。在一个HTML文档中,我们可以使用.html()方法来获取任意一

jQuery :lang()怎么用?

jQuery:lang()怎么用?jQuery的:lang(language)选择器用于匹配指定语言的所有元素,将其封装为jQuery对象并返回。指定语言的元素,表示该元素具有lang属性,其值为指定

jquery get()怎么用?

jqueryget()怎么用?1、获取DOM元素的get()方法get()方法获得由选择器指定的DOM元素。语法:$(selector).get(index)示例:获得第一个p元素的名称和值$("bu

jquery ajaxError()方法怎么用?

jqueryajaxError()方法怎么用?ajaxError()方法规定AJAX请求失败时运行的函数。注意:自jQuery版本1.8起,该方法只被附加到文档。语法:$(document).ajax

jQuery getJSON()方法怎么用?

jQuerygetJSON()方法怎么用?getJSON()方法使用AJAX的HTTPGET请求获取JSON数据。语法:$(selector).getJSON(url,data,success(dat

jquery ajax()怎么用?

jQuery中的ajax()方法用于执行AJAX(异步HTTP)请求。所有的jQueryAJAX方法都使用ajax()方法。该方法通常用于其他方法不能完成的请求。该方法是jQuery底层AJAX实现。

jquery中prop()怎么用?

使用此方法返回属性值时,将返回第一个匹配元素的值;使用此方法设置属性值时,将为选定元素设置一个或多个属性。注意:prop()方法应该用于检索属性值,例如DOM属性(如selectedIndex,tag