CSS 预处理器框架

最新推荐文章于 2024-12-09 10:32:29 发布

原创最新推荐文章于 2024-12-09 10:32:29 发布 · 731 阅读

0 ·

CC 4.0 BY-SA版权

面试同时被 2 个专栏收录

34 篇文章

订阅专栏

CSS

17 篇文章

订阅专栏

CSS 预处理器框架

参考博客：为您详细比较三个 CSS 预处理器（框架）：Sass、LESS 和 Stylus

可以按照需求来使用别人的代码

1.sass (compass)

2.less (lesshat/EST)

3.提供现成的 mixin

4.类似 JS 类库，封装常用功能

css 预处理器常见问题（详细讲解见上篇博客）

1.常见的 css 预处理器

1.Less(Node.js) 2.Sass (Ruby 但有 Node 版本）

2.预处理器作用

1.帮助更好地组织 CSS 代码

2.提高代码复用率

3.提升可维护性

3.预处理器能力

1.嵌套反映层级和约束

2.变量和计算减少重复代码

3.Extend 和 Mixin 代码片段

4.循环适用于复杂有规律的样式

5.import CSS 文件模块化

4.预处理器的优缺点

优点：提高代码复用率和可维护性

缺点：需要引入编译过程有学习成本

演示：

less

.box{
    .inline-block();
    .opacity(60);
    height: 100px;
    background: green;
    margin:10px;
}
.left{
    float:left;
    .clearfix();
}


.row{
    .make-row();
    .col{
        .make-column(1/4);
        background:red;
        height: 100px;
    }
}
.my-triangle{
    margin:100px;
    // width:100px;
    // height:200px;
    // border: 1px solid red;
}
.my-triangle::after{
    content: ' ';
    .triangle(top left, 100px, red, side);
}

　　html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="7-est.css">
    <title>Document</title>
</head>
<body>
    <div class="box">.box box1</div>
    <div class="box">.box box2</div>
    <div class="left">.left</div>
    <div class="row">
        <div class="col">col1</div>
        <div class="col">col2</div>
        <div class="col">col3</div>
        <div class="col">col4</div>
    </div>
    <div class="my-triangle"></div>
</body>
</html>

　　css

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td {
  padding: 0;
  margin: 0;
  border: 0;
  outline: 0;
  font-weight: inherit;
  font-style: inherit;
  font-family: inherit;
  font-size: 100%;
  vertical-align: baseline;
}
body {
  line-height: 1;
}
ol,
ul {
  list-style: none;
}
table {
  border-collapse: separate;
  border-spacing: 0;
  vertical-align: middle;
}
caption,
th,
td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle;
}
a img {
  border: none;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
summary,
main {
  display: block;
  padding: 0;
  margin: 0;
  border: 0;
  outline: 0;
  font-weight: inherit;
  font-style: inherit;
  font-family: inherit;
  font-size: 100%;
  vertical-align: baseline;
}
audio,
canvas,
video {
  display: inline-block;
  *display: inline;
  *zoom: 1;
}
audio:not([controls]),
[hidden] {
  display: none;
}
.box {
  display: inline-block;
  *display: inline;
  *zoom: 1;
  opacity: 0.6;
  filter: alpha(opacity=60);
  height: 100px;
  background: green;
  margin: 10px;
}
.left {
  float: left;
  *zoom: 1;
}
.left:before,
.left:after {
  display: table;
  content: "";
}
.left:after {
  clear: both;
}
.row {
  *zoom: 1;
}
.row:before,
.row:after {
  display: table;
  content: "";
}
.row:after {
  clear: both;
}
.row .col {
  display: block;
  float: left;
  width: 22.75%;
  margin-left: 3%;
  background: red;
  height: 100px;
}
.row .col:first-child {
  margin-left: 0%;
}
.my-triangle {
  margin: 100px;
}
.my-triangle::after {
  content: ' ';
  position: absolute;
  width: 0;
  height: 0;
  border: 50px solid red;
  border-bottom-color: transparent;
  border-right-color: transparent;
  margin-top: -50px;
  margin-left: -50px;
}