CSS预处理之Less_html/css

来源：懂视网责编：小采时间：2020-11-27 16:05:42

CSS预处理之Less_html/css

CSS预处理之Less_html/css_WEB-ITnose:趁这几天有空，了解一下css预处理的知识 less简介 Less 是一个Css 预编译器,意思指的是它可以扩展Css语言,添加功能如允许变量(variables),混合(mixins),函数(functions) 和许多其他的技术，让你的Css更具维护性，主题性，扩展性。 Less 可运行在 N

推荐度：

点击下载本文 文档为doc格式

导读CSS预处理之Less_html/css_WEB-ITnose:趁这几天有空，了解一下css预处理的知识 less简介 Less 是一个Css 预编译器,意思指的是它可以扩展Css语言,添加功能如允许变量(variables),混合(mixins),函数(functions) 和许多其他的技术，让你的Css更具维护性，主题性，扩展性。 Less 可运行在 N

趁这几天有空，了解一下css预处理的知识

less简介

Less 是一个Css 预编译器,意思指的是它可以扩展Css语言,添加功能如允许变量(variables),混合(mixins),函数(functions) 和许多其他的技术，让你的Css更具维护性，主题性，扩展性。

Less 可运行在 Node 环境,浏览器环境和Rhino环境.同时也有3种可选工具供你编译文件和监视任何改变。

语法

变量

声明一个变量：

@width：100px；.test { width: @width;}

混合

.border { border: 1px solid red;}.test { width: @box_width; height: 100px; background: #ccc; .border; //直接混合使用}

嵌套

正常写法

.test { font-size: 10px;}. test a { color: red;}

less 写法：

.test { font-size: 10px;a { color: red; }}

同样可以包含伪类：

.test { font-size: 10px; a { &:hover { color: blue; } color: red; }}

运算

@width: 5px;.test { width: @width + 10; //15px}

less能推断此处的单位

函数

.border_radius(@width:5px) { //5px是可选参数，表示默认值 -webkit-border-radius: @width; -moz-border-radius: @width; -ms-border-radius: @width; border-radius: @width;}.test { .border_radius(20px); }

命名空间

.bundle { .button { display: block; border: 1px solid black; background-color: grey; &:hover { background-color: white } }}//现在如果我们想在 .header a 中混合 .button 类，那么我们可以这样做：.header a { color: orange; .bundle > .button; }

作用域

@var: red;.page { #header { color: @var; // white } @var: white;}

避免编译

.test { width: ~'calc(300px - 30px)';}

注释

//不会被编译css /**/会被编辑到css

更多使用语法，请查看less中文网。 http://lesscss.net/ 个人github博客：aralic.github.io

CSS预处理之Less_html/css

推荐度：

点击下载本文 文档为doc格式

标签： html css 预处理

热门焦点

CSS预处理之Less_html/css

CSS预处理之Less_html/css

less简介

语法

CSS预处理之Less_html/css

最新推荐

猜你喜欢

热门推荐