CSS预编译语言的基础语法属性 -------- less sass scss

什么是css预编译器？

CSS 预编译器是用一种专门的编程语言，进行Web页面样式设计，然后再编译成正常的CSS文件，以供项目使用。基于CSS的扩展及升级，在开发环境下带来便利，需要编译为css代码后浏览器才能读取。目前三个比较主流的预编译器Less、Sass 和 Stylus

• （可略过） 在vue init webpack +项目名（详见我的另一篇帖子vue脚手架基本安装）创建的目录内 ./build/utils.js内可找到预编译语言种类
  

一、基本语法

Less & SCSS：（Less与Scss的语法按照CSS标准）

.classname {
color:red;
}

Sass&Stylus：

.classname
color:red

二、变量定义赋值

Less：less里面定义变量值前面加@符号，此处定义一个变量名为main-color，变量值为red。应用时直接将==@加变量名写入该类需要定义的属性里充当属性值==即可。可同时赋给多个类，更改该变量值后所有类的属性值一起改变。

@main-color: red;
.classnameA {
color: @main-color;
}
.classnameB {
color: @main-color;
}

Sass：sass里面定义变量值前面加$符号,方法跟less类似加

$main-color: red;
.classnameA {
color: $main-color;
}

Stylus：stylus在这里没有符号或括号

main-color: red;
.classnameA
color: $main-color

三、混入

功能：将一个类的属性及属性值在另一个类里面使用。预处理最好的功能之一
用法：直接将classnameA类名写到classnameB内，则classnameB内就有了classnameA里面的属性。
在less里:

.classnameA {
color:red;
}
.classnameB {
.classnameA
}

输入为css后

.classnameA {
color:red;
}
.classnameB {
color:red;
}

四、less层级嵌套

比如一个html层级代码为如下的界面

<div class='father'>
<ul>
<li>
<a></a>
</li>
</ul>
</div>

在css里面要更改div里a标签的样式的话需要每一级查询而在less可以同时更改每一级属性样式

1.在css里

/*给类名为father的div标签加样式*/
.father {
font-size:16px;
}
/*给类名为father的div标签下的ul标签加样式*/
.father ul {
padding:0px;
}
/*给类名为father的div标签下的ul标签下li标签加样式*/
.father ul li{
margin:0px;
}
/*给类名为father的div标签下的ul标签下li标签下的a标签加样式*/
.father ul li a {
color:red;
}

css里每一个样式加效果需要分开写

2.在less里

.father {
font-size:16px;
ul {
padding:0px;
li{
margin:0px;
a {
color:red;
}
}
}
}

在less里更改标签样式只需要按层级往同一个标签名或者类名里书写（这里举得例子是往father类名里添加），对应层的样式写在对应层级即可。

类名传参

less:

.classnameA (@c:red,@h:0) {
color:@c;
height:@h;
}
.classnameC (@w) {
width:@w;
}
.classnameB {
.classnameA(black,100px)
}
.classnameD {
.classnameC (100px)
}

在上面的例子中类名后加上括号，像函数一样在里面填入参数，
此处为c和h（c,h都加了默认值），参数前要加入@符号，
类名内将形参写到对应属性需要修改的属性值位置。

（其中传入的参数可以加默认值也可以不加，参数w就没有加默认值，但调用方式相同。）

这里的在其他类名里调用时，直接将定义的需要传参的classnameA写入classnameB内并在括号里面对应传入参数，则输出成css后则为：

.classnameB {
color:black;
height:100px;
}
.classnameD {
width:100px;
}

继承extend

还可以将类B里面的属性继承给类D，代码如下

.classnameD:extend(.classnameB){
font-size:16px
}

classnameD会继承classnameB里面的属性值并且可以在此基础上添加新的属性（此处为font-size）
输出结果为：

.classnameD {
color:black;
height:100px;
font-size:16px
width:100px;
}

基础暂时写这么多，后期可能会添加更多内容，有疑惑请评论至下方哦谢谢

• 点赞 2
• 收藏
• 分享
• 文章举报

XOIIUUZZ 发布了8 篇原创文章 · 获赞 13 · 访问量 372 私信 关注