旗下导航:搜·么
当前位置:网站首页 > HTML > 正文

CSS预处理器怎样运用【html5教程】

作者:搜搜PHP网发布时间:2019-11-26分类:HTML浏览:61


导读:CSS中偶然可能会发作代码的争执,而且没法实行变量,算术盘算等。经由过程运用CSS预处理器能够举行编写靠近变量和四规盘算等顺序的写法,所以,接下来的这篇文章就来给人人分享关于怎样运...
CSS中偶然可能会发作代码的争执,而且没法实行变量,算术盘算等。经由过程运用CSS预处理器能够举行编写靠近变量和四规盘算等顺序的写法,所以,接下来的这篇文章就来给人人分享关于怎样运用CSS预处理器的要领。

我们先来看一下什么是CSS预处理器?

默许的CSS是到现在为止不可能完成的形貌,CSS预处理器是为了有效地形貌CSS的东西。

然则,CSS预处理器不能在浏览器中运用。

虽然有林林总总的Sass,Less,但到目前为止它好像依然很难再CSS中形貌,不过是被称为“新的CSS扩大版本”。

重要的预处理器范例

Sass

Sass是一个经由过程转换scsss的CSS文件,扩大名是“.scss”运用变量和公式添加到CSS编程作风中。

经由过程转换(编译)“style.scss”的Sass文件,您能够建立“style.css”。

要运用它,你必需装置ruby。

LESS

LESS就转换(编译)像Sass如许的LESS文件。

变量的观点能够更少,因而您能够盘算它,也能够分条理地编写。

然则,假如不装置node.js来运用“style.less”,则不会转换“style.css”。

我们来看细致的例子

怎样写LESS的状况

HTML

<h1>hello,ki4网!</h1>
<h2>hello,ki4网!</h2>

LESS

@mycolor: blue;
h1 {
    font-size: 30px;
    font-color: @mycolor;
}
h2 {
    font-size: 20px;
    font-color: @mycolor;
}

浏览器显现结果以下:

HTML

<h1>hello,ki4网!</h1>
<h2>hello,ki4网!</h2>

style.css文件

h1 {
    font-size: 30px;
    font-color: blue;
}
h2 {
    font-size: 20px;
    font-color: blue;
}

这类状况下,假如要将色彩变色,在悉数变色的状况下,假如想要转变2个h1h2的话,就用变量举行以下的形貌。

@mycolor: blue;
h1 {
    font-size: 30px;
    font-color: @mycolor;
}
h2 {
    font-size: 20px;
    font-color: @mycolor;
}

以上就是CSS预处理器怎样运用的细致内容,更多请关注ki4网别的相干文章!

标签:CSS预处理器