提供Discuz ,ECShop ,PHPCMS ,帝国CMS ,CSS教程 ,PHP教程 ,DedeCMS ,WordPress ,HTML教程等cms问题查询.
当前位置: CSS教程 > CSS预处理器怎样运用【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网别的相干文章!

「梦想一旦被付诸行动,就会变得神圣,如果觉得我的文章对您有用,请帮助本站成长」

分享到:
赞(0) 打赏

支付宝扫一扫打赏

微信扫一扫打赏

标签:

上一篇:

下一篇:

相关推荐

0 条评论关于"CSS预处理器怎样运用【css教程】,CSS预处理器"

最新评论

    暂无留言哦~~

博客简介

看古风美女插画Cos小姐姐,素材合集图集打包下载:炫龙网,好看二次元插画应有尽有,唯美小姐姐等你来。

友情链接

他们同样是一群网虫,却不是每天泡在网上游走在淘宝和网游之间、刷着本来就快要透支的信用卡。他们或许没有踏出国门一步,但同学却不局限在一国一校,而是遍及全球!申请交换友链

服务热线:
 

 QQ在线交流

 旺旺在线